jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Automatic Route

Browse Source
This commit is contained in:
oc 2018-08-24 22:45:35 +08:00
parent 4dcfcbd702
commit 7551dd3c72
7 changed files with 49 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_server/editor.js
View File

@ -159,8 +159,8 @@ editor.prototype.drawInitData = function (icons) {
} }
editor.prototype.mapInit = function () { editor.prototype.mapInit = function () {
var ec = document.getElementById('event').getContext('2d'); var ec = document.getElementById('event').getContext('2d');
ec.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, 416, 416); document.getElementById('event2').getContext('2d').clearRect(0, 0, core.bigmap.width*32, core.bigmap.height*32);
editor.map = []; editor.map = [];
for (var y = 0; y < 13; y++) { for (var y = 0; y < 13; y++) {
editor.map[y] = []; editor.map[y] = [];

1
docs/personalization.md
View File

@ -18,6 +18,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
- animate：动画层；主要用来绘制动画，图块的淡入/淡出效果，图块的移动。showImage事件绘制的图片也是在这一层。 - animate：动画层；主要用来绘制动画，图块的淡入/淡出效果，图块的移动。showImage事件绘制的图片也是在这一层。
- weather：天气层；主要用来绘制天气（雨/雪） - weather：天气层；主要用来绘制天气（雨/雪）
- curtain：色调层；用来控制当前楼层的画面色调 - curtain：色调层；用来控制当前楼层的画面色调
- route：路线层；主要用来绘制勇士的行走路线图
- ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等 - ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等
- data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。 - data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。

1
index.html
View File

@ -114,6 +114,7 @@
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' width='416' height='416'></canvas> <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='weather' width='416' height='416'></canvas> <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='ui' 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> <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</canvas>
</div> </div>

6
libs/actions.js
View File

@ -429,7 +429,7 @@ actions.prototype.ondown = function (x ,y) {
} }
core.status.downTime = new Date(); core.status.downTime = new Date();
core.clearMap('ui'); core.clearMap('route');
var pos={'x':x,'y':y} var pos={'x':x,'y':y}
core.status.stepPostfix=[]; core.status.stepPostfix=[];
core.status.stepPostfix.push(pos); core.status.stepPostfix.push(pos);
@ -482,8 +482,8 @@ actions.prototype.onup = function () {
var posy=core.status.stepPostfix[0].y; var posy=core.status.stepPostfix[0].y;
core.status.stepPostfix=[]; core.status.stepPostfix=[];
if (!core.status.lockControl) { if (!core.status.lockControl) {
core.canvas.ui.clearRect(0, 0, 416,416); core.clearMap('route');
core.canvas.ui.restore(); core.canvas.route.restore();
} }
// 长按 // 长按

72
libs/control.js
View File

@ -286,7 +286,7 @@ control.prototype.resetStatus = function(hero, hard, floorId, route, maps, value
// 保存的Index // 保存的Index
core.status.saveIndex = core.getLocalStorage('saveIndex2', 1); 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)) if (core.isset(values))
core.values = core.clone(values); core.values = core.clone(values);
@ -334,7 +334,7 @@ control.prototype.restart = function() {
////// 清除自动寻路路线 ////// ////// 清除自动寻路路线 //////
control.prototype.clearAutomaticRouteNode = function (x, y) { control.prototype.clearAutomaticRouteNode = function (x, y) {
if (core.status.event.id==null) 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.status.automaticRoute.lastDirection = null;
core.stopHero(); core.stopHero();
if (core.status.automaticRoute.moveStepBeforeStop.length==0) 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 () { control.prototype.clearContinueAutomaticRoute = function () {
core.canvas.ui.clearRect(0, 0, 416, 416); core.clearMap('route');
core.status.automaticRoute.moveStepBeforeStop=[]; 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){ if (destX == core.status.hero.loc.x && destY == core.status.hero.loc.y){
moveStep=[]; moveStep=[];
} else { } else {
core.canvas.ui.clearRect(0, 0, 416, 416); core.clearMap('route');
return; return;
} }
} }
moveStep=moveStep.concat(stepPostfix); moveStep=moveStep.concat(stepPostfix);
core.status.automaticRoute.destX=destX; core.status.automaticRoute.destX=destX;
core.status.automaticRoute.destY=destY; core.status.automaticRoute.destY=destY;
core.canvas.ui.save(); core.canvas.route.save();
core.canvas.ui.clearRect(0, 0, 416, 416); core.clearMap('route');
core.canvas.ui.fillStyle = '#bfbfbf'; core.canvas.route.fillStyle = '#bfbfbf';
core.canvas.ui.strokeStyle = '#bfbfbf'; core.canvas.route.strokeStyle = '#bfbfbf';
core.canvas.ui.lineWidth = 8; core.canvas.route.lineWidth = 8;
for (var m = 0; m < moveStep.length; m++) { for (var m = 0; m < moveStep.length; m++) {
if (tempStep == null) { if (tempStep == null) {
step++; step++;
@ -487,53 +487,53 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) {
if (m == moveStep.length - 1) { if (m == moveStep.length - 1) {
// core.status.automaticRoutingTemp.moveStep.push({'direction': tempStep, 'step': step}); // core.status.automaticRoutingTemp.moveStep.push({'direction': tempStep, 'step': step});
core.status.automaticRoute.autoStepRoutes.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 { else {
core.canvas.ui.beginPath(); core.canvas.route.beginPath();
if (core.isset(moveStep[m + 1]) && tempStep != moveStep[m + 1].direction) { 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') { 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.route.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.route.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.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') { 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.route.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.route.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.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') { 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.route.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.route.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.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') { 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.route.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.route.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.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5);
} }
core.canvas.ui.stroke(); core.canvas.route.stroke();
continue; continue;
} }
switch (tempStep) { switch (tempStep) {
case 'up': case 'up':
case 'down': case 'down':
core.canvas.ui.beginPath(); core.canvas.route.beginPath();
core.canvas.ui.moveTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 5); core.canvas.route.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.route.lineTo(moveStep[m].x * 32 + 16, moveStep[m].y * 32 + 27);
core.canvas.ui.stroke(); core.canvas.route.stroke();
break; break;
case 'left': case 'left':
case 'right': case 'right':
core.canvas.ui.beginPath(); core.canvas.route.beginPath();
core.canvas.ui.moveTo(moveStep[m].x * 32 + 5, moveStep[m].y * 32 + 16); core.canvas.route.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.route.lineTo(moveStep[m].x * 32 + 27, moveStep[m].y * 32 + 16);
core.canvas.ui.stroke(); core.canvas.route.stroke();
break; break;
} }
} }
} }
core.canvas.ui.restore(); core.canvas.route.restore();
// 立刻移动 // 立刻移动
core.setAutoHeroMove(); core.setAutoHeroMove();
@ -632,7 +632,7 @@ control.prototype.automaticRoute = function (destX, destY) {
////// 显示离散的寻路点 ////// ////// 显示离散的寻路点 //////
control.prototype.fillPosWithPoint = function (pos) { 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 == 'down') core.status.hero.loc.direction = 'left';
else if (core.status.hero.loc.direction == 'left') core.status.hero.loc.direction = 'up'; else if (core.status.hero.loc.direction == 'left') core.status.hero.loc.direction = 'up';
core.drawHero(); core.drawHero();
core.canvas.ui.clearRect(0, 0, 416, 416); core.clearMap('route');
core.status.route.push("turn"); core.status.route.push("turn");
} }

4
libs/core.js
View File

@ -77,7 +77,7 @@ function core() {
scale: 1.0, scale: 1.0,
} }
this.bigmap = { this.bigmap = {
canvas: ["bg", "event", "event2", "fg"], canvas: ["bg", "event", "event2", "fg", "route"],
offsetX: 0, // in pixel offsetX: 0, // in pixel
offsetY: 0, offsetY: 0,
width: 13, // map width and height width: 13, // map width and height
@ -116,7 +116,7 @@ function core() {
'cursorX': null, 'cursorX': null,
'cursorY': null, 'cursorY': null,
"moveDirectly": false, "moveDirectly": false,
'clickMoveDirectly': true, 'clickMoveDirectly': false,
}, },
// 按下键的时间：为了判定双击 // 按下键的时间：为了判定双击

4
styles.css
View File

@ -288,6 +288,10 @@ span#poison, span#weak, span#curse {
z-index: 80; z-index: 80;
} }
#route {
z-index: 105;
}
#ui { #ui {
z-index: 110; z-index: 110;
} }