feat(levels): assemble the 50-level campaign and the sheet to review it
The deep-lock construction cannot go below three turns, so it cannot supply an opening band — every level it makes lands mid-difficulty and the curve comes out flat. harvest-easy pulls the shallow end from the shipped v0.5 set, but only the 3% of it that holds up: 568 of 1000 need no rotation at all and 51 more are clearable by tapping at random, which is what the monkey threshold is for. 33 levels survive, at one and two turns. select-50 scores candidates on mechanical features only, spreads the pick evenly across that range, and caps any one route grammar at 36% so the campaign cannot quietly become one template repeated — the shipped 1000 turned out to be thirty. Weights are a flag, so refitting them from a round of agent ratings is a re-run rather than an edit. The result is a curve rather than a plateau: difficulty score 3.85 / 6.24 / 7.60 across the three bands, rotations 1.8 / 3.0 / 3.5, and every level keeps three or more opening choices with a show of at least a second. The 50 register as a playable campaign edition, so review happens in the real game; docs/review-50.html is the handover sheet, one card per level with the opening position drawn from the solver rather than sketched. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
cabinw
+41
-17
@@ -1,7 +1,6 @@
|
||||
import { artDirection, directionTheme } from './art-directions.js';
|
||||
import { attachBoardViewport } from './board-viewport.js';
|
||||
import { TapQueue } from './tap-queue.js';
|
||||
import { exitTiming } from './exit-animation.js';
|
||||
import { PIGMENTS, LEVEL_THEMES, themeForScore, MOTION, themeWithColors } from './design-tokens.js';
|
||||
import { unlockAudio, playSound, toggleSound, soundEnabled } from './audio.js';
|
||||
import { icon, installUI, decorateUI } from './ui.js';
|
||||
@@ -10,13 +9,13 @@ import { CAMPAIGN_VERSIONS, campaignVersion } from './campaign-versions.js';
|
||||
import { CAMPAIGN_SELECTION_KEY, selectedCampaign, readCampaignProgress, writeCampaignProgress } from './campaign-progress.js';
|
||||
import { campaignLaunch, campaignPage, levelIndexFromInput, productionPresentation, createAnalysisCache } from './campaign-browser.js';
|
||||
import { readTutorialProgress, writeTutorialProgress, tutorialLaunch } from './tutorial-progress.js';
|
||||
import { layout, hitCell } from './geometry.js';
|
||||
import { layout, hitCell, center } from './geometry.js';
|
||||
import { TILE_ATLAS } from './sprites.js';
|
||||
import { CanvasPainter, COLORS, drawScene } from './renderer.js';
|
||||
import { CanvasPainter, COLORS, drawScene, exitDuration } from './renderer.js';
|
||||
const taps=new TapQueue();
|
||||
const $=id=>document.getElementById(id);
|
||||
const canvas=$('board'),ctx=canvas.getContext('2d'),painter=new CanvasPainter(ctx);
|
||||
let boardViewport;
|
||||
let boardViewport,baseView=null;
|
||||
let progressStorage;try{progressStorage=window.localStorage;}catch{}
|
||||
let saveUnavailable=!progressStorage;
|
||||
const launch=campaignLaunch(location.search,CAMPAIGN_VERSIONS,selectedCampaign(progressStorage));
|
||||
@@ -29,14 +28,16 @@ let tutorialProgress=readTutorialProgress(progressStorage,campaign.id,campaign.t
|
||||
let tutorialIndex=tutorialLaunch(location.search,campaign.tutorials?.length||0,tutorialProgress,saved);
|
||||
const cachedAnalysis=createAnalysisCache(analyze);
|
||||
let mapChapter=Math.floor(current/campaign.chapterSize),lastSolution=null;
|
||||
let game=new Game(tutorialIndex===null?LEVELS[current]:campaign.tutorials[tutorialIndex]),mode='play',trial=false,draft=null,editHistory=[],tool='tile',direction=1,color=0,selected=null,path=null,hint=null,animations=[],rotationAnimation=null,shake=null,toastTimer,view,width=0,height=0,frame=0;
|
||||
let game=new Game(tutorialIndex===null?LEVELS[current]:campaign.tutorials[tutorialIndex]),mode='play',trial=false,draft=null,editHistory=[],tool='tile',direction=1,color=0,selected=null,path=null,hint=null,animations=[],rotationAnimation=null,shake=null,intro=null,celebrate=null,celebrated=false,lastMoves=null,toastTimer,view,width=0,height=0,frame=0;
|
||||
let helpUsed=false;
|
||||
let activeTheme=null;
|
||||
const requestedDesign=artDirection(new URLSearchParams(location.search).get('design'));
|
||||
document.body.dataset.design=requestedDesign.id;
|
||||
const requestedTheme=LEVEL_THEMES.find(t=>t.id===new URLSearchParams(location.search).get('theme'));
|
||||
function applyTheme(score){
|
||||
activeTheme=mode==='edit'||trial?null:directionTheme(requestedDesign,(requestedTheme||themeForScore(score)).id,Number(new URLSearchParams(location.search).get('colors'))||7);
|
||||
// Journey designs (signpost, macaron) spread their five worlds evenly over the campaign, the last one at night.
|
||||
const chapterTheme=requestedDesign.journeyWorlds?requestedDesign.themes[Math.min(requestedDesign.themes.length-1,Math.floor(current/Math.max(1,LEVELS.length)*requestedDesign.themes.length))]:null;
|
||||
activeTheme=mode==='edit'||trial?null:directionTheme(requestedDesign,(requestedTheme||chapterTheme||themeForScore(score)).id,Number(new URLSearchParams(location.search).get('colors'))||7);
|
||||
const theme=activeTheme||LEVEL_THEMES[0];
|
||||
document.body.dataset.theme=theme.id;
|
||||
document.body.style.setProperty('--color-background',theme.background);
|
||||
@@ -87,8 +88,13 @@ function renderStats(){
|
||||
applyTheme(production?production.themeScore:a.score);
|
||||
$('level-name').textContent=production?.displayName||level.name;$('level-eyebrow').textContent=editing?'YOUR CREATION':trial?'PLAYTEST':teaching?`入门 ${teaching.step} / ${campaign.tutorials.length}`:`LEVEL ${String(current+1).padStart(2,'0')}`;
|
||||
$('breadcrumb').textContent=editing?'关卡工坊 / 自由创作':trial?'关卡工坊 / 试玩中':teaching?`入门序章 / ${teaching.title}`:`第 ${Math.floor(current/chapterSize)+1} 章 / ${level.chapterName||chapters[Math.floor(current/chapterSize)]}`;
|
||||
$('moves-title').textContent=editing?'离场额度':trial?'可用额度':'待解棋子';$('remaining-title').textContent=editing?'已放置':'待离场';
|
||||
$('moves').textContent=editing?level.moveLimit:trial?game.moves:game.tiles.length;$('remaining').innerHTML=`${editing?level.tiles.length:game.tiles.length}<small> / ${editing?level.cells.length:level.tiles.length}</small>`;
|
||||
$('moves-title').textContent=editing?'离场额度':trial?'可用额度':(requestedDesign.hud?.moves||'待解棋子');$('remaining-title').textContent=editing?'已放置':'待离场';
|
||||
// Stacked HUD (macaron): a small label over a big number, the reference game's 关卡 / 分数 columns.
|
||||
if(requestedDesign.hud&&!editing&&!trial){const h=requestedDesign.hud;$('level-eyebrow').innerHTML=teaching?`<small>${h.tutorial}</small><b>${teaching.step}<i>/${campaign.tutorials.length}</i></b>`:`<small>${h.level}</small><b>${current+1}</b>`;}
|
||||
const shownMoves=editing?level.moveLimit:trial?game.moves:game.tiles.length;$('moves').textContent=shownMoves;
|
||||
// Macaron: the counter pill pops when a token leaves (the reference game's score-pill bump).
|
||||
if(requestedDesign.motion?.pop&&lastMoves!==null&&shownMoves<lastMoves){const pill=$('moves').closest('.moves-bubble');if(pill){pill.classList.remove('pop');void pill.offsetWidth;pill.classList.add('pop');}}
|
||||
lastMoves=shownMoves;$('remaining').innerHTML=`${editing?level.tiles.length:game.tiles.length}<small> / ${editing?level.cells.length:level.tiles.length}</small>`;
|
||||
$('mini-caption').innerHTML=editing?'MAKE YOUR<br>OWN WAY ↗':'FOLLOW<br>THE FLOW ↗';
|
||||
if(production){
|
||||
$('difficulty-label').textContent=`${production.label} · 预估`;$('score-value').textContent=`D${production.tier}`;$('score-name').textContent=production.label;$('score-bars').innerHTML='';$('score-summary').textContent=`${production.estimate} · ${level.tiles.length} 枚棋子${production.reward?' · '+production.reward:''}`;
|
||||
@@ -111,7 +117,19 @@ function renderStats(){
|
||||
}
|
||||
if(editing){$('editor-valid').textContent=level.tiles.length===0?'○ 等待放置棋子':a.exhausted?'… 尚未确定可解性':a.solvable?'✓ 已验证可解':'! 关卡暂不可解';$('editor-valid').classList.toggle('error',!a.solvable&&!a.exhausted&&level.tiles.length>0);$('editor-score').innerHTML=`${a.score}<small>/100</small>`;$('editor-analysis-text').textContent=`观察难度 ${a.score}/100 · ${a.free} 枚可直接离场 · 最少 ${a.rotations} 次旋转。工作量 ${a.minimumActions??'—'} 次操作，参考 ${a.workload.estimatedSeconds} 秒（估算）。仅成功离场使用 1 额度，旋转与试探免费${a.exhausted?' · 搜索达到上限，尚未确定':!a.reachable?' · 存在无法避开的碰撞或闭环':!a.solvable?' · 离场额度不足':''}。`;$('editor-bars').innerHTML=bars(a);$('trial-button').disabled=!level.tiles.length;$('editor-undo').disabled=!editHistory.length;}
|
||||
}
|
||||
function resize(){const rect=canvas.getBoundingClientRect();width=rect.width;height=rect.height;const dpr=Math.min(devicePixelRatio||1,3);canvas.width=Math.round(width*dpr);canvas.height=Math.round(height*dpr);ctx.setTransform(dpr,0,0,dpr,0,0);const base=layout((mode==='edit'?draft:game.level).cells,width,height);view=boardViewport?boardViewport.camera.fit(base,width,height):base;boardViewport?.update();draw();}
|
||||
function resize(){const rect=canvas.getBoundingClientRect();width=rect.width;height=rect.height;const dpr=Math.min(devicePixelRatio||1,3);canvas.width=Math.round(width*dpr);canvas.height=Math.round(height*dpr);ctx.setTransform(dpr,0,0,dpr,0,0);const base=layout((mode==='edit'?draft:game.level).cells,width,height);baseView=base;view=boardViewport?boardViewport.camera.fit(base,width,height):base;boardViewport?.update();placeRotation();draw();}
|
||||
// Designs with layout.rotation 'under-board' (signpost, macaron) hang the rotate controls under the board's lower slanted
|
||||
// edges: from each edge midpoint drop a vertical to the tool discs' top edge and centre the button on that line's midpoint.
|
||||
// layout.rim is the design's own margin around the cells. Other designs keep their layout row.
|
||||
function placeRotation(){
|
||||
const card=document.querySelector?.('.game-card');if(!card)return;
|
||||
if(requestedDesign.layout?.rotation!=='under-board'||mode==='edit'||!baseView){for(const k of ['--rot-x','--rot-x2','--rot-y'])card.style.removeProperty(k);return;}
|
||||
const s=baseView.size,cs=game.level.cells.map(c=>center(c,baseView)),rim=Math.max(1.5,s*(requestedDesign.layout.rim??.06));
|
||||
const oL=Math.min(...cs.map(c=>c.x))-s-rim,oR=Math.max(...cs.map(c=>c.x))+s+rim,oT=Math.min(...cs.map(c=>c.y))-s*Math.sqrt(3)/2-rim,oB=Math.max(...cs.map(c=>c.y))+s*Math.sqrt(3)/2+rim;
|
||||
const cr=canvas.getBoundingClientRect(),kr=card.getBoundingClientRect(),tool=card.querySelector('.board-tools .item-face')?.getBoundingClientRect();
|
||||
const midY=cr.top-kr.top+oT+(oB-oT)*.875,toolTop=tool?tool.top-kr.top:kr.height-100;
|
||||
card.style.setProperty('--rot-x',`${(cr.left-kr.left+oL+(oR-oL)*.25).toFixed(1)}px`);card.style.setProperty('--rot-x2',`${(cr.left-kr.left+oL+(oR-oL)*.75).toFixed(1)}px`);card.style.setProperty('--rot-y',`${((midY+toolTop)/2).toFixed(1)}px`);
|
||||
}
|
||||
function draw(now=performance.now()){
|
||||
if(!view)return;
|
||||
ctx.clearRect(0,0,width,height);
|
||||
@@ -126,21 +144,25 @@ function draw(now=performance.now()){
|
||||
if(animations.length!==activeCount)renderStats();
|
||||
if(rotationAnimation){const t=Math.min(1,(now-rotationAnimation.start)/rotationAnimation.duration);state.boardAngle=-rotationAnimation.direction*Math.PI/3*(1-(1-Math.pow(1-t,3)));if(t>=1){rotationAnimation=null;renderStats();}}
|
||||
if(shake){const t=(now-shake.start)/550;if(t>=1)shake=null;else{state.shake=shake.id;state.shakeTime=t;}}
|
||||
if(intro){const t=Math.min(1,(now-intro.start)/intro.duration);state.intro=t;if(t>=1)intro=null;}
|
||||
if(celebrate){const t=Math.min(1,(now-celebrate.start)/celebrate.duration);state.celebrate=t;if(t>=1)celebrate=null;}
|
||||
drawScene(painter,mode==='edit'?draft:game.level,mode==='edit'?draft.tiles:game.tiles,view,state);
|
||||
if(!rotationAnimation&&mode==='play'&&!$('info-dialog').open){
|
||||
const next=taps.take(game.tiles);
|
||||
if(next){playTile(next);return;}
|
||||
finish();
|
||||
}
|
||||
if(animations.length||rotationAnimation||shake){cancelAnimationFrame(frame);frame=requestAnimationFrame(draw);}
|
||||
if(animations.length||rotationAnimation||shake||intro||celebrate){cancelAnimationFrame(frame);frame=requestAnimationFrame(draw);}
|
||||
}
|
||||
function toast(message,duration=3200){$('board-toast').textContent=message;$('board-toast').classList.add('visible');clearTimeout(toastTimer);toastTimer=setTimeout(()=>$('board-toast').classList.remove('visible'),duration);}
|
||||
function showLesson(){if(mode==='play'&&!trial&&game.initialLevel.lesson)toast(game.initialLevel.lesson,6500);}
|
||||
function resetEffects(){taps.clear();if($('result').open)$('result').close();clearTimeout(toastTimer);$('board-toast').classList.remove('visible');$('board-toast').textContent='';animations=[];rotationAnimation=null;for(const id of ['rotate-left','rotate-right'])$(id).classList.remove('hinted');shake=null;path=null;hint=null;cancelAnimationFrame(frame);$('result').hidden=true;}
|
||||
function startLevel(i){if(!Number.isInteger(i)||i<0||i>=LEVELS.length)return;boardViewport?.camera.reset();tutorialIndex=null;current=i;mapChapter=Math.floor(i/chapterSize);trial=false;mode='play';game=new Game(LEVELS[i]);helpUsed=false;resetEffects();applyMode();persist();renderMap();renderStats();resize();showLesson();}
|
||||
// Macaron plays a board entrance on every fresh board; other designs have motion.intro unset.
|
||||
function beginIntro(){lastMoves=null;intro=requestedDesign.motion?.intro&&!reduced?{start:performance.now(),duration:requestedDesign.motion.intro}:null;}
|
||||
function resetEffects(){taps.clear();intro=null;celebrate=null;celebrated=false;if($('result').open)$('result').close();clearTimeout(toastTimer);$('board-toast').classList.remove('visible');$('board-toast').textContent='';animations=[];rotationAnimation=null;for(const id of ['rotate-left','rotate-right'])$(id).classList.remove('hinted');shake=null;path=null;hint=null;cancelAnimationFrame(frame);$('result').hidden=true;}
|
||||
function startLevel(i){if(!Number.isInteger(i)||i<0||i>=LEVELS.length)return;boardViewport?.camera.reset();tutorialIndex=null;current=i;mapChapter=Math.floor(i/chapterSize);trial=false;mode='play';game=new Game(LEVELS[i]);helpUsed=false;resetEffects();beginIntro();applyMode();persist();renderMap();renderStats();resize();showLesson();}
|
||||
function startTutorial(i){
|
||||
if(!Number.isInteger(i)||!campaign.tutorials?.[i])return;
|
||||
boardViewport?.camera.reset();tutorialIndex=i;tutorialProgress={...tutorialProgress,current:i};trial=false;mode='play';game=new Game(campaign.tutorials[i]);helpUsed=false;resetEffects();applyMode();persistTutorial();renderMap();renderStats();resize();showLesson();
|
||||
boardViewport?.camera.reset();tutorialIndex=i;tutorialProgress={...tutorialProgress,current:i};trial=false;mode='play';game=new Game(campaign.tutorials[i]);helpUsed=false;resetEffects();beginIntro();applyMode();persistTutorial();renderMap();renderStats();resize();showLesson();
|
||||
}
|
||||
function applyMode(){const edit=mode==='edit';document.body.classList.toggle('editing',edit);$('play-tab').classList.toggle('active',!edit);$('edit-tab').classList.toggle('active',edit);$('play-inspector').hidden=edit;$('editor-panel').hidden=!edit;$('game-tools').hidden=edit;$('editor-board-tools').hidden=!edit;$('return-editor').hidden=!trial;$('map-button').hidden=edit;$('rotation-controls').hidden=edit;}
|
||||
function enterEditor(){
|
||||
@@ -154,7 +176,9 @@ function openResult(){ $('result').hidden=false;$('result').showModal();playSoun
|
||||
$('result').addEventListener('cancel',e=>e.preventDefault());
|
||||
function finish(){
|
||||
if($('result').open)return;
|
||||
if(mode==='edit'||animations.length||rotationAnimation||$('info-dialog').open)return;
|
||||
if(mode==='edit'||animations.length||rotationAnimation||celebrate||$('info-dialog').open)return;
|
||||
// Macaron celebrates on the board first (motion.celebrate), then opens the result once the burst has settled.
|
||||
if(game.won&&requestedDesign.motion?.celebrate&&!celebrated&&!reduced){celebrated=true;celebrate={start:performance.now(),duration:requestedDesign.motion.celebrate};draw();return;}
|
||||
if(game.won){
|
||||
const teaching=activeTutorial();
|
||||
if(teaching){
|
||||
@@ -170,7 +194,7 @@ function finish(){
|
||||
$('result').innerHTML=`<div class="result-emblem">${icon('track')}</div><h3>${game.moves<=0?'这份关卡的离场额度不足':'轨迹暂时打了个结'}</h3><p>${game.moves<=0?'仍有棋子等待离场，可以返回工坊增加额度。旋转和试探都没有扣除额度。':'剩余棋子的路线被阻挡，或轨道形成了闭环。'}</p><button class="primary" id="recover">${trial?'返回编辑关卡':game.history.length?'撤销上一步':'重新开始'}</button><button class="text-button" id="retry">重新开始</button>`;openResult();$('recover').onclick=()=>trial?enterEditor():game.history.length?undo():restart();$('retry').onclick=restart;
|
||||
}
|
||||
}
|
||||
function restart(){game=new Game(game.initialLevel);helpUsed=false;resetEffects();renderStats();draw();finish();showLesson();}
|
||||
function restart(){game=new Game(game.initialLevel);helpUsed=false;resetEffects();beginIntro();renderStats();draw();finish();showLesson();}
|
||||
function undo(){if(animations.length||rotationAnimation)return;if(game.undo()){resetEffects();renderStats();draw();toast('已回到上一次操作前，可以继续观察');}}
|
||||
function playTile(tile){
|
||||
if(rotationAnimation){if(taps.add(tile.id))draw();return;}
|
||||
@@ -180,7 +204,7 @@ function playTile(tile){
|
||||
for(const id of ['rotate-left','rotate-right'])$(id).classList.remove('hinted');
|
||||
const before=new Set(available(game.level,game.tiles).map(t=>t.id)),route=game.tap(tile.id);
|
||||
if(route.status==='exit'){
|
||||
playSound('exit');animations.push({route,start:performance.now(),duration:reduced?100:exitTiming(route).duration});
|
||||
playSound('exit');animations.push({route,start:performance.now(),duration:reduced?100:exitDuration(route,activeTheme?.artStyle)});
|
||||
const opened=available(game.level,game.tiles).filter(t=>!before.has(t.id));
|
||||
if(opened.length){hint=opened[0].id;toast(`移开这一枚，${opened.length} 枚棋子的路通了！`);}
|
||||
}
|
||||
@@ -306,7 +330,7 @@ function showMapDialog(){
|
||||
$('map-button').onclick=()=>{mapChapter=Math.floor(current/chapterSize);showMapDialog();};
|
||||
const atlas=new Image();atlas.onload=()=>{painter.atlas=atlas;draw();};atlas.onerror=()=>toast('棋子图片加载失败，已切换基础绘制');atlas.src=TILE_ATLAS;
|
||||
new ResizeObserver(resize).observe(canvas);
|
||||
applyMode();renderMap();renderStats();resize();
|
||||
beginIntro();applyMode();renderMap();renderStats();resize();
|
||||
|
||||
installUI();
|
||||
|
||||
|
||||
+38
-3
@@ -2,8 +2,8 @@ import { LEVEL_THEMES, PIGMENTS, contrast, themeWithColors } from './design-toke
|
||||
|
||||
const makePigments=(colors,labels)=>colors.map((color,i)=>({name:labels?.[i]||PIGMENTS[i].name,color,arrow:contrast('#FFFFFF',color)>=4.5?'#FFFFFF':'#172D39'}));
|
||||
const names=['轻松','进阶','烧脑','挑战','每周挑战'];
|
||||
const themes=(backgrounds,titles,materials,palettes,descriptions)=>backgrounds.map((background,i)=>({
|
||||
...LEVEL_THEMES[i],name:titles[i],background,ink:contrast('#12202A',background)>=4.5?'#12202A':'#FFFFFF',
|
||||
const themes=(backgrounds,titles,materials,palettes,descriptions,inks)=>backgrounds.map((background,i)=>({
|
||||
...LEVEL_THEMES[i],name:titles[i],background,ink:inks?.[i]||(contrast('#12202A',background)>=4.5?'#12202A':'#FFFFFF'),
|
||||
description:descriptions?.[i]||`${names[i]}主题 · ${titles[i]}。`,materials:Array.isArray(materials)?materials[i]:materials,
|
||||
palette:palettes?.[i]||LEVEL_THEMES[i].palette,
|
||||
}));
|
||||
@@ -77,11 +77,46 @@ export const ART_DIRECTIONS=Object.freeze([
|
||||
[[0,1,2,3,4,5,7],[0,1,3,6,8,9,4],[1,2,3,5,9,10,0],[0,1,4,6,7,10,11],[0,2,3,4,5,8,10]],
|
||||
['保留实验页的雾蓝背景、暖白格面与陶橙／雾蓝棋子，扩展色同样保持哑光。','像暖砂色纸上的铅笔路线，陶橙、赭金与木棕带来温度。','浅鼠尾草纸底，灰绿轨道与蓝、苔绿棋子形成安静的冷暖关系。','灰白图纸与石墨蓝细线，用陶红、雾紫和钢蓝组织复杂路线。','深蓝灰图纸上保留细线与白箭头，暖色棋子像夜航中的小标记。']),
|
||||
pigments:makePigments(['#D66C4D','#477FC0','#668877','#B58943','#8B7297','#45868C','#B76260','#607B90','#B28168','#46765F','#6B8AAB','#9C7284'],['陶橙','雾蓝','鼠尾草','赭金','雾紫','湖青','陶红','钢蓝','暖木','松绿','烟蓝','藕灰']).map(p=>({...p,arrow:'#FFFFFF'}))},
|
||||
{id:'signpost',code:'06',name:'路标',en:'SIGNPOST',tag:'线路图',style:'signpost',accent:'#2F5FBF',paper:'#F6F2E9',journeyWorlds:true,layout:{rotation:'under-board',rim:.06},
|
||||
description:'棋盘是一张线路图：奶白卡片托在世界色上，墨蓝钢轨压在浅色路基里，端点在板边收口。棋子是路标：十二色统一白箭头，一圈细描边，方向一眼可读。',
|
||||
principles:['格线几乎不可见，路基与钢轨分两层，交叉不打架','棋子内缩露出端口，细描边加统一放大的白箭头','旋转按钮像压在纸上的印记，挂在棋盘两肩之下'],
|
||||
route:{exit:'#2F5FBF',exitGlow:'#C9D7F3',blocked:'#C4432F',blockedGlow:'#F3D3CB',hint:'#D9A227'},
|
||||
themes:themes(
|
||||
['#B7CBD3','#DBC4A6','#BBCBB1','#D7BAB5','#1F2C3B'],
|
||||
['晨雾','杏仁','苔原','暮砂','夜航'],
|
||||
[
|
||||
{board:'#F5F2EA',boardGrid:'#E9E3D6',track:'#3A5068',trackHalo:'#E2DBCC',rim:'#7B8F9C',base:'#95ACB6'},
|
||||
{board:'#F7F2E7',boardGrid:'#EAE3D3',track:'#3A5068',trackHalo:'#E4DCCA',rim:'#98836A',base:'#BFA483'},
|
||||
{board:'#F5F3E9',boardGrid:'#E8E4D6',track:'#3A5068',trackHalo:'#E1DCCC',rim:'#7E9077',base:'#9EB194'},
|
||||
{board:'#F7F1EA',boardGrid:'#EAE2D8',track:'#3A5068',trackHalo:'#E4DBCF',rim:'#9D817D',base:'#BB9C97'},
|
||||
{board:'#F6F2E9',boardGrid:'#E9E3D6',track:'#3A5068',trackHalo:'#E2DBCC',rim:'#55697C',base:'#121C27'},
|
||||
],
|
||||
[[0,2,5,3,1,8,6],[1,0,2,6,3,9,7],[3,6,1,0,4,10,2],[6,0,3,5,2,11,8],[2,5,0,6,1,9,3]],
|
||||
['晨雾蓝灰世界色配奶白卡片，靛蓝、松石与琥珀领色。','杏仁暖砂世界色，朱砂与靛蓝领色，像午后的纸面。','苔原灰绿世界色，紫藤与玫红提亮。','暮砂玫瑰灰世界色，玫红与靛蓝对照。','夜航深蓝灰世界色，奶白卡片像被灯照亮的图。']),
|
||||
pigments:makePigments(['#2F5FBF','#C4432F','#1C8378','#7A4EB8','#4A8235','#A8690C','#BF3A6B','#4A6B8A','#B0572F','#357358','#8A5C92','#5A6D7C'],['靛蓝','朱砂','松石','紫藤','苔绿','琥珀','玫红','钢蓝','赤陶','墨绿','藕紫','铁灰']).map(p=>({...p,arrow:'#FFFFFF'}))},
|
||||
{id:'macaron',code:'07',name:'马卡龙',en:'MACARON',tag:'参考 Meowdoku',style:'macaron',accent:'#E07416',paper:'#FBF6F0',journeyWorlds:true,layout:{rotation:'under-board',rim:.40},motion:{intro:720,pop:true,celebrate:720},hud:{level:'关卡',moves:'待解',tutorial:'入门'},
|
||||
description:'奶油色世界上托一张白色软托盘，六角格像带白缝的软糖砖，藕紫轨道压在糖砖上。棋子是糖果色圆角六角，白色贴纸边，粗圆头白箭头。反馈用果糖色说话：路线点亮、糖砖出场、离场撒星。',
|
||||
principles:['白托盘加白缝，格与格靠留白分开，不画格线','十二色统一白色粗箭头，与白缝同一套白','状态用颜色和弹跳表达：路线点亮、碰撞橘红、出场从左上角一波弹开'],
|
||||
route:{blocked:'#F0663A',hint:'#F7C948'},
|
||||
themes:themes(
|
||||
['#F5EFE7','#FBE6DA','#EEE8F6','#F9E2E8','#3E2E35'],
|
||||
['奶油','蜜桃','香芋','草莓牛奶','可可夜'],
|
||||
[
|
||||
{board:'#FADBCB',boardGrid:'#FFFFFF',track:'#96707B',trackHalo:'#FFFFFF',rings:['#FADBCB','#FAE9BE','#D6EEE1'],tray:'#FFFFFF',shadow:'#E6DDD6',shadowSoft:'#EEE7E0',blush:'#F9B9A6',blocked:'#F0663A',hint:'#F7C948',hintGlow:'#FCE7B5'},
|
||||
{board:'#FDE3D3',boardGrid:'#FFFFFF',track:'#976A66',trackHalo:'#FFFFFF',rings:['#FDE3D3','#FBEDC4','#F4D9E2'],tray:'#FFFFFF',shadow:'#EBD5C9',shadowSoft:'#F3DED4',blush:'#F9B9A6',blocked:'#F0663A',hint:'#F7C948',hintGlow:'#FCE7B5'},
|
||||
{board:'#E9E0F6',boardGrid:'#FFFFFF',track:'#78678F',trackHalo:'#FFFFFF',rings:['#E9E0F6','#F8E3EA','#D9EAF1'],tray:'#FFFFFF',shadow:'#DED6EA',shadowSoft:'#E6DFF0',blush:'#F9B9A6',blocked:'#F0663A',hint:'#F7C948',hintGlow:'#FCE7B5'},
|
||||
{board:'#FBDDE5',boardGrid:'#FFFFFF',track:'#966076',trackHalo:'#FFFFFF',rings:['#FBDDE5','#FDEBCF','#E3EEDA'],tray:'#FFFFFF',shadow:'#EAD0D8',shadowSoft:'#F1D9E0',blush:'#F9B9A6',blocked:'#F0663A',hint:'#F7C948',hintGlow:'#FCE7B5'},
|
||||
{board:'#F9E3D6',boardGrid:'#FFFFFF',track:'#8A6370',trackHalo:'#FFFFFF',rings:['#F9E3D6','#FAEBC8','#DAEBE3'],tray:'#FFF9F3',shadow:'#2A1E23',shadowSoft:'#34272C',blush:'#F9B9A6',blocked:'#F0663A',hint:'#F7C948',hintGlow:'#FCE7B5'},
|
||||
],
|
||||
[[0,5,3,2,6,1,4],[1,9,0,4,2,10,3],[6,7,4,2,11,5,3],[7,3,5,2,11,8,1],[4,0,2,6,1,9,3]],
|
||||
['奶油底、白托盘，草莓、蓝莓与抹茶领色，像一盒刚打开的马卡龙。','蜜桃奶油底，蜜柑与海盐蓝领色，暖一点、甜一点。','香芋奶油底，香芋紫与玫瑰领色，冷一点、静一点。','草莓牛奶底，玫瑰与抹茶对照，白托盘更亮。','可可夜底，白托盘像被灯照亮的甜品盘，薄荷与草莓最先出现。'],
|
||||
['#7A5560','#7C4E52','#5F4E78','#7B4658','#FBEFE6']),
|
||||
pigments:makePigments(['#EE5398','#E5680C','#AB8716','#4C9E5A','#369C94','#578BF0','#937DE4','#D06E93','#B5806A','#4A91D4','#8C68CC','#C56AC4'],['草莓','蜜柑','蜂蜜','抹茶','薄荷','蓝莓','香芋','玫瑰','可可','海盐','葡萄','洋李']).map(p=>({...p,arrow:'#FFFFFF'}))},
|
||||
]);
|
||||
export function artDirection(id){return ART_DIRECTIONS.find(d=>d.id===id)||ART_DIRECTIONS[0];}
|
||||
export function directionTheme(direction,themeId,count=7){
|
||||
const source=direction.themes.find(t=>t.id===themeId)||direction.themes[0];
|
||||
return {...themeWithColors(source,count),artStyle:direction.style,pigments:direction.pigments};
|
||||
return {...themeWithColors(source,count),artStyle:direction.style,pigments:direction.pigments,route:direction.route};
|
||||
}
|
||||
export function appearanceTile(tile,theme){
|
||||
const color=theme?.pigments?.[tile.color];
|
||||
|
||||
@@ -3,6 +3,7 @@ import { ARCHIVED_LEVELS } from './levels-archive.js';
|
||||
import { EXPERIENCE_CAMPAIGN, EXPERIENCE_LEVELS } from './levels-v04.js';
|
||||
import { PRODUCTION_CAMPAIGN, PRODUCTION_LEVELS } from './levels-v05.js';
|
||||
import { TUTORIAL_LEVELS } from './tutorial-levels.js';
|
||||
import { C50_CAMPAIGN, C50_LEVELS } from './levels-c50.js';
|
||||
|
||||
// Public layout versions are distinct from the level JSON schema's `version: 1`.
|
||||
// Historical layouts stay intact; all editions share the current game rules.
|
||||
@@ -32,6 +33,10 @@ export const CAMPAIGN_VERSIONS = [
|
||||
chapters:PRODUCTION_CAMPAIGN.chapters, chapterSize:PRODUCTION_CAMPAIGN.chapterSize,
|
||||
levels:PRODUCTION_LEVELS, tutorials:TUTORIAL_LEVELS, legacyStorageKeys:[],
|
||||
},
|
||||
{
|
||||
id:C50_CAMPAIGN.id, name:C50_CAMPAIGN.name, description:C50_CAMPAIGN.description,
|
||||
chapters:C50_CAMPAIGN.chapters, chapterSize:C50_CAMPAIGN.chapterSize, levels:C50_LEVELS,
|
||||
},
|
||||
];
|
||||
export const DEFAULT_CAMPAIGN_VERSION = 'v0.5';
|
||||
export function campaignVersion(id) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
+134
-17
@@ -1,4 +1,4 @@
|
||||
import { drawStyledToken } from './token-art.js';
|
||||
import { drawStyledToken, tint } from './token-art.js';
|
||||
import { appearanceTile } from './art-directions.js';
|
||||
import { exitTiming, smoothMotion, travelProgress } from './exit-animation.js';
|
||||
import { THEME, PIGMENTS, pigmentIndex } from './design-tokens.js';
|
||||
@@ -8,9 +8,14 @@ import { collisionPhase, contactPath } from './collision-animation.js';
|
||||
import { center, hexPoints, trackPoints, routePoints, pointAlong } from './geometry.js';
|
||||
import { TILE_FRAMES, TILE_RADIUS, TILE_ASPECT } from './sprites.js';
|
||||
export const COLORS=PIGMENTS.map(p=>p.color);
|
||||
// Macaron's exit ends in a bubble dissolve that needs more time than the shared 180 ms effect window.
|
||||
const MACARON_DISSOLVE_MS=560;
|
||||
export function exitDuration(route,artStyle){const timing=exitTiming(route);return artStyle==='macaron'?timing.travelMs+MACARON_DISSOLVE_MS:timing.duration;}
|
||||
// Four-point sparkle star used by the macaron win celebration.
|
||||
const sparkle=(x,y,r)=>Array.from({length:8},(_,j)=>{const b=j*Math.PI/4-Math.PI/2,rr=j%2?r*.38:r;return {x:x+Math.cos(b)*rr,y:y+Math.sin(b)*rr};});
|
||||
// Scene commands remain engine-independent. sprite() is an optional atlas adapter.
|
||||
export function drawTile(p,x,y,size,tile,angle=-Math.PI/2+tile.dir*Math.PI/3,scale=1) {
|
||||
const r=size*(tile.artStyle==='paper'?.88:TILE_RADIUS)*scale;
|
||||
const r=size*(tile.artStyle==='paper'?.88:tile.artStyle==='signpost'?.90:tile.artStyle==='macaron'?.90:TILE_RADIUS)*scale;
|
||||
if(drawStyledToken(p,x,y,r,tile,angle))return;
|
||||
const textured=p.sprite?.(tile.color,x,y,r)===true;
|
||||
if(!textured){
|
||||
@@ -25,7 +30,8 @@ export function drawScene(p,level,tiles,view,state={}) {
|
||||
const {size}=view;
|
||||
const visualTile=tile=>appearanceTile({...tile,color:pigmentIndex(state.theme?Math.max(0,level.tiles.findIndex(t=>t.id===tile.id)):tile.color,state.theme)},state.theme);
|
||||
const materials={...THEME,...state.theme?.materials};
|
||||
const paper=state.theme?.artStyle==='paper';
|
||||
const paper=state.theme?.artStyle==='paper',signpost=state.theme?.artStyle==='signpost',macaron=state.theme?.artStyle==='macaron';
|
||||
const roadbedWidth=Math.min(18,Math.max(5,size*.30)),railWidth=Math.min(7,Math.max(2.5,size*.105)),gummyWidth=Math.min(6.5,Math.max(2.2,size*.11));
|
||||
const angle=state.boardAngle||0,cos=Math.cos(angle),sin=Math.sin(angle);
|
||||
const rotate=points=>points.map(pt=>{const x=pt.x-view.ox,y=pt.y-view.oy;return {x:view.ox+x*cos-y*sin,y:view.oy+x*sin+y*cos};});
|
||||
const base={polygon:(pts,c)=>p.polygon(rotate(pts),c),line:(pts,c,w)=>p.line(rotate(pts),c,w)};
|
||||
@@ -44,47 +50,121 @@ export function drawScene(p,level,tiles,view,state={}) {
|
||||
const movingIds=new Set(motions.map(a=>a.route.tile.id));
|
||||
const cellKeys=new Set(level.cells.map(c=>key(c.q,c.r)));
|
||||
const sorted=[...level.cells].sort((a,b)=>center(a,view).y-center(b,view).y);
|
||||
// Macaron: cells pop in as a wave from the top-left corner (state.intro 0–1); without an intro every cell is at scale 1.
|
||||
const cellScale=(()=>{
|
||||
if(!macaron||!(state.intro<1))return ()=>1;
|
||||
const cs=level.cells.map(c=>({c,p:center(c,view)})),xs=cs.map(o=>o.p.x),ys=cs.map(o=>o.p.y),x0=Math.min(...xs),x1=Math.max(...xs),y0=Math.min(...ys),y1=Math.max(...ys);
|
||||
const order=new Map(cs.map(({c,p})=>[key(c.q,c.r),((x1>x0?(p.x-x0)/(x1-x0):0)+(y1>y0?(p.y-y0)/(y1-y0):0))/2]));
|
||||
return cell=>{const t=Math.max(0,Math.min(1,(state.intro-order.get(key(cell.q,cell.r))*.55)/.45)),u=t-1;return t<=0?0:1+2.2*u*u*u+1.2*u*u;};
|
||||
})();
|
||||
// Macaron: cell tints follow concentric rings from the board centre, so they stay put through every rotation.
|
||||
const ringTint=(()=>{
|
||||
if(!macaron)return ()=>materials.board;
|
||||
const rings=materials.rings||[materials.board],cq=level.cells.reduce((a,c)=>a+c.q,0)/level.cells.length,cr=level.cells.reduce((a,c)=>a+c.r,0)/level.cells.length;
|
||||
let origin=level.cells[0],best=Infinity;for(const c of level.cells){const d=Math.hypot(c.q-cq,c.r-cr);if(d<best){best=d;origin=c;}}
|
||||
return cell=>{const dq=cell.q-origin.q,dr=cell.r-origin.r;return rings[Math.max(Math.abs(dq),Math.abs(dr),Math.abs(dq+dr))%rings.length];};
|
||||
})();
|
||||
// Macaron: cells along a previewed or travelling route blush in the token's own tint; a blocked cell blushes orange-cream.
|
||||
// A tapped route carries its tile; a traced preview does not, so the tile is looked up at the route's first step.
|
||||
const routeFill=route=>{const start=route.steps?.[0],tile=route.tile||(start&&tiles.find(t=>t.q===start.q&&t.r===start.r));return (tile&&visualTile(tile).fill)||materials.track;};
|
||||
const blushCells=new Map();
|
||||
if(macaron){
|
||||
const blush=(steps,color)=>{for(const s of steps||[])blushCells.set(key(s.q,s.r),color);};
|
||||
for(const m of motions)if(m.route.status==='exit')blush(m.route.steps,tint(routeFill(m.route),.84));
|
||||
if(state.path)blush(state.path.steps,state.path.status==='exit'?tint(routeFill(state.path),.80):materials.blush);
|
||||
for(const m of motions)if(m.blocker&&m.phase.impact>0)blushCells.set(key(m.blocker.q,m.blocker.r),materials.blush);
|
||||
}
|
||||
// Macaron: one white tray under everything, the rounded convex hull of the cells plus a margin, lifted by two opaque
|
||||
// shadow steps. The tray turns with the board; the shadow offset stays vertical on screen.
|
||||
if(macaron){
|
||||
const pad=size*.34,cross=(o,a,b)=>(a.x-o.x)*(b.y-o.y)-(a.y-o.y)*(b.x-o.x);
|
||||
const hull=pts=>{const s=[...pts].sort((a,b)=>a.x-b.x||a.y-b.y),lower=[],upper=[];for(const q of s){while(lower.length>=2&&cross(lower[lower.length-2],lower[lower.length-1],q)<=0)lower.pop();lower.push(q);}for(const q of s.reverse()){while(upper.length>=2&&cross(upper[upper.length-2],upper[upper.length-1],q)<=0)upper.pop();upper.push(q);}return [...lower.slice(0,-1),...upper.slice(0,-1)];};
|
||||
const rounded=(poly,radius)=>poly.flatMap((v,i)=>{const prev=poly[(i+poly.length-1)%poly.length],next=poly[(i+1)%poly.length],ka=Math.min(.5,radius/Math.hypot(prev.x-v.x,prev.y-v.y)),kb=Math.min(.5,radius/Math.hypot(next.x-v.x,next.y-v.y)),a={x:v.x+(prev.x-v.x)*ka,y:v.y+(prev.y-v.y)*ka},b={x:v.x+(next.x-v.x)*kb,y:v.y+(next.y-v.y)*kb};return Array.from({length:6},(_,j)=>{const t=j/5,u=1-t;return {x:u*u*a.x+2*u*t*v.x+t*t*b.x,y:u*u*a.y+2*u*t*v.y+t*t*b.y};});});
|
||||
const tray=grow=>rounded(hull(level.cells.flatMap(c=>{const {x,y}=center(c,view);return hexPoints(x,y,size+pad+grow);})),size*.9);
|
||||
for(const [grow,dy,color] of [[size*.06,size*.20,materials.shadowSoft],[0,size*.10,materials.shadow]])p.polygon(rotate(tray(grow)).map(q=>({x:q.x,y:q.y+dy})),color);
|
||||
base.polygon(tray(0),materials.tray);
|
||||
}
|
||||
// Signpost: a flat offset base and a rim under the cells lift the card off the world colour.
|
||||
// The base offset stays vertical on screen, so it is applied after board rotation.
|
||||
if(signpost){
|
||||
const rimW=Math.max(1.5,size*.06),baseDy=size*.12;
|
||||
for(const cell of sorted){const {x,y}=center(cell,view);p.polygon(rotate(hexPoints(x,y,size+.2+rimW)).map(q=>({x:q.x,y:q.y+baseDy})),materials.base);}
|
||||
for(const cell of sorted){const {x,y}=center(cell,view);base.polygon(hexPoints(x,y,size+.2+rimW),materials.rim);}
|
||||
}
|
||||
// Paint cells before rails. Paper keeps the reference's narrow gaps; other
|
||||
// styles overlap slightly to avoid antialiasing seams.
|
||||
for(const cell of sorted){const {x,y}=center(cell,view);base.polygon(hexPoints(x,y,paper?size*.97:size+.2),materials.board);}
|
||||
// Cell boundaries stay beneath the connected track endpoints.
|
||||
for(const cell of sorted){
|
||||
const {x,y}=center(cell,view);
|
||||
if(macaron){const sc=cellScale(cell);if(sc>.02)base.polygon(roundedHex(x,y,size*.90*sc,.16),blushCells.get(key(cell.q,cell.r))||ringTint(cell));continue;}
|
||||
base.polygon(hexPoints(x,y,paper?size*.97:size+.2),materials.board);
|
||||
}
|
||||
// Cell boundaries stay beneath the connected track endpoints. Macaron separates cells with white gutters instead.
|
||||
if(!macaron)for(const cell of sorted){
|
||||
const {x,y}=center(cell,view),edge=hexPoints(x,y,paper?size*.97:size);
|
||||
base.line([...edge,edge[0]],materials.boardGrid,paper?Math.max(.4,size*.025):Math.max(1,size*.024));
|
||||
base.line([...edge,edge[0]],materials.boardGrid,paper?Math.max(.4,size*.025):signpost?Math.max(.6,size*.02):Math.max(1,size*.024));
|
||||
}
|
||||
const rails=[];
|
||||
for(const cell of sorted) {
|
||||
const {x,y}=center(cell,view);
|
||||
const {x,y}=center(cell,view),sc=cellScale(cell);
|
||||
if(sc<=.15)continue;
|
||||
for(let a=0;a<6;a++) if(a<cell.tracks[a]) {
|
||||
// Inset the centerline by half the widest stroke at each hex side.
|
||||
// Rounded line caps must also remain inside the visible cell.
|
||||
const trackWidth=Math.max(4,size*.16);
|
||||
const visualRadius=Math.max(0,size*.965-trackWidth/Math.sqrt(3)-.5);
|
||||
const trackWidth=signpost?roadbedWidth:macaron?gummyWidth:Math.max(4,size*.16);
|
||||
// Rails run continuously across macaron's white gutters; only board-edge ends are pulled inside the brick face.
|
||||
const visualRadius=Math.max(0,(macaron?size*.90:size*.965)-trackWidth/Math.sqrt(3)-.5);
|
||||
const b=cell.tracks[a],points=trackPoints(x,y,size,a,b);
|
||||
const exterior=d=>!cellKeys.has(key(cell.q+DIRS[d][0],cell.r+DIRS[d][1]));
|
||||
const first=points[0],last=points[points.length-1],shrink=1-visualRadius/size;
|
||||
const dx0=exterior(a)?(first.x-x)*shrink:0,dy0=exterior(a)?(first.y-y)*shrink:0;
|
||||
const dx1=exterior(b)?(last.x-x)*shrink:0,dy1=exterior(b)?(last.y-y)*shrink:0;
|
||||
if(!paper)points.forEach((p,i)=>{const t=i/(points.length-1),u=1-t;p.x-=u*u*u*dx0+t*t*t*dx1;p.y-=u*u*u*dy0+t*t*t*dy1;});
|
||||
if(sc<1)points.forEach(pt=>{pt.x=x+(pt.x-x)*sc;pt.y=y+(pt.y-y)*sc;});
|
||||
rails.push({points,primary:!state.trackEmphasis||state.trackEmphasis(cell,a,b)});
|
||||
}
|
||||
}
|
||||
// Pattern studies can emphasize real routes while retaining the other paired
|
||||
// connections as secondary lines. Ordinary levels keep the same drawing passes.
|
||||
for(const {points,primary} of rails)if(!primary)base.line(points,state.secondaryTrackColor||materials.boardGrid,Math.max(1,size*.025));
|
||||
if(!paper)for(const {points,primary} of rails)if(primary)base.line(points,materials.trackHalo,Math.max(4,size*.16));
|
||||
for(const {points,primary} of rails)if(primary)base.line(points,materials.track,paper?Math.max(.7,size*.055):Math.max(2.5,size*.10));
|
||||
if(state.path) p.line(routePoints(state.path,view),state.path.status==='exit'?THEME.primary:THEME.warning,Math.max(4,size*.12));
|
||||
if(!paper&&!macaron)for(const {points,primary} of rails)if(primary)base.line(points,materials.trackHalo,signpost?roadbedWidth:Math.max(4,size*.16));
|
||||
for(const {points,primary} of rails)if(primary)base.line(points,materials.track,paper?Math.max(.7,size*.055):signpost?railWidth:macaron?gummyWidth:Math.max(2.5,size*.10));
|
||||
// Route preview: classic styles draw it under the tokens; signpost draws it over them, in two layers, ending at the rim.
|
||||
// Macaron draws the line under the tokens but its blocked cross above them, so a short stub still shows its cross.
|
||||
let afterTokens=null;
|
||||
const drawPath=()=>{
|
||||
if(!state.path)return;
|
||||
if(macaron){
|
||||
// One chunky line in the token's own colour over the rails; a blocked route stops at the contact point with an orange cross.
|
||||
const exit=state.path.status==='exit',fill=routeFill(state.path);
|
||||
let points=routePoints(state.path,view);if(exit&&!state.path.travelPoints&&points.length>2)points=points.slice(0,-1);
|
||||
p.line(points,exit?fill:materials.blocked,gummyWidth*1.15);
|
||||
if(!exit)afterTokens=()=>{const q=points[points.length-1],k=gummyWidth*1.2;p.line([{x:q.x-k,y:q.y-k},{x:q.x+k,y:q.y+k}],materials.blocked,gummyWidth);p.line([{x:q.x-k,y:q.y+k},{x:q.x+k,y:q.y-k}],materials.blocked,gummyWidth);};
|
||||
return;
|
||||
}
|
||||
if(!signpost){p.line(routePoints(state.path,view),state.path.status==='exit'?THEME.primary:THEME.warning,Math.max(4,size*.12));return;}
|
||||
const exit=state.path.status==='exit',route=state.theme.route||{};
|
||||
let points=routePoints(state.path,view);if(exit&&!state.path.travelPoints&&points.length>2)points=points.slice(0,-1);
|
||||
p.line(points,exit?route.exitGlow:route.blockedGlow,roadbedWidth*1.05);p.line(points,exit?route.exit:route.blocked,railWidth*1.5);
|
||||
if(!exit){const q=points[points.length-1],k=railWidth*1.4;p.line([{x:q.x-k,y:q.y-k},{x:q.x+k,y:q.y+k}],route.blocked,railWidth);p.line([{x:q.x-k,y:q.y+k},{x:q.x+k,y:q.y-k}],route.blocked,railWidth);}
|
||||
};
|
||||
if(!signpost)drawPath();
|
||||
if(state.selected) {
|
||||
const cell=level.cells.find(c=>c.q===state.selected.q&&c.r===state.selected.r);
|
||||
if(cell){const c=center(cell,view),pts=hexPoints(c.x,c.y,size*.98);p.line([...pts,pts[0]],THEME.reward,3);}
|
||||
}
|
||||
for(const tile of [...tiles].filter(t=>!movingIds.has(t.id)).sort((a,b)=>center(a,view).y-center(b,view).y)) {
|
||||
const c=center(tile,view);
|
||||
if(tile.id===state.hint) {p.circle(c.x,c.y,size*1.13,THEME.reward);p.circle(c.x,c.y,size*1.03,THEME.warningSurface);}
|
||||
const c=center(tile,view),sc=cellScale(tile);
|
||||
// Macaron: a tray-white seat under every resting token covers the rail crossings in the gutters around its brick,
|
||||
// so no rail end shows at the token's edge; when the token leaves, the continuous rail reappears.
|
||||
if(macaron&&sc>=.3)p.polygon(roundedHex(c.x,c.y,size*1.12*sc,.16),materials.tray);
|
||||
if(tile.id===state.hint) {
|
||||
if(macaron){p.polygon(roundedHex(c.x,c.y,size*1.02,.16),materials.hintGlow);p.polygon(roundedHex(c.x,c.y,size*.94,.16),materials.hint);}
|
||||
else if(signpost){const ring=Array.from({length:48},(_,i)=>({x:c.x+Math.cos(i/48*Math.PI*2)*size*1.1,y:c.y+Math.sin(i/48*Math.PI*2)*size*1.1}));p.line([...ring,ring[0]],state.theme.route?.hint||THEME.reward,Math.max(2.5,size*.08));}
|
||||
else{p.circle(c.x,c.y,size*1.13,THEME.reward);p.circle(c.x,c.y,size*1.03,THEME.warningSurface);}
|
||||
}
|
||||
if(state.queued?.includes(tile.id)){
|
||||
const ring=hexPoints(c.x,c.y,size*1.03);
|
||||
p.line([...ring,ring[0]],THEME.primary,3);
|
||||
p.line([...ring,ring[0]],macaron?materials.track:THEME.primary,3);
|
||||
}
|
||||
let dx=0;
|
||||
if(tile.id===state.shake) dx=Math.sin(state.shakeTime*38)*5*(1-state.shakeTime);
|
||||
@@ -92,7 +172,17 @@ export function drawScene(p,level,tiles,view,state={}) {
|
||||
for(const {blocker,impactAngle,phase} of motions)if(tile.id===blocker?.id){
|
||||
dx+=Math.cos(impactAngle)*phase.kick*size*.32;dy+=Math.sin(impactAngle)*phase.kick*size*.32;
|
||||
}
|
||||
drawTile(p,c.x+dx,c.y+dy,size,visualTile(tile));
|
||||
if(sc>=.3)drawTile(p,c.x+dx,c.y+dy,size,visualTile(tile),undefined,sc);
|
||||
}
|
||||
if(signpost)drawPath();
|
||||
afterTokens?.();
|
||||
// Macaron: when the last token has left, twelve candy stars and a honey ring burst out of the tray before the result opens.
|
||||
if(macaron&&state.celebrate!==undefined&&state.celebrate<1){
|
||||
const t=state.celebrate,ease=1-Math.pow(1-t,3),cs=level.cells.map(c=>center(c,view)),cx=cs.reduce((a,c)=>a+c.x,0)/cs.length,cy=cs.reduce((a,c)=>a+c.y,0)/cs.length;
|
||||
const reach=Math.max(...cs.map(c=>Math.hypot(c.x-cx,c.y-cy)))+size*1.3,colors=(state.theme.palette||[]).map(i=>state.theme.pigments[i].color);
|
||||
const ringR=reach*(.45+.6*ease),ring=Array.from({length:48},(_,i)=>({x:cx+Math.cos(i/48*Math.PI*2)*ringR,y:cy+Math.sin(i/48*Math.PI*2)*ringR}));
|
||||
p.line([...ring,ring[0]],materials.hint+Math.round((1-t)*200).toString(16).padStart(2,'0'),Math.max(1,size*.14*(1-t)));
|
||||
for(let i=0;i<12;i++){const a=i/12*Math.PI*2-Math.PI/2+ease*.4,d=reach*(.3+.8*ease),r=size*.34*(1-smoothMotion(t)),sx=cx+Math.cos(a)*d,sy=cy+Math.sin(a)*d;if(r>0)p.polygon(sparkle(sx,sy,r),colors.length?colors[i%colors.length]:materials.hint);}
|
||||
}
|
||||
for(const {route,progress,target,phase,movingPath,contact,impactAngle} of motions) {
|
||||
const blocked=route.status!=='exit';
|
||||
@@ -104,6 +194,7 @@ export function drawScene(p,level,tiles,view,state={}) {
|
||||
}
|
||||
if(target&&phase.impact>0){
|
||||
const x=(contact.x+target.x)/2,y=(contact.y+target.y)/2;
|
||||
if(macaron){const k=size*.30*phase.impact;p.line([{x:x-k,y:y-k},{x:x+k,y:y+k}],materials.blocked,gummyWidth);p.line([{x:x-k,y:y+k},{x:x+k,y:y-k}],materials.blocked,gummyWidth);continue;}
|
||||
for(const offset of [-1.95,-1.2,1.2,1.95]){const a=impactAngle+offset,d=size*(.12+phase.impact*.16),length=size*.26*phase.impact;p.line([{x:x+Math.cos(a)*d,y:y+Math.sin(a)*d},{x:x+Math.cos(a)*(d+length),y:y+Math.sin(a)*(d+length)}],materials.track,Math.max(1.5,size*.055));}
|
||||
}
|
||||
}
|
||||
@@ -132,13 +223,14 @@ export function exitGeometry(route,view){
|
||||
export function drawExit(p,route,view,progress,tile,reduced=false){
|
||||
const {points,edge,angle}=exitGeometry(route,view),size=view.size;
|
||||
if(reduced){if(progress<.8){const at=pointAlong(points,progress/.8);drawTile(p,at.x,at.y,size,tile,at.angle);}return;}
|
||||
const timing=exitTiming(route),travel=timing.travelFraction;
|
||||
const timing=exitTiming(route),travel=timing.travelMs/exitDuration(route,tile.artStyle);
|
||||
if(progress<travel){
|
||||
const at=pointAlong(points,travelProgress(progress/travel,timing.travelMs));
|
||||
drawTile(p,at.x,at.y,size,tile,at.angle);return;
|
||||
}
|
||||
const t=Math.min(1,(progress-travel)/(1-travel)),ease=smoothMotion(t);
|
||||
const color=tile.fill||COLORS[tile.color],dx=Math.cos(angle),dy=Math.sin(angle);
|
||||
if(tile.artStyle==='macaron'){bubbleDissolve(p,edge,angle,size,tile,color,t);return;}
|
||||
// Local exit plume: short enough to remain visible in the canvas gutter.
|
||||
const at={x:edge.x+dx*size*.48*ease,y:edge.y+dy*size*.48*ease};
|
||||
for(let i=3;i>=1;i--){
|
||||
@@ -154,3 +246,28 @@ export function drawExit(p,route,view,progress,tile,reduced=false){
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Macaron exit: the token reaches its port, swells like a bubble, pops, and drifts off as smaller bubbles with
|
||||
// highlights that fade out. Circles with alpha only; every bubble's offsets are fixed so all frames agree.
|
||||
function bubbleDissolve(p,edge,angle,size,tile,color,t){
|
||||
const dx=Math.cos(angle),dy=Math.sin(angle),alphaHex=v=>Math.round(Math.max(0,Math.min(1,v))*255).toString(16).padStart(2,'0'),base=color.slice(0,7);
|
||||
const reach=smoothMotion(Math.min(1,t/.38)),at={x:edge.x+dx*size*.22*reach,y:edge.y+dy*size*.22*reach};
|
||||
const swell=t<.38?1+.14*smoothMotion(t/.38):Math.max(0,1.14*(1-(t-.38)/.10));
|
||||
if(swell>0)drawTile(p,at.x,at.y,size,tile,angle,swell);
|
||||
const pop=(t-.36)/.30;
|
||||
if(pop>0&&pop<1){const r=size*(.5+.9*(1-Math.pow(1-pop,3))),ring=Array.from({length:36},(_,i)=>({x:at.x+Math.cos(i/36*Math.PI*2)*r,y:at.y+Math.sin(i/36*Math.PI*2)*r}));p.line([...ring,ring[0]],tint(base,.45)+alphaHex(.8*(1-pop)),Math.max(.6,size*.09*(1-pop)));}
|
||||
// Ten bubbles leave the popped face together: three large, the rest small, spread across the face and drifting
|
||||
// outward past the port, upward, with a slow wobble, so the cloud stays on screen long enough to read.
|
||||
for(let i=0;i<10;i++){
|
||||
const s1=(i*7919%97)/97,s2=(i*104729%89)/89,s3=(i*15485863%83)/83;
|
||||
const born=.34+.12*s1,life=.48+.18*s2,u=(t-born)/life;
|
||||
if(u<=0||u>=1)continue;
|
||||
const side=(s3-.5)*2.4,along=(s1-.5)*1.4,r0=size*(i<3?.22+.12*s2:.11+.12*s2);
|
||||
const drift=size*(.05+(.35+.5*s2)*(1-Math.pow(1-u,2))),wobble=Math.sin(u*Math.PI*1.5+s1*6.28)*size*.12;
|
||||
const bx=at.x+dx*(along*size*.35+drift)-dy*(side*size*.5+wobble),by=at.y+dy*(along*size*.35+drift)+dx*(side*size*.5+wobble)-size*.42*u;
|
||||
const grow=Math.min(1,u/.18),fade=u>.6?1-(u-.6)/.4:1,r=r0*grow*fade;
|
||||
if(r<=0)continue;
|
||||
p.circle(bx,by,r,tint(base,.28)+alphaHex(.92*fade));
|
||||
p.circle(bx-r*.32,by-r*.34,r*.28,'#FFFFFF'+alphaHex(.9*fade));
|
||||
}
|
||||
}
|
||||
|
||||
+2
-3
@@ -4,12 +4,11 @@ import { itemStudy } from './item-study.js';
|
||||
import { attachBoardViewport } from './board-viewport.js';
|
||||
import { createStudyLevel } from './study-levels.js';
|
||||
import { TapQueue } from './tap-queue.js';
|
||||
import { exitTiming } from './exit-animation.js';
|
||||
import { LEVEL_THEMES, PIGMENTS, MOTION, themeWithColors } from './design-tokens.js';
|
||||
import { LEVELS } from './levels.js';
|
||||
import { Game, available, solveRotations, trace } from './core.js';
|
||||
import { layout, hitCell } from './geometry.js';
|
||||
import { CanvasPainter, drawScene, drawTile } from './renderer.js';
|
||||
import { CanvasPainter, drawScene, drawTile, exitDuration } from './renderer.js';
|
||||
import { ICONS, ICON_SIZE, ICON_ATLAS } from './ui-skin.js';
|
||||
import { TILE_ATLAS } from './sprites.js';
|
||||
const taps=new TapQueue();
|
||||
@@ -74,7 +73,7 @@ function draw(now=performance.now()){
|
||||
function reset(){taps.clear();animation=null;rotation=null;afterRotation=null;hint=null;cancelAnimationFrame(frame);game=new Game(studyLevel);$('phone-status').textContent='点击棋子，沿轨道出发';$('motion-status').textContent='可反复播放，也可直接操作棋盘。';controls();draw();}
|
||||
function move(tile){if(animation||rotation){if(taps.add(tile.id,animation?.route.tile.id))draw();return;}hint=null;const route=game.tap(tile.id);if(!['exit','blocked','loop'].includes(route.status))return;
|
||||
if(route.status!=='exit')taps.clear();
|
||||
const base=route.status==='exit'?exitTiming(route).duration:MOTION.collisionMs;
|
||||
const base=route.status==='exit'?exitDuration(route,theme.artStyle):MOTION.collisionMs;
|
||||
animation={route,start:performance.now(),duration:reduced?150:base*($('slow').checked?2.5:1)};
|
||||
$('phone-status').textContent=route.status==='exit'?'沿着轨道，找到出口…':'接触后沿原路返回';$('motion-status').textContent=route.status==='exit'?'正在播放：滑行 → 出口收束 → 六角余韵':'正在展示碰撞反馈';controls();draw();
|
||||
}
|
||||
|
||||
+2
-2
@@ -1,9 +1,9 @@
|
||||
// Shared clean silhouette: sample color inside the PNG; never sample its noisy cutout edge.
|
||||
export function tileSample(f){return {x:Math.round(f.x+f.w*.4),y:Math.round(f.y+f.h*.4),w:Math.round(f.w*.2),h:Math.round(f.h*.2)};}
|
||||
export function roundedHex(x,y,r){
|
||||
export function roundedHex(x,y,r,rounding=.075){
|
||||
const vertices=Array.from({length:6},(_,i)=>({x:x+Math.cos(i*Math.PI/3)*r,y:y+Math.sin(i*Math.PI/3)*r})),out=[];
|
||||
for(let i=0;i<6;i++){
|
||||
const v=vertices[i],prev=vertices[(i+5)%6],next=vertices[(i+1)%6],a={x:v.x+(prev.x-v.x)*.075,y:v.y+(prev.y-v.y)*.075},b={x:v.x+(next.x-v.x)*.075,y:v.y+(next.y-v.y)*.075};
|
||||
const v=vertices[i],prev=vertices[(i+5)%6],next=vertices[(i+1)%6],a={x:v.x+(prev.x-v.x)*rounding,y:v.y+(prev.y-v.y)*rounding},b={x:v.x+(next.x-v.x)*rounding,y:v.y+(next.y-v.y)*rounding};
|
||||
for(let j=0;j<=6;j++){const t=j/6,u=1-t;out.push({x:u*u*a.x+2*u*t*v.x+t*t*b.x,y:u*u*a.y+2*u*t*v.y+t*t*b.y});}
|
||||
}
|
||||
return out;
|
||||
|
||||
@@ -4,6 +4,22 @@ export function tint(hex,amount){return '#'+hex.slice(1).match(/../g).map(v=>Mat
|
||||
export function drawStyledToken(p,x,y,r,tile,angle){
|
||||
const fill=tile.fill,ink='#263A3A';
|
||||
if(!fill||!tile.artStyle||tile.artStyle==='classic')return false;
|
||||
if(tile.artStyle==='macaron'){
|
||||
// Macaron: a flat gummy tile with a white sticker rim and one chunky white line arrow (a white mark on candy).
|
||||
const face=roundedHex(x,y,r,.16),white=tile.arrow||'#FFFFFF',w=Math.max(1.5,r*.20);
|
||||
p.polygon(face,fill);p.line([...face,face[0]],'#FFFFFF',Math.max(1,r*.10));
|
||||
const rot=pts=>pts.map(([u,v])=>({x:x+r*(u*Math.cos(angle)-v*Math.sin(angle)),y:y+r*(u*Math.sin(angle)+v*Math.cos(angle))}));
|
||||
p.line(rot([[-.34,0],[.30,0]]),white,w);p.line(rot([[.02,-.30],[.30,0],[.02,.30]]),white,w);
|
||||
return true;
|
||||
}
|
||||
if(tile.artStyle==='signpost'){
|
||||
// Signpost: inset face with a soft ink outline and one white wayfinding arrow for every pigment.
|
||||
const s=r/.90,face=roundedHex(x,y,r);
|
||||
p.polygon(face,fill);p.line([...face,face[0]],'#2E425661',Math.max(1.5,s*.05));
|
||||
const a=r*.66,shape=[[-.62,-.2],[.06,-.2],[.06,-.52],[.64,0],[.06,.52],[.06,.2],[-.62,.2]];
|
||||
p.polygon(shape.map(([u,v])=>({x:x+a*(u*Math.cos(angle)-v*Math.sin(angle)),y:y+a*(u*Math.sin(angle)+v*Math.cos(angle))})),tile.arrow||'#FFFFFF');
|
||||
return true;
|
||||
}
|
||||
if(tile.artStyle==='paper'){
|
||||
const face=hexPoints(x,y,r),unit=r/.88;
|
||||
p.polygon(face,fill);p.line([...face,face[0]],'#FFFFFFCC',unit*.035);
|
||||
|
||||
Reference in New Issue
Block a user