diff --git a/index.html b/index.html index 0f69d24f..95aff62d 100644 --- a/index.html +++ b/index.html @@ -106,15 +106,17 @@
- - - - - - - - - 此浏览器不支持HTML5 +
+ + + + + + + + + 此浏览器不支持HTML5 +
diff --git a/libs/actions.js b/libs/actions.js index 4c0e2d67..4141b107 100644 --- a/libs/actions.js +++ b/libs/actions.js @@ -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; } diff --git a/libs/control.js b/libs/control.js index 8352da57..12fa6d7f 100644 --- a/libs/control.js +++ b/libs/control.js @@ -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:{ diff --git a/libs/core.js b/libs/core.js index 305109f3..779ba8a7 100644 --- a/libs/core.js +++ b/libs/core.js @@ -2,6 +2,11 @@ * 初始化 start */ +// 额外功能 +Number.prototype.clamp = function(min, max) { + return Math.min(Math.max(this, min), max); +}; + function core() { this.material = { 'animates': {}, diff --git a/libs/events.js b/libs/events.js index 877e83b9..cda595ce 100644 --- a/libs/events.js +++ b/libs/events.js @@ -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); diff --git a/libs/maps.js b/libs/maps.js index dd943c40..e004af85 100644 --- a/libs/maps.js +++ b/libs/maps.js @@ -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;x12 || 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'); } }) diff --git a/libs/ui.js b/libs/ui.js index d2bc5293..45e4a2c8 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -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)) { diff --git a/main.js b/main.js index 154f2f20..1a2a649f 100644 --- a/main.js +++ b/main.js @@ -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'), diff --git a/project/data.js b/project/data.js index f01f9468..eba61dc1 100644 --- a/project/data.js +++ b/project/data.js @@ -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, diff --git a/project/floors/MT0.js b/project/floors/MT0.js index bb215c0f..7e83fff7 100644 --- a/project/floors/MT0.js +++ b/project/floors/MT0.js @@ -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": {}, diff --git a/styles.css b/styles.css index 2cf08287..218bfe8d 100644 --- a/styles.css +++ b/styles.css @@ -253,6 +253,12 @@ span#poison, span#weak, span#curse { background: #000000; } +#gameDraw { + position: absolute; + background: #000000; + overflow: hidden; +} + #bg { z-index: 10; }