Automatic Route
This commit is contained in:
oc
parent
4dcfcbd702
commit
7551dd3c72
@ -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] = [];
|
||||
|
||||
@ -18,6 +18,7 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
|
||||
- animate：动画层；主要用来绘制动画，图块的淡入/淡出效果，图块的移动。showImage事件绘制的图片也是在这一层。
|
||||
- weather：天气层；主要用来绘制天气（雨/雪）
|
||||
- curtain：色调层；用来控制当前楼层的画面色调
|
||||
- route：路线层；主要用来绘制勇士的行走路线图
|
||||
- ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等
|
||||
- data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。
|
||||
|
||||
|
||||
@ -114,6 +114,7 @@
|
||||
<canvas class='gameCanvas' id='fg' 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='route' 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>
|
||||
</div>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
// 长按
|
||||
|
||||
@ -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");
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
},
|
||||
|
||||
// 按下键的时间：为了判定双击
|
||||
|
||||
@ -288,6 +288,10 @@ span#poison, span#weak, span#curse {
|
||||
z-index: 80;
|
||||
}
|
||||
|
||||
#route {
|
||||
z-index: 105;
|
||||
}
|
||||
|
||||
#ui {
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user