From 7551dd3c7277c6ec7c5e4cd75c51a8981e709473 Mon Sep 17 00:00:00 2001 From: oc Date: Fri, 24 Aug 2018 22:45:35 +0800 Subject: [PATCH] Automatic Route --- _server/editor.js | 4 +-- docs/personalization.md | 1 + index.html | 1 + libs/actions.js | 6 ++-- libs/control.js | 72 ++++++++++++++++++++--------------------- libs/core.js | 4 +-- styles.css | 4 +++ 7 files changed, 49 insertions(+), 43 deletions(-) diff --git a/_server/editor.js b/_server/editor.js index 536e0df5..f5c7d0e1 100644 --- a/_server/editor.js +++ b/_server/editor.js @@ -159,8 +159,8 @@ editor.prototype.drawInitData = function (icons) { } editor.prototype.mapInit = function () { var ec = document.getElementById('event').getContext('2d'); - ec.clearRect(0, 0, 416, 416); - document.getElementById('event2').getContext('2d').clearRect(0, 0, 416, 416); + ec.clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32); + document.getElementById('event2').getContext('2d').clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32); editor.map = []; for (var y = 0; y < 13; y++) { editor.map[y] = []; diff --git a/docs/personalization.md b/docs/personalization.md index 47a807b6..0c2a6075 100644 --- a/docs/personalization.md +++ b/docs/personalization.md @@ -18,6 +18,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们 - animate：动画层；主要用来绘制动画，图块的淡入/淡出效果，图块的移动。showImage事件绘制的图片也是在这一层。 - weather：天气层；主要用来绘制天气（雨/雪） - curtain：色调层；用来控制当前楼层的画面色调 +- route：路线层；主要用来绘制勇士的行走路线图 - ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等 - data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。 diff --git a/index.html b/index.html index 95aff62d..b2a606db 100644 --- a/index.html +++ b/index.html @@ -114,6 +114,7 @@ + 此浏览器不支持HTML5 diff --git a/libs/actions.js b/libs/actions.js index d7303b2e..80e802f0 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -429,7 +429,7 @@ actions.prototype.ondown = function (x ,y) { } core.status.downTime = new Date(); - core.clearMap('ui'); + core.clearMap('route'); var pos={'x':x,'y':y} core.status.stepPostfix=[]; core.status.stepPostfix.push(pos); @@ -482,8 +482,8 @@ actions.prototype.onup = function () { var posy=core.status.stepPostfix[0].y; core.status.stepPostfix=[]; if (!core.status.lockControl) { - core.canvas.ui.clearRect(0, 0, 416,416); - core.canvas.ui.restore(); + core.clearMap('route'); + core.canvas.route.restore(); } // 长按 diff --git a/libs/control.js b/libs/control.js index c65ac8c1..4fa4cfe2 100644 --- a/libs/control.js +++ b/libs/control.js @@ -286,7 +286,7 @@ control.prototype.resetStatus = function(hero, hard, floorId, route, maps, value // 保存的Index core.status.saveIndex = core.getLocalStorage('saveIndex2', 1); - core.status.automaticRoute.clickMoveDirectly = core.getLocalStorage('clickMoveDirectly', true); + core.status.automaticRoute.clickMoveDirectly = core.getLocalStorage('clickMoveDirectly', false); if (core.isset(values)) core.values = core.clone(values); @@ -334,7 +334,7 @@ control.prototype.restart = function() { ////// 清除自动寻路路线 ////// control.prototype.clearAutomaticRouteNode = function (x, y) { if (core.status.event.id==null) - core.canvas.ui.clearRect(x * 32 + 5, y * 32 + 5, 27, 27); + core.canvas.route.clearRect(x * 32 + 5, y * 32 + 5, 27, 27); } ////// 停止自动寻路操作 ////// @@ -352,7 +352,7 @@ control.prototype.stopAutomaticRoute = function () { core.status.automaticRoute.lastDirection = null; core.stopHero(); if (core.status.automaticRoute.moveStepBeforeStop.length==0) - core.canvas.ui.clearRect(0, 0, 416, 416); + core.clearMap('route'); } ////// 继续剩下的自动寻路操作 ////// @@ -370,7 +370,7 @@ control.prototype.continueAutomaticRoute = function () { ////// 清空剩下的自动寻路列表 ////// control.prototype.clearContinueAutomaticRoute = function () { - core.canvas.ui.clearRect(0, 0, 416, 416); + core.clearMap('route'); core.status.automaticRoute.moveStepBeforeStop=[]; } @@ -458,18 +458,18 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) { if (destX == core.status.hero.loc.x && destY == core.status.hero.loc.y){ moveStep=[]; } else { - core.canvas.ui.clearRect(0, 0, 416, 416); + core.clearMap('route'); return; } } moveStep=moveStep.concat(stepPostfix); core.status.automaticRoute.destX=destX; core.status.automaticRoute.destY=destY; - core.canvas.ui.save(); - core.canvas.ui.clearRect(0, 0, 416, 416); - core.canvas.ui.fillStyle = '#bfbfbf'; - core.canvas.ui.strokeStyle = '#bfbfbf'; - core.canvas.ui.lineWidth = 8; + core.canvas.route.save(); + core.clearMap('route'); + core.canvas.route.fillStyle = '#bfbfbf'; + core.canvas.route.strokeStyle = '#bfbfbf'; + core.canvas.route.lineWidth = 8; for (var m = 0; m < moveStep.length; m++) { if (tempStep == null) { step++; @@ -487,53 +487,53 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) { if (m == moveStep.length - 1) { // core.status.automaticRoutingTemp.moveStep.push({'direction': tempStep, 'step': step}); core.status.automaticRoute.autoStepRoutes.push({'direction': tempStep, 'step': step}); - core.canvas.ui.fillRect(moveStep[m].x * 32 + 10, moveStep[m].y * 32 + 10, 12, 12); + core.canvas.route.fillRect(moveStep[m].x * 32 + 10, moveStep[m].y * 32 + 10, 12, 12); } else { - core.canvas.ui.beginPath(); + core.canvas.route.beginPath(); if (core.isset(moveStep[m + 1]) && tempStep != moveStep[m + 1].direction) { if (tempStep == 'up' && moveStep[m + 1].direction == 'left' || tempStep == 'right' && moveStep[m + 1].direction == 'down') { - core.canvas.ui.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27); + 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 + 27); } else if (tempStep == 'up' && moveStep[m + 1].direction == 'right' || tempStep == 'left' && moveStep[m + 1].direction == 'down') { - core.canvas.ui.moveTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27); + 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.ui.moveTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5); + 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.ui.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5); + 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.ui.stroke(); + core.canvas.route.stroke(); continue; } switch (tempStep) { case 'up': case 'down': - core.canvas.ui.beginPath(); - core.canvas.ui.moveTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27); - core.canvas.ui.stroke(); + 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.ui.beginPath(); - core.canvas.ui.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16); - core.canvas.ui.lineTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16); - core.canvas.ui.stroke(); + 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.ui.restore(); + core.canvas.route.restore(); // 立刻移动 core.setAutoHeroMove(); @@ -632,7 +632,7 @@ control.prototype.automaticRoute = function (destX, destY) { ////// 显示离散的寻路点 ////// control.prototype.fillPosWithPoint = function (pos) { - core.fillRect('ui', pos.x*32+12,pos.y*32+12,8,8, '#bfbfbf'); + core.fillRect('route', pos.x*32+12,pos.y*32+12,8,8, '#bfbfbf'); } ////// 设置勇士的自动行走路线 ////// @@ -759,7 +759,7 @@ control.prototype.turnHero = function() { 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.canvas.ui.clearRect(0, 0, 416, 416); + core.clearMap('route'); core.status.route.push("turn"); } diff --git a/libs/core.js b/libs/core.js index 6f569e0b..93f24225 100644 --- a/libs/core.js +++ b/libs/core.js @@ -77,7 +77,7 @@ function core() { scale: 1.0, } this.bigmap = { - canvas: ["bg", "event", "event2", "fg"], + canvas: ["bg", "event", "event2", "fg", "route"], offsetX: 0, // in pixel offsetY: 0, width: 13, // map width and height @@ -116,7 +116,7 @@ function core() { 'cursorX': null, 'cursorY': null, "moveDirectly": false, - 'clickMoveDirectly': true, + 'clickMoveDirectly': false, }, // 按下键的时间：为了判定双击 diff --git a/styles.css b/styles.css index d85e7d5f..0983974a 100644 --- a/styles.css +++ b/styles.css @@ -288,6 +288,10 @@ span#poison, span#weak, span#curse { z-index: 80; } +#route { + z-index: 105; +} + #ui { z-index: 110; }