${game.level.tiles.length} 枚棋子全部离场 · 转动 ${game.rotations} 次
${game.mistakes===0?'零失误，漂亮的路线。':`还有 ${game.moves} 步余量，做得不错。`}${helpUsed?'
在提示的陪伴下完成':''}
${a.score}/100 · ${a.label}，六项结构分相加后取整。
${bars(a)}已计入沿途碰撞；最优解需要 ${a.rotations} 次旋转、${a.minimumMoves??'—'} 步。当前初始布局有 ${a.free} 枚棋子可以安全离场。
评分是结构估计，未经真人通关率校准。不可解与搜索未确定会单独标识，不作为高难度关卡。
`);} $('score-help').onclick=showScore;$('difficulty-button').onclick=showScore; -function showHelp(){showDialog(``+'① 点击箭头
棋子沿轨道出发，遇到弯道自动转向。
② 转动底盘
按左右按钮，或沿棋盘边缘拖动，每次旋转 60°。上层棋子位置和箭头不动，底下的轨道转到新位置，路线随之改变。
③ 小心碰撞
会检查棋子整段运动轨迹，包括弯道擦碰。棋子是有宽度的，不能穿过旁边的棋子；碰撞会让棋子退回原位。
④ 全部离场
点击棋子花 1 步，碰撞也扣步；左右旋转免费。动画期间可连续点击不同棋子，按顺序执行，碰撞后清空等待队列。撤销可以恢复棋盘、方向与步数。没有倒计时。
卡住了？提示既能找到安全棋子，也会告诉你什么时候该转盘。四种颜色只负责好看，不改变规则。
');} +function showHelp(){showDialog(``+'① 点击箭头
棋子沿轨道出发，遇到弯道自动转向。
② 转动底盘
按左右按钮，或沿棋盘边缘拖动，每次旋转 60°。上层棋子位置和箭头不动，底下的轨道转到新位置，路线随之改变。
③ 小心碰撞
会检查棋子整段运动轨迹，包括弯道擦碰。棋子是有宽度的，不能穿过旁边的棋子；碰撞会让棋子退回原位。
④ 全部离场
点击棋子花 1 步，碰撞也扣步；左右旋转免费。连续点击不同棋子即可立即出发，多枚离场动画同时播放。碰撞回退期间的点击暂存，碰撞后重新判断路线。撤销可以恢复棋盘、方向与步数。没有倒计时。
卡住了？提示既能找到安全棋子，也会告诉你什么时候该转盘。四种颜色只负责好看，不改变规则。
');} $('dialog-content').addEventListener('click',e=>{if(e.target.closest('#sound-toggle')){toggleSound();$('sound-toggle').textContent=`音效：${soundEnabled()?'开':'关'}`;}}); for(const b of document.querySelectorAll('.help-trigger'))b.onclick=showHelp; $('map-button').onclick=()=>{showDialog(`24 个旋转谜题 · 每关都已验证可以避开碰撞。
`);$('dialog-content').onclick=e=>{const b=e.target.closest('[data-pick]');if(b){$('info-dialog').close();startLevel(Number(b.dataset.pick));}};}; diff --git a/src/exit-animations.js b/src/exit-animations.js new file mode 100644 index 0000000..668497d --- /dev/null +++ b/src/exit-animations.js @@ -0,0 +1,11 @@ +// Successful moves update the model immediately; each visual keeps its own clock. +export class ExitAnimations { + constructor() { this.items = []; } + get active() { return this.items.length > 0; } + add(route, start, duration) { this.items.push({ route, start, duration }); } + frames(now) { + this.items = this.items.filter(item => now < item.start + item.duration); + return this.items.map(item => ({ route: item.route, progress: Math.max(0, (now - item.start) / item.duration) })); + } + clear() { this.items.length = 0; } +} diff --git a/src/renderer.js b/src/renderer.js index 96a7df8..1bd17a2 100644 --- a/src/renderer.js +++ b/src/renderer.js @@ -77,6 +77,10 @@ export function drawScene(p,level,tiles,view,state={}) { } drawTile(p,c.x+dx,c.y+dy,size,tile); } + for(const {route,progress} of state.exits||[]) { + const loc=pointAlong(routePoints(route,view,true),progress); + drawTile(p,loc.x,loc.y,size,route.tile,loc.angle,progress>.9?Math.max(.2,(1-progress)/.1):1); + } if(state.animation) { const {route,progress}=state.animation; const blocked=route.status!=='exit'; diff --git a/tests/exit-animations.test.js b/tests/exit-animations.test.js new file mode 100644 index 0000000..8892f55 --- /dev/null +++ b/tests/exit-animations.test.js @@ -0,0 +1,32 @@ +import test from 'node:test'; +import assert from 'node:assert/strict'; +import { ExitAnimations } from '../src/exit-animations.js'; +import { Game, available } from '../src/core.js'; +import { LEVELS } from '../src/levels.js'; +import { layout } from '../src/geometry.js'; +import { drawScene } from '../src/renderer.js'; + +test('rapid successful taps update immediately and render overlapping independent animations', () => { + const game = new Game(LEVELS[0]), exits = new ExitAnimations(); + const tiles = available(game.level, game.tiles).slice(0, 2); + assert.equal(tiles.length, 2); + const before = game.moves; + exits.add(game.tap(tiles[0].id), 0, 1000); + exits.add(game.tap(tiles[1].id), 100, 1000); + assert.equal(game.moves, before - 2); + assert.equal(game.tap(tiles[0].id).status, 'missing'); + const frames = exits.frames(200); + assert.deepEqual(frames.map(f => f.progress), [.2, .1]); + let sprites = 0; + const painter = { polygon(){}, line(){}, circle(){}, sprite(){sprites++;return true;} }; + drawScene(painter, game.level, game.tiles, layout(game.level.cells, 390, 390), {exits:frames}); + assert.equal(sprites, game.tiles.length + 2); + assert.equal(exits.frames(1000).length, 1); + assert.equal(exits.frames(1100).length, 0); + assert.equal(exits.active, false); + assert.ok(game.undo());assert.equal(game.moves, before - 1); +}); +test('restart clears in-flight visuals', () => { + const exits = new ExitAnimations();exits.add({}, 0, 1000);exits.clear(); + assert.deepEqual(exits.frames(100), []); +});