Remove route canvas

docs/personalization.md

@@ -8,7 +8,7 @@
 
 HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们之间有一个覆盖关系，后面的图层将覆盖前面的图层。
 
-所有图层从低往高依次如下：（加[B]的代表该层是大地图，z-index代表该层的纵向高度）
+所有图层从低往高依次如下：（加[B]的代表该层是大地图，[D]代表由系统按需动态创建，z-index代表该层的纵向高度）
 
 - bg**[B]**：背景层；绘制背景图层素材bgmap，和背景贴图 (z-index: 10)
 - event**[B]**：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理 (z-index: 30)
@@ -17,8 +17,9 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
 - fg**[B]**：前景层；绘制前景图层素材fgmap，和前景贴图 (z-index: 60)
 - damage**[B]**：显伤层；主要用来绘制怪物显伤和领域显伤 (z-index: 65)
 - animate：动画层；主要用来绘制动画。 (z-index: 70)
-- weather：天气层；主要用来绘制天气（雨/雪/雾） (z-index: 80)
+- weather**[D]**：天气层；主要用来绘制天气（雨/雪/雾） (z-index: 80)
-- route**[B]**：路线层；主要用来绘制勇士的行走路线图。 (z-index: 95)
+- route**[D]**：路线层；主要用来绘制勇士的行走路线图。 (z-index: 95)
+- paint**[D]**：绘图层；主要用来进行绘图模式。（z-index: 95)
 - curtain：色调层；用来控制当前楼层的画面色调 (z-index: 100)
 - ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等 (z-index: 160)
 - data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。 (z-index: 170)

editor-mobile.html

@@ -440,7 +440,6 @@
         <!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
         <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
-        <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>

editor.html

@@ -425,7 +425,6 @@
         <!-- <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> -->
         <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
-        <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>

index.html

@@ -140,7 +140,6 @@
         <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
-        <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='curtain' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
         <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>

libs/actions.js

@@ -341,7 +341,7 @@ actions.prototype.ondown = function (loc) {
     }
 
     core.status.downTime = new Date();
-    core.clearMap('route');
+    core.deleteCanvas('route');
     var pos={'x':x,'y':y}
     core.status.stepPostfix=[];
     core.status.stepPostfix.push(pos);
@@ -409,8 +409,7 @@ actions.prototype.onup = function () {
         var posy=core.status.stepPostfix[0].y;
         core.status.stepPostfix=[];
         if (!core.status.lockControl) {
-            core.clearMap('route');
+            core.clearMap('ui');
-            core.canvas.route.restore();
         }
 
         // 长按
@@ -2612,8 +2611,8 @@ actions.prototype.ondownPaint = function (x, y) {
     x+=core.bigmap.offsetX;
     y+=core.bigmap.offsetY;
     if (!core.status.event.data.erase) {
-        core.canvas.route.beginPath();
+        core.dymCanvas.paint.beginPath();
-        core.canvas.route.moveTo(x, y);
+        core.dymCanvas.paint.moveTo(x, y);
     }
     core.status.event.data.x = x;
     core.status.event.data.y = y;
@@ -2624,12 +2623,12 @@ actions.prototype.onmovePaint = function (x, y) {
     x+=core.bigmap.offsetX;
     y+=core.bigmap.offsetY;
     if (core.status.event.data.erase) {
-        core.clearMap('route', x-10, y-10, 20, 20);
+        core.clearMap('paint', x-10, y-10, 20, 20);
         return;
     }
     var midx = (core.status.event.data.x+x)/2, midy = (core.status.event.data.y+y)/2;
-    core.canvas.route.quadraticCurveTo(midx, midy, x, y);
+    core.dymCanvas.paint.quadraticCurveTo(midx, midy, x, y);
-    core.canvas.route.stroke();
+    core.dymCanvas.paint.stroke();
     core.status.event.data.x = x;
     core.status.event.data.y = y;
 }
@@ -2638,7 +2637,7 @@ actions.prototype.onupPaint = function () {
     core.status.event.data.x = null;
     core.status.event.data.y = null;
     // 保存
-    core.paint[core.status.floorId] = LZString.compress(core.utils.encodeCanvas(core.canvas.route).join(","));
+    core.paint[core.status.floorId] = LZString.compress(core.utils.encodeCanvas(core.dymCanvas.paint).join(","));
 }
 
 actions.prototype.setPaintMode = function (mode) {
@@ -2650,8 +2649,8 @@ actions.prototype.setPaintMode = function (mode) {
 }
 
 actions.prototype.clearPaint = function () {
-    core.clearMap('route');
+    core.clearMap('paint');
-    core.paint[core.status.floorId] = null;
+    delete core.paint[core.status.floorId];
     core.drawTip("已清空绘图内容");
 }
 
@@ -2683,18 +2682,18 @@ actions.prototype.loadPaint = function () {
                 core.paint[floorId] = LZString.compress(obj.paint[floorId]);
         }
 
-        core.clearMap('route');
+        core.clearMap('paint');
         var value = core.paint[core.status.floorId];
         if (core.isset(value)) value = LZString.decompress(value).split(",");
         core.utils.decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height);
-        core.canvas.route.drawImage(core.bigmap.tempCanvas.canvas, 0, 0);
+        core.canvas.paint.drawImage(core.bigmap.tempCanvas.canvas, 0, 0);
 
         core.drawTip("读取绘图文件成功");
     })
 }
 
 actions.prototype.exitPaint = function () {
-    core.clearMap('route');
+    core.deleteCanvas('paint');
     core.ui.closePanel();
     core.statusBar.image.shop.style.opacity = 1;
     core.updateStatusBar();

libs/control.js

@@ -46,13 +46,6 @@ control.prototype.setRequestAnimationFrame = function () {
 
     core.animateFrame.speed = core.values.animateSpeed;
 
-    var scan = {
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
-
     var draw = function(timestamp) {
 
         core.animateFrame.globalTime = core.animateFrame.globalTime||timestamp;
@@ -447,7 +440,7 @@ control.prototype.restart = function(noAnimate) {
 ////// 清除自动寻路路线 //////
 control.prototype.clearAutomaticRouteNode = function (x, y) {
     if (core.status.event.id==null)
-        core.canvas.route.clearRect(x * 32 + 5, y * 32 + 5, 27, 27);
+        core.clearMap('route', x * 32 + 5 - core.status.automaticRoute.offsetX, y * 32 + 5 - core.status.automaticRoute.offsetY, 27, 27);
 }
 
 ////// 停止自动寻路操作 //////
@@ -465,7 +458,7 @@ control.prototype.stopAutomaticRoute = function () {
     core.status.automaticRoute.lastDirection = null;
     core.stopHero();
     if (core.status.automaticRoute.moveStepBeforeStop.length==0)
-        core.clearMap('route');
+        core.deleteCanvas('route');
 }
 
 ////// 继续剩下的自动寻路操作 //////
@@ -483,7 +476,7 @@ control.prototype.continueAutomaticRoute = function () {
 
 ////// 清空剩下的自动寻路列表 //////
 control.prototype.clearContinueAutomaticRoute = function () {
-    core.clearMap('route');
+    core.deleteCanvas('route');
     core.status.automaticRoute.moveStepBeforeStop=[];
 }
 
@@ -567,93 +560,59 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) {
             return;
     }
 
-    var step = 0;
+    var moveStep = core.automaticRoute(destX, destY).concat(stepPostfix);
-    var tempStep = null;
+    if (moveStep.length == 0) {
-    var moveStep;
+        core.deleteCanvas('route');
-    if (!(moveStep = core.automaticRoute(destX, destY))) {
+        return;
-        if (destX == core.status.hero.loc.x && destY == core.status.hero.loc.y){
-            moveStep=[];
-        } else {
-            core.clearMap('route');
-            return;
-        }
     }
-    moveStep=moveStep.concat(stepPostfix);
+
     core.status.automaticRoute.destX=destX;
     core.status.automaticRoute.destY=destY;
-    core.canvas.route.save();
+
-    core.clearMap('route');
+    // 计算绘制区域的宽高
-    core.canvas.route.fillStyle = '#bfbfbf';
+    var sx = core.bigmap.width * 32, sy = core.bigmap.height * 32, dx = 0, dy = 0;
-    core.canvas.route.strokeStyle = '#bfbfbf';
+    moveStep.forEach(function (t) {
-    core.canvas.route.lineWidth = 8;
+        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.createCanvas('route', sx-core.bigmap.offsetX, sy-core.bigmap.offsetY, dx-sx+32, dy-sy+32, 95);
+    core.status.automaticRoute.offsetX = sx;
+    core.status.automaticRoute.offsetY = sy;
+    var ctx = core.dymCanvas['route'];
+    ctx.fillStyle = '#bfbfbf';
+    ctx.strokeStyle = '#bfbfbf';
+    ctx.lineWidth = 8;
     for (var m = 0; m < moveStep.length; m++) {
-        if (tempStep == null) {
-            step++;
-            tempStep = moveStep[m].direction;
-        }
-        else if (tempStep == moveStep[m].direction) {
-            step++;
-        }
-        else {
-            //core.status.automaticRoutingTemp.moveStep.push({'direction': tempStep, 'step': step});
-            core.status.automaticRoute.autoStepRoutes.push({'direction': tempStep, 'step': step});
-            step = 1;
-            tempStep = moveStep[m].direction;
-        }
         if (m == moveStep.length - 1) {
-            // core.status.automaticRoutingTemp.moveStep.push({'direction': tempStep, 'step': step});
+            ctx.fillRect(moveStep[m].x * 32 + 10 - sx, moveStep[m].y * 32 + 10 - sy, 12, 12);
-            core.status.automaticRoute.autoStepRoutes.push({'direction': tempStep, 'step': step});
-            core.canvas.route.fillRect(moveStep[m].x * 32 + 10, moveStep[m].y * 32 + 10, 12, 12);
         }
         else {
-            core.canvas.route.beginPath();
+            ctx.beginPath();
-            if (core.isset(moveStep[m + 1]) && tempStep != moveStep[m + 1].direction) {
+            var cx = moveStep[m].x*32 +16 - sx, cy = moveStep[m].y*32+16 - sy;
-                if (tempStep == 'up' && moveStep[m + 1].direction == 'left' || tempStep == 'right' && moveStep[m + 1].direction == 'down') {
+            var currDir = moveStep[m].direction, nextDir = moveStep[m+1].direction;
-                    core.canvas.route.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
+            ctx.moveTo(cx-core.utils.scan[currDir].x*11, cy-core.utils.scan[currDir].y*11);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
+            ctx.lineTo(cx, cy);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
+            ctx.lineTo(cx+core.utils.scan[nextDir].x*11, cy+core.utils.scan[nextDir].y*11);
-                }
+            ctx.stroke();
-                else if (tempStep == 'up' && moveStep[m + 1].direction == 'right' || tempStep == 'left' && moveStep[m + 1].direction == 'down') {
-                    core.canvas.route.moveTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
-                }
-                else if (tempStep == 'left' && moveStep[m + 1].direction == 'up' || tempStep == 'down' && moveStep[m + 1].direction == 'right') {
-                    core.canvas.route.moveTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
-                }
-                else if (tempStep == 'right' && moveStep[m + 1].direction == 'up' || tempStep == 'down' && moveStep[m + 1].direction == 'left') {
-                    core.canvas.route.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
-                }
-                core.canvas.route.stroke();
-                continue;
-            }
-            switch (tempStep) {
-                case 'up':
-                case 'down':
-                    core.canvas.route.beginPath();
-                    core.canvas.route.moveTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
-                    core.canvas.route.stroke();
-                    break;
-                case 'left':
-                case 'right':
-                    core.canvas.route.beginPath();
-                    core.canvas.route.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16);
-                    core.canvas.route.lineTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
-                    core.canvas.route.stroke();
-                    break;
-            }
         }
     }
-    core.canvas.route.restore();
+
+    // 路线转autoStepRoutes
+    var step = 0, currStep = null;
+    moveStep.forEach(function (t) {
+        var dir = t.direction;
+        if (currStep == null || currStep == dir) {
+            step++; currStep = dir;
+        }
+        else {
+            core.status.automaticRoute.autoStepRoutes.push({'direction': currStep, 'step': step});
+            step = 1; currStep = dir;
+        }
+    });
+    core.status.automaticRoute.autoStepRoutes.push({'direction': currStep, 'step': step});
 
     // 立刻移动
     core.setAutoHeroMove();
-
 }
 
 ////// 自动寻路算法，找寻最优路径 //////
@@ -661,13 +620,7 @@ control.prototype.automaticRoute = function (destX, destY) {
     var fw = core.bigmap.width, fh = core.bigmap.height;
     var startX = core.getHeroLoc('x');
     var startY = core.getHeroLoc('y');
-    var scan = {
+    if (destX == startX && destY == startY) return [];
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
-    if (destX == startX && destY == startY) return false;
 
     var route = [];
     var queue = new PriorityQueue({comparator: function (a,b) {
@@ -681,12 +634,12 @@ control.prototype.automaticRoute = function (destX, destY) {
         var curr = queue.dequeue();
         var deep = curr.depth, nowX = curr.x, nowY = curr.y;
 
-        for (var direction in scan) {
+        for (var direction in core.utils.scan) {
             if (!core.canMoveHero(nowX, nowY, direction))
                 continue;
 
-            var nx = nowX + scan[direction].x;
+            var nx = nowX + core.utils.scan[direction].x;
-            var ny = nowY + scan[direction].y;
+            var ny = nowY + core.utils.scan[direction].y;
             if (nx<0 || nx>=fw || ny<0 || ny>=fh) continue;
 
             var nid = nx + fw * ny;
@@ -721,15 +674,15 @@ control.prototype.automaticRoute = function (destX, destY) {
         if (core.isset(route[destX + fw * destY])) break;
     }
     if (!core.isset(route[destX + fw * destY])) {
-        return false;
+        return [];
     }
 
     var nowX = destX, nowY = destY;
     while (nowX != startX || nowY != startY) {
         var dir = route[nowX + fw * nowY];
         ans.push({'direction': dir, 'x': nowX, 'y': nowY});
-        nowX -= scan[dir].x;
+        nowX -= core.utils.scan[dir].x;
-        nowY -= scan[dir].y;
+        nowY -= core.utils.scan[dir].y;
     }
 
     ans.reverse();
@@ -738,7 +691,7 @@ control.prototype.automaticRoute = function (destX, destY) {
 
 ////// 显示离散的寻路点 //////
 control.prototype.fillPosWithPoint = function (pos) {
-    core.fillRect('route', pos.x*32+12+core.bigmap.offsetX,pos.y*32+12+core.bigmap.offsetY,8,8, '#bfbfbf');
+    core.fillRect('ui', pos.x*32+12,pos.y*32+12,8,8, '#bfbfbf');
 }
 
 ////// 设置勇士的自动行走路线 //////
@@ -760,12 +713,6 @@ control.prototype.setHeroMoveInterval = function (direction, x, y, callback) {
         return;
     }
     core.status.heroMoving=1;
-    var scan = {
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
 
     var toAdd = 1;
     if (core.status.replay.speed>3)
@@ -778,8 +725,8 @@ control.prototype.setHeroMoveInterval = function (direction, x, y, callback) {
     core.interval.heroMoveInterval = window.setInterval(function () {
         core.status.heroMoving+=toAdd;
         if (core.status.heroMoving>=8) {
-            core.setHeroLoc('x', x+scan[direction].x, true);
+            core.setHeroLoc('x', x+core.utils.scan[direction].x, true);
-            core.setHeroLoc('y', y+scan[direction].y, true);
+            core.setHeroLoc('y', y+core.utils.scan[direction].y, true);
             core.control.updateFollowers();
             core.moveOneStep();
             core.clearMap('hero');
@@ -795,23 +742,17 @@ control.prototype.setHeroMoveInterval = function (direction, x, y, callback) {
 control.prototype.moveAction = function (callback) {
     if (core.interval.openDoorAnimate!=null) return; // 开门判断
     if (core.status.heroMoving>0) return;
-    var scan = {
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
     var direction = core.getHeroLoc('direction');
     var x = core.getHeroLoc('x');
     var y = core.getHeroLoc('y');
-    var noPass = core.noPass(x + scan[direction].x, y + scan[direction].y), canMove = core.canMoveHero();
+    var noPass = core.noPass(x + core.utils.scan[direction].x, y + core.utils.scan[direction].y), canMove = core.canMoveHero();
     if (noPass || !canMove) {
         if (core.status.event.id!='ski')
             core.status.route.push(direction);
         core.status.automaticRoute.moveStepBeforeStop = [];
         core.status.automaticRoute.lastDirection = core.getHeroLoc('direction');
         if (canMove) // 非箭头：触发
-            core.trigger(x + scan[direction].x, y + scan[direction].y);
+            core.trigger(x + core.utils.scan[direction].x, y + core.utils.scan[direction].y);
         core.drawHero(direction, x, y);
 
         if (core.status.automaticRoute.moveStepBeforeStop.length==0) {
@@ -867,7 +808,6 @@ control.prototype.turnHero = function(direction) {
     if (core.isset(direction)) {
         core.setHeroLoc('direction', direction);
         core.drawHero();
-        core.clearMap('route');
         core.status.route.push("turn:"+direction);
         return;
     }
@@ -876,7 +816,6 @@ control.prototype.turnHero = function(direction) {
     else if (core.status.hero.loc.direction == 'down') core.status.hero.loc.direction = 'left';
     else if (core.status.hero.loc.direction == 'left') core.status.hero.loc.direction = 'up';
     core.drawHero();
-    core.clearMap('route');
     core.status.route.push("turn");
 }
 
@@ -895,14 +834,8 @@ control.prototype.moveHero = function (direction, callback) {
                 if (core.hasFlag('debug') && core.status.ctrlDown) {
                     if (core.status.heroMoving!=0) return;
                     // 检测是否穿出去
-                    var scan = {
-                        'up': {'x': 0, 'y': -1},
-                        'left': {'x': -1, 'y': 0},
-                        'down': {'x': 0, 'y': 1},
-                        'right': {'x': 1, 'y': 0}
-                    };
                     direction = core.getHeroLoc('direction');
-                    var nx = core.getHeroLoc('x') + scan[direction].x, ny=core.getHeroLoc('y') + scan[direction].y;
+                    var nx = core.getHeroLoc('x') + core.utils.scan[direction].x, ny=core.getHeroLoc('y') + core.utils.scan[direction].y;
                     if (nx<0 || nx>=core.bigmap.width || ny<0 || ny>=core.bigmap.height) return;
 
                     core.status.heroMoving=-1;
@@ -952,12 +885,6 @@ control.prototype.eventMoveHero = function(steps, time, callback) {
     });
 
     var step=0;
-    var scan = {
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
 
     var animate=window.setInterval(function() {
         var x=core.getHeroLoc('x'), y=core.getHeroLoc('y');
@@ -979,8 +906,8 @@ control.prototype.eventMoveHero = function(steps, time, callback) {
             }
             if (step == 8) {
                 step = 0;
-                core.setHeroLoc('x', x + scan[direction].x, true);
+                core.setHeroLoc('x', x + core.utils.scan[direction].x, true);
-                core.setHeroLoc('y', y + scan[direction].y, true);
+                core.setHeroLoc('y', y + core.utils.scan[direction].y, true);
                 core.control.updateFollowers();
                 moveSteps.shift();
             }
@@ -1106,6 +1033,8 @@ control.prototype.updateViewport = function() {
     core.bigmap.canvas.forEach(function(cn){
         core.control.setGameCanvasTranslate(cn,-core.bigmap.offsetX,-core.bigmap.offsetY);
     });
+    // ------ 路线
+    core.relocateCanvas('route', core.status.automaticRoute.offsetX - core.bigmap.offsetX, core.status.automaticRoute.offsetY - core.bigmap.offsetY);
 }
 
 ////// 绘制勇士 //////
@@ -1113,19 +1042,12 @@ control.prototype.drawHero = function (direction, x, y, status, offset) {
 
     if (!core.isPlaying()) return;
 
-    var scan = {
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
-
     if (!core.isset(x)) x = core.getHeroLoc('x');
     if (!core.isset(y)) y = core.getHeroLoc('y');
     status = status || 'stop';
     direction = direction || core.getHeroLoc('direction');
     offset = offset || 0;
-    var way = scan[direction];
+    var way = core.utils.scan[direction];
     var offsetX = way.x*offset;
     var offsetY = way.y*offset;
     var dx=offsetX==0?0:offsetX/Math.abs(offsetX), dy=offsetY==0?0:offsetY/Math.abs(offsetY);
@@ -1160,8 +1082,8 @@ control.prototype.drawHero = function (direction, x, y, status, offset) {
                     "img": core.material.images.images[t.img],
                     "height": core.material.images.images[t.img].height/4,
                     "heroIcon": heroIconArr[t.direction],
-                    "posx": 32*t.x - core.bigmap.offsetX + (t.stop?0:scan[t.direction].x*offset),
+                    "posx": 32*t.x - core.bigmap.offsetX + (t.stop?0:core.utils.scan[t.direction].x*offset),
-                    "posy": 32*t.y - core.bigmap.offsetY + (t.stop?0:scan[t.direction].y*offset),
+                    "posy": 32*t.y - core.bigmap.offsetY + (t.stop?0:core.utils.scan[t.direction].y*offset),
                     "status": t.stop?"stop":status,
                     "index": index++
                 });
@@ -1198,24 +1120,12 @@ control.prototype.getHeroLoc = function (itemName) {
 
 ////// 获得勇士面对位置的x坐标 //////
 control.prototype.nextX = function(n) {
-    var scan = {
+    return core.getHeroLoc('x')+core.utils.scan[core.getHeroLoc('direction')].x*(n||1);
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
-    return core.getHeroLoc('x')+scan[core.getHeroLoc('direction')].x*(n||1);
 }
 
 ////// 获得勇士面对位置的y坐标 //////
 control.prototype.nextY = function (n) {
-    var scan = {
+    return core.getHeroLoc('y')+core.utils.scan[core.getHeroLoc('direction')].y*(n||1);
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
-    return core.getHeroLoc('y')+scan[core.getHeroLoc('direction')].y*(n||1);
 }
 
 ////// 聚集跟随者 //////
@@ -1233,16 +1143,10 @@ control.prototype.gatherFollowers = function () {
 ////// 更新跟随者坐标 //////
 control.prototype.updateFollowers = function () {
     if (!core.isset(core.status.hero.followers) || core.status.hero.followers.length==0) return;
-    var scan = {
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
     core.status.hero.followers.forEach(function (t) {
         if (!t.stop) {
-            t.x += scan[t.direction].x;
+            t.x += core.utils.scan[t.direction].x;
-            t.y += scan[t.direction].y;
+            t.y += core.utils.scan[t.direction].y;
         }
     })
 
@@ -1289,14 +1193,8 @@ control.prototype.checkBlock = function () {
         // 检查阻击事件
         var snipe = [];
         if (!core.hasFlag("no_snipe")) {
-            var scan = {
+            for (var direction in core.utils.scan) {
-                'up': {'x': 0, 'y': -1},
+                var nx = x+core.utils.scan[direction].x, ny=y+core.utils.scan[direction].y;
-                'left': {'x': -1, 'y': 0},
-                'down': {'x': 0, 'y': 1},
-                'right': {'x': 1, 'y': 0}
-            }
-            for (var direction in scan) {
-                var nx = x+scan[direction].x, ny=y+scan[direction].y;
                 if (nx<0 || nx>=core.bigmap.width || ny<0 || ny>=core.bigmap.height) continue;
                 var id=core.status.checkBlock.map[nx+core.bigmap.width*ny];
                 if (core.isset(id)) {
@@ -1344,7 +1242,7 @@ control.prototype.checkBlock = function () {
         }
         snipe = snipe.filter(function (t) {
             var x=t.x, y=t.y, direction = t.direction;
-            var nx = x+scan[direction].x, ny=y+scan[direction].y;
+            var nx = x+core.utils.scan[direction].x, ny=y+core.utils.scan[direction].y;
 
             return nx>=0 && nx<core.bigmap.width && ny>=0 && ny<core.bigmap.height && core.getBlock(nx, ny, null, true)==null;
         });
@@ -1985,9 +1883,9 @@ control.prototype.replay = function () {
         var x=parseInt(pos[0]), y=parseInt(pos[1]);
         var nowx=core.getHeroLoc('x'), nowy=core.getHeroLoc('y');
         if (core.control.moveDirectly(x,y)) {
-            core.ui.drawArrow('route', 32*nowx+16, 32*nowy+16, 32*x+16, 32*y+16, '#FF0000', 3);
+            core.ui.drawArrow('ui', 32*nowx+16-core.bigmap.offsetX, 32*nowy+16-core.bigmap.offsetY, 32*x+16-core.bigmap.offsetX, 32*y+16-core.bigmap.offsetY, '#FF0000', 3);
             setTimeout(function () {
-                core.clearMap('route');
+                core.clearMap('ui');
                 core.replay();
             }, 750 / Math.max(1, core.status.replay.speed));
             return;

libs/core.js

@@ -86,7 +86,7 @@ function core() {
         showStatusBar: true,
     }
     this.bigmap = {
-        canvas: ["bg", "event", "event2", "fg", "damage", "route"],
+        canvas: ["bg", "event", "event2", "fg", "damage"],
         offsetX: 0, // in pixel
         offsetY: 0,
         width: 13, // map width and height
@@ -123,6 +123,8 @@ function core() {
             'destStep': 0,
             'destX': null,
             'destY': null,
+            'offsetX': null,
+            'offsetY': null,
             'autoStepRoutes': [],
             'moveStepBeforeStop': [],
             'lastDirection': null,

libs/events.js

@@ -2003,14 +2003,7 @@ events.prototype.pushBox = function (data) {
     if (data.event.id!='box' && data.event.id!='boxed') return;
 
     // 判断还能否前进，看看是否存在事件
-    var scan = {
+    var direction = core.getHeroLoc('direction'), nx=data.x+core.utils.scan[direction].x, ny=data.y+core.utils.scan[direction].y;
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
-
-    var direction = core.getHeroLoc('direction'), nx=data.x+scan[direction].x, ny=data.y+scan[direction].y;
 
     if (nx<0||nx>=core.bigmap.width||ny<0||ny>=core.bigmap.height) return;
 

libs/maps.js

@@ -296,13 +296,7 @@ maps.prototype.canMoveHero = function(x,y,direction,floorId) {
     if (!check(core.getBlock(x,y,floorId),"cannotOut") || !check(getNumber(floorId,"bg",x,y),"cannotOut") || !check(getNumber(floorId,"fg",x,y),"cannotOut"))
         return false;
 
-    var scan = {
+    var nx = x+core.utils.scan[direction].x, ny = y+core.utils.scan[direction].y;
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
-    var nx = x+scan[direction].x, ny = y+scan[direction].y;
     // 检查目标点的cannotIn
     if (!check(core.getBlock(nx,ny,floorId),"cannotIn") || !check(getNumber(floorId,"bg",nx,ny),"cannotIn") || !check(getNumber(floorId,"fg",nx,ny),"cannotIn"))
         return false;
@@ -895,12 +889,6 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
     });
 
     var nowX=32*x, nowY=32*y, step=0;
-    var scan = {
-        'up': {'x': 0, 'y': -1},
-        'left': {'x': -1, 'y': 0},
-        'down': {'x': 0, 'y': 1},
-        'right': {'x': 1, 'y': 0}
-    };
 
     var animateValue = block.event.animate || 1, animateCurrent = isTileset?bx:0, animateTime = 0;
     var blockCanvas = this.__initBlockCanvas(block, height, x, y);
@@ -953,8 +941,8 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
                 }
             }
             step++;
-            nowX+=scan[direction].x*2;
+            nowX+=core.utils.scan[direction].x*2;
-            nowY+=scan[direction].y*2;
+            nowY+=core.utils.scan[direction].y*2;
             // 移动
             core.maps.__moveBlockCanvas(image, animateCurrent, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas);
             if (step==16) {

libs/ui.js

@@ -2718,18 +2718,16 @@ ui.prototype.drawPaint = function () {
             core.status.event.data = {"x": null, "y": null, "erase": false};
 
             core.clearLastEvent();
-            core.clearMap('route');
+            core.createCanvas('paint', -core.bigmap.offsetX, -core.bigmap.offsetY, 32*core.bigmap.width, 32*core.bigmap.height, 95);
-
-            core.setAlpha('route', 1);
 
             // 将已有的内容绘制到route上
             var value = core.paint[core.status.floorId];
             if (core.isset(value)) value = LZString.decompress(value).split(",");
             core.utils.decodeCanvas(value, 32*core.bigmap.width, 32*core.bigmap.height);
-            core.canvas.route.drawImage(core.bigmap.tempCanvas.canvas, 0, 0);
+            core.dymCanvas.paint.drawImage(core.bigmap.tempCanvas.canvas, 0, 0);
 
-            core.setLineWidth('route', 3);
+            core.setLineWidth('paint', 3);
-            core.setStrokeStyle('route', '#FF0000');
+            core.setStrokeStyle('paint', '#FF0000');
 
             core.statusBar.image.shop.style.opacity = 0;
 

libs/utils.js

@@ -7,6 +7,12 @@ utils.js 工具类
 
 function utils() {
     this.init();
+    this.scan = {
+        'up': {'x': 0, 'y': -1},
+        'left': {'x': -1, 'y': 0},
+        'down': {'x': 0, 'y': 1},
+        'right': {'x': 1, 'y': 0}
+    };
 }
 
 utils.prototype.init = function () {

styles.css

@@ -286,14 +286,6 @@ p#name {
     z-index: 70;
 }
 
-#weather {
-    z-index: 80;
-}
-
-#route {
-    z-index: 95;
-}
-
 #curtain {
     z-index: 100;
 }