bigmap!!!

This commit is contained in:
fux4 2018-08-23 19:28:34 +08:00
parent 3d9217d4ca
commit aa66914308
11 changed files with 161 additions and 61 deletions

View File

@ -106,15 +106,17 @@
<div id="gif"></div>
<div id="gif2"></div>
<div id="curtain"></div>
<canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event2' 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='weather' 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 id="gameDraw">
<canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event2' 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='weather' 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>
</div>
<script src='libs/thirdparty/mid.min.js'></script>
<script src='libs/thirdparty/lz-string.min.js'></script>

View File

@ -553,7 +553,9 @@ actions.prototype.onclick = function (x, y, stepPostfix) {
// 寻路
if (!core.status.lockControl) {
core.setAutomaticRoute(x, y, stepPostfix);
var dx = ~~(core.maps.currentOffsetPos.x/32);
var dy = ~~(core.maps.currentOffsetPos.y/32);
core.setAutomaticRoute(x+dx, y+dy, stepPostfix);
return;
}

View File

@ -542,6 +542,9 @@ control.prototype.setAutomaticRoute = function (destX, destY, stepPostfix) {
////// 自动寻路算法,找寻最优路径 //////
control.prototype.automaticRoute = function (destX, destY) {
var fw = core.floors[core.status.floorId].tileWidth;
var fh = core.floors[core.status.floorId].tileHeight
var tsize = fw * fw;
var startX = core.getHeroLoc('x');
var startY = core.getHeroLoc('y');
var scan = {
@ -556,17 +559,17 @@ control.prototype.automaticRoute = function (destX, destY) {
var ans = []
if (destX == startX && destY == startY) return false;
queue.push(13 * startX + startY);
queue.push(fw * startX + startY);
queue.push(-1);
route[13 * startX + startY] = '';
route[fw * startX + startY] = '';
while (queue.length != 1) {
var f = queue.shift();
if (f===-1) {nowDeep+=1;queue.push(-1);continue;}
var deep = ~~(f/169);
var deep = ~~(f/tsize);
if (deep!==nowDeep) {queue.push(f);continue;}
f=f%169;
var nowX = parseInt(f / 13), nowY = f % 13;
f=f%tsize;
var nowX = parseInt(f / fw), nowY = f % fw;
var nowIsArrow = false, nowId, nowBlock = core.getBlock(nowX,nowY);
for (var direction in scan) {
if (!core.canMoveHero(nowX, nowY, direction))
@ -575,9 +578,9 @@ control.prototype.automaticRoute = function (destX, destY) {
var nx = nowX + scan[direction].x;
var ny = nowY + scan[direction].y;
if (nx<0 || nx>12 || ny<0 || ny>12) continue;
if (nx<0 || nx>=fw || ny<0 || ny>=fh) continue;
var nid = 13 * nx + ny;
var nid = fw * nx + ny;
if (core.isset(route[nid])) continue;
@ -606,18 +609,18 @@ control.prototype.automaticRoute = function (destX, destY) {
continue;
route[nid] = direction;
queue.push(169*(nowDeep+deepAdd)+nid);
queue.push(tsize*(nowDeep+deepAdd)+nid);
}
if (core.isset(route[13 * destX + destY])) break;
if (core.isset(route[fw * destX + destY])) break;
}
if (!core.isset(route[13 * destX + destY])) {
if (!core.isset(route[fw * destX + destY])) {
return false;
}
var nowX = destX, nowY = destY;
while (nowX != startX || nowY != startY) {
var dir = route[13 * nowX + nowY];
var dir = route[fw * nowX + nowY];
ans.push({'direction': dir, 'x': nowX, 'y': nowY});
nowX -= scan[dir].x;
nowY -= scan[dir].y;
@ -979,8 +982,23 @@ control.prototype.stopHero = function () {
core.status.heroStop = true;
}
////// 设置画布偏移
control.prototype.setGameCanvasTranslate = function(canvas,x,y){
var c=core.dom.gameCanvas[canvas];
c.style.transform='translate('+x+'px,'+y+'px)';
c.style.webkitTransform='translate('+x+'px,'+y+'px)';
c.style.OTransform='translate('+x+'px,'+y+'px)';
c.style.MozTransform='translate('+x+'px,'+y+'px)';
};
////// 更新视野范围
control.prototype.updateViewport = function() {
core.maps.activeCanvas.forEach(function(cn){ core.control.setGameCanvasTranslate(cn,-core.maps.currentOffsetPos.x,-core.maps.currentOffsetPos.y);});
}
////// 绘制勇士 //////
control.prototype.drawHero = function (direction, x, y, status, offset) {
var scan = {
'up': {'x': 0, 'y': -1},
'left': {'x': -1, 'y': 0},
@ -993,9 +1011,16 @@ control.prototype.drawHero = function (direction, x, y, status, offset) {
status = status || 'stop';
direction = direction || core.getHeroLoc('direction');
offset = offset || 0;
var dx=offset==0?0:scan[direction].x, dy=offset==0?0:scan[direction].y;
var way = 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);
core.maps.currentOffsetPos.x = ((x - 6) * 32 + offsetX).clamp(0,416);
core.maps.currentOffsetPos.y = ((y - 6) * 32 + offsetY).clamp(0,416);
core.clearAutomaticRouteNode(x+dx, y+dy);
core.canvas.hero.clearRect(32 * x - 32, 32 * y - 32, 96, 96);
core.canvas.hero.clearRect(x * 32 - core.maps.currentOffsetPos.x - 32, y * 32 - core.maps.currentOffsetPos.y - 32, 96, 96);
var heroIconArr = core.material.icons.hero;
var drawObjs = [];
@ -1004,8 +1029,8 @@ control.prototype.drawHero = function (direction, x, y, status, offset) {
"img": core.material.images.hero,
"height": core.material.icons.hero.height,
"heroIcon": heroIconArr[direction],
"posx": 32 * x + scan[direction].x*offset,
"posy": 32 * y + scan[direction].y*offset,
"posx": x * 32 - core.maps.currentOffsetPos.x + offsetX,
"posy": y * 32 - core.maps.currentOffsetPos.y + offsetY,
"status": status,
"index": 0,
});
@ -1020,8 +1045,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 + (t.stop?0:scan[t.direction].x*offset),
"posy": 32*t.y + (t.stop?0:scan[t.direction].y*offset),
"posx": 32*t.x - core.maps.currentOffsetPos.x + (t.stop?0:scan[t.direction].x*offset),
"posy": 32*t.y - core.maps.currentOffsetPos.y + (t.stop?0:scan[t.direction].y*offset),
"status": t.stop?"stop":status,
"index": index++
});
@ -1031,13 +1056,15 @@ control.prototype.drawHero = function (direction, x, y, status, offset) {
drawObjs.sort(function (a, b) {
return a.posy==b.posy?b.index-a.index:a.posy-b.posy;
})
});
drawObjs.forEach(function (block) {
core.canvas.hero.drawImage(block.img, block.heroIcon[block.status]*32,
block.heroIcon.loc * block.height, 32, block.height,
block.posx, block.posy+32-block.height, 32, block.height);
})
});
core.control.updateViewport();
}
////// 设置勇士的位置 //////
@ -2790,10 +2817,10 @@ control.prototype.resize = function(clientWidth, clientHeight) {
{
className: 'gameCanvas',
rules:{
width: canvasWidth + unit,
height: canvasWidth + unit,
// width: canvasWidth + unit,
// height: canvasWidth + unit,
top: canvasTop + unit,
right: 0,
left: 0,
border: '3px '+borderColor+' solid',
}
},
@ -2824,6 +2851,16 @@ control.prototype.resize = function(clientWidth, clientHeight) {
right: SPACE + unit,
}
},
{
id: 'gameDraw',
rules: {
width: (canvasWidth - SPACE*2) + unit,
height:(canvasWidth - SPACE*2) + unit,
top: canvasTop + unit,
right: SPACE + unit,
border: '3px #fff solid'
}
},
{
id: 'floorMsgGroup',
rules:{

View File

@ -2,6 +2,11 @@
* 初始化 start
*/
// 额外功能
Number.prototype.clamp = function(min, max) {
return Math.min(Math.max(this, min), max);
};
function core() {
this.material = {
'animates': {},

View File

@ -1185,6 +1185,9 @@ events.prototype.changeFloor = function (floorId, stair, heroLoc, time, callback
}
})
}
// 重置画布尺寸
core.maps.resizeCanvas(floorId);
// 画地图
core.drawMap(floorId, function () {
if (core.isset(heroLoc.direction))
core.setHeroLoc('direction', heroLoc.direction);

View File

@ -18,8 +18,10 @@ maps.prototype.loadFloor = function (floorId, map) {
if (!core.isset(map)) map=floor.map;
var mapIntoBlocks = function(map,maps,floor){
var blocks = [];
for (var i = 0; i < 13; i++) {
for (var j = 0; j < 13; j++) {
var mw = core.floors[floorId].tileWidth;
var mh = core.floors[floorId].tileHeight;
for (var i = 0; i < mh; i++) {
for (var j = 0; j < mw; j++) {
var block = maps.initBlock(j, i, map[i][j]);
maps.addInfo(block);
maps.addEvent(block,j,i,floor.events[j+","+i])
@ -158,11 +160,13 @@ maps.prototype.save = function(maps, floorId) {
}
var thisFloor = maps[floorId];
var mw = core.floors[floorId].tileWidth;
var mh = core.floors[floorId].tileHeight;
var blocks = [];
for (var x=0;x<13;x++) {
for (var x=0;x<mw;x++) {
blocks[x]=[];
for (var y=0;y<13;y++) {
for (var y=0;y<mh;y++) {
blocks[x].push(0);
}
}
@ -176,6 +180,23 @@ maps.prototype.save = function(maps, floorId) {
return blocks;
}
////// 需要更改尺寸的画布
maps.prototype.activeCanvas = ['bg','event','event2'];
////// 记忆偏移量
maps.prototype.currentOffsetPos = {x :0 ,y :0};
////// 更改地图画布的尺寸
maps.prototype.resizeCanvas = function(floorId) {
var cwidth = core.floors[floorId].tileWidth * 32;
var cheight = core.floors[floorId].tileHeight * 32;
this.activeCanvas.forEach(function(cn){
core.canvas[cn].canvas.setAttribute("width",cwidth);
core.canvas[cn].canvas.setAttribute("height",cheight);
core.canvas[cn].canvas.style.width = cwidth;
core.canvas[cn].canvas.style.height = cheight;
});
}
////// 将存档中的地图信息重新读取出来 //////
maps.prototype.load = function (data, floorId) {
if (floorId == undefined) {
@ -189,12 +210,12 @@ maps.prototype.load = function (data, floorId) {
}
////// 将当前地图重新变成二维数组形式 //////
maps.prototype.getMapArray = function (blockArray){
maps.prototype.getMapArray = function (blockArray,width,height){
var blocks = [];
for (var x=0;x<13;x++) {
for (var x=0;x<width;x++) {
blocks[x]=[];
for (var y=0;y<13;y++) {
for (var y=0;y<height;y++) {
blocks[x].push(0);
}
}
@ -316,12 +337,17 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) {
maps.prototype.drawMap = function (mapName, callback) {
core.clearMap('all');
core.removeGlobalAnimate(null, null, true);
var mw = core.floors[mapName].tileWidth;
var mh = core.floors[mapName].tileHeight;
var drawBg = function(){
var groundId = core.floors[mapName].defaultGround || "ground";
var blockIcon = core.material.icons.terrains[groundId];
var blockImage = core.material.images.terrains;
for (var x = 0; x < 13; x++) {
for (var y = 0; y < 13; y++) {
var dx = core.getHeroLoc('x');
var dy = core.getHeroLoc('y');
for (var x = 0; x < mw; x++) {
for (var y = 0; y < mh; y++) {
core.canvas.bg.drawImage(blockImage, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32);
}
}
@ -382,7 +408,7 @@ maps.prototype.drawMap = function (mapName, callback) {
var mapData = core.status.maps[core.status.floorId];
var mapBlocks = mapData.blocks;
var mapArray = core.maps.getMapArray(mapBlocks);
var mapArray = core.maps.getMapArray(mapBlocks,mw,mh);
for (var b = 0; b < mapBlocks.length; b++) {
// 事件启用
var block = mapBlocks[b];
@ -511,7 +537,8 @@ maps.prototype.noPassExists = function (x, y, floorId) {
////// 某个点是否在区域内且不可通行 //////
maps.prototype.noPass = function (x, y) {
return x<0 || x>12 || y<0 || y>12 || this.noPassExists(x,y);
var floor = core.floors[core.status.floorId];
return x<0 || x>=floor.tileWidth || y<0 || y>=floor.tileHeight || this.noPassExists(x,y);
}
////// 某个点是否存在NPC //////
@ -1019,7 +1046,7 @@ maps.prototype.drawAnimate = function (name, x, y, callback) {
var cx = centerX+t.x, cy=centerY+t.y;
if (!t.mirror && !t.angle) {
core.canvas.animate.drawImage(image, cx-realWidth/2, cy-realHeight/2, realWidth, realHeight);
core.canvas.animate.drawImage(image, cx-realWidth/2 - core.maps.currentOffsetPos.x, cy-realHeight/2 - core.maps.currentOffsetPos.y, realWidth, realHeight);
}
else {
core.saveCanvas('animate');
@ -1028,7 +1055,7 @@ maps.prototype.drawAnimate = function (name, x, y, callback) {
core.canvas.animate.rotate(-t.angle*Math.PI/180);
if (t.mirror)
core.canvas.animate.scale(-1,1);
core.canvas.animate.drawImage(image, -realWidth/2, -realHeight/2, realWidth, realHeight);
core.canvas.animate.drawImage(image, -realWidth/2 - core.maps.currentOffsetPos.x, -realHeight/2 - core.maps.currentOffsetPos.y, realWidth, realHeight);
core.loadCanvas('animate');
}
})

View File

@ -1715,6 +1715,8 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroL
var blockIcon = core.material.icons.terrains[groundId];
var blockImage = core.material.images.terrains;
var persize = size/13;
var mw = core.floors[floorId].tileWidth;
var mh = core.floors[floorId].tileHeight;
for (var i=0;i<13;i++) {
for (var j=0;j<13;j++) {
core.canvas[canvas].drawImage(blockImage, 0, blockIcon * 32, 32, 32, x + i * persize, y + j * persize, persize, persize);
@ -1743,7 +1745,7 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroL
}
})
var mapArray = core.maps.getMapArray(blocks);
var mapArray = core.maps.getMapArray(blocks,mw,mh);
for (var b in blocks) {
var block = blocks[b];
if (core.isset(block.event) && !(core.isset(block.enable) && !block.enable)) {

View File

@ -43,6 +43,7 @@ function main() {
'gif': document.getElementById('gif'),
'gif2': document.getElementById('gif2'),
'curtain': document.getElementById('curtain'),
'gameDraw': document.getElementById('gameDraw'),
'startButtons': document.getElementById('startButtons'),
'playGame': document.getElementById('playGame'),
'loadGame': document.getElementById('loadGame'),

View File

@ -2,7 +2,7 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
{
"main" : {
"floorIds" : [
"sample0", "sample1", "sample2", "MT0"
"MT0"
],
"images" : [
"bg.jpg"
@ -28,7 +28,7 @@ data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
"title": "魔塔样板",
"name": "template",
"version": "Ver 2.3.3",
"floorId": "sample0",
"floorId": "MT0",
"hero": {
"name": "阳光",
'lv': 1,

View File

@ -10,20 +10,35 @@ main.floors.MT0=
"images": [],
"item_ratio": 1,
"map": [
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 0,202, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,202, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
[ 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,202,202, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,202,202, 0],
[ 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0,202, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,202, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 0,202, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0,202, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
[ 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,202,202, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,202,202, 0],
[ 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0,202, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,202, 0, 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
],
"tileWidth":26,
"tileHeight":26,
"firstArrive": [],
"events": {},
"changeFloor": {},

View File

@ -253,6 +253,12 @@ span#poison, span#weak, span#curse {
background: #000000;
}
#gameDraw {
position: absolute;
background: #000000;
overflow: hidden;
}
#bg {
z-index: 10;
}