feat: hook of direct move

idea.md

@@ -87,7 +87,7 @@ dam4.png ---- 存档 59
 [] 优化资源分离，音乐放到 bgm 目录下
 [] 一次性道具拾取与清怪
 [] 重构数据统计
-[] 优化路径显示，瞬移可以闪一下再熄灭
+[x] 优化路径显示，瞬移可以闪一下再熄灭
 [] 勇士身上显示攻防血
 [] 优化地图拖动
 [] 楼层转换加入随机小贴士

src/core/main/game.ts

@@ -2,6 +2,12 @@ import { EmitableEvent, EventEmitter } from '../common/eventEmitter';
 
 export interface GameEvent extends EmitableEvent {
     reset: () => void;
+    moveDirectly: (
+        x: number,
+        y: number,
+        moveSteps: Array<{ direction: string; step: number }>,
+        ctx: CanvasRenderingContext2D
+    ) => void;
 }
 
 export const hook = new EventEmitter<GameEvent>();

src/core/main/setting.ts

@@ -4,7 +4,7 @@ import { transition } from '../../plugin/uiController';
 import { loading } from '../loader/load';
 import { hook } from './game';
 import { GameStorage } from './storage';
-import { triggerFullscreen } from '../../plugin/utils';
+import { nextFrame, triggerFullscreen } from '../../plugin/utils';
 
 type MotaSettingType = boolean | number | MotaSetting;
 
@@ -429,3 +429,56 @@ hook.on('reset', () => {
         'action.autoSkill': flags.autoSkill ?? true
     });
 });
+
+hook.on('moveDirectly', (x, y, moveSteps, ctx) => {
+    // 计算绘制区域的宽高，并尽可能小的创建route层
+    // var sx = core.bigmap.width * 32,
+    //     sy = core.bigmap.height * 32,
+    //     dx = 0,
+    //     dy = 0;
+    // moveStep.forEach(function (t) {
+    //     sx = Math.min(sx, t.x * 32);
+    //     dx = Math.max(dx, t.x * 32);
+    //     sy = Math.min(sy, t.y * 32);
+    //     dy = Math.max(dy, t.y * 32);
+    // });
+    // core.status.automaticRoute.offsetX = sx;
+    // core.status.automaticRoute.offsetY = sy;
+    // var ctx = core.createCanvas(
+    //     'route',
+    //     sx - core.bigmap.offsetX,
+    //     sy - core.bigmap.offsetY,
+    //     dx - sx + 32,
+    //     dy - sy + 32,
+    //     95
+    // );
+    ctx.clearRect(0, 0, 480, 480);
+    ctx.fillStyle = '#bfbfbf';
+    ctx.strokeStyle = '#bfbfbf';
+    ctx.lineWidth = 4;
+    const scan: { [key: string]: { [key: string]: number } } = {
+        up: { x: 0, y: -1 },
+        left: { x: -1, y: 0 },
+        down: { x: 0, y: 1 },
+        right: { x: 1, y: 0 }
+    };
+    for (let m = 0; m < moveSteps.length; m++) {
+        if (m == moveSteps.length - 1) {
+            ctx.fillRect(x * 32 + 10, y * 32 + 10, 12, 12);
+        } else {
+            ctx.beginPath();
+            const cx = x * 32 + 16,
+                cy = y * 32 + 16;
+            const currDir = moveSteps[m].direction,
+                nextDir = moveSteps[m + 1].direction;
+            ctx.moveTo(cx - scan[currDir].x * 11, cy - scan[currDir].y * 11);
+            ctx.lineTo(cx, cy);
+            ctx.lineTo(cx + scan[nextDir].x * 11, cy + scan[nextDir].y * 11);
+            ctx.stroke();
+            x += scan[currDir].x;
+            y += scan[currDir].y;
+        }
+    }
+    ctx.canvas.style.transition = 'all 1s linear';
+    nextFrame(() => (ctx.canvas.style.opacity = '0'));
+});