Merge pull request #188 from fux4/bigmap

bigmap!!!

index.html

@@ -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>
+    <div id="gameDraw">
-    <canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='hero' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='event2' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='animate' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='ui' width='416' height='416'></canvas>
+        <canvas class='gameCanvas' id='weather' width='416' height='416'></canvas>
-    <canvas class='gameCanvas' id='data' width='416' height='416'>此浏览器不支持HTML5</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>

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;
     }
 

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;
+        f=f%tsize;
-        var nowX = parseInt(f / 13), nowY = f % 13;
+        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,
+        "posx": x * 32 - core.maps.currentOffsetPos.x + offsetX,
-        "posy": 32 * y + scan[direction].y*offset,
+        "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),
+                    "posx": 32*t.x - core.maps.currentOffsetPos.x + (t.stop?0:scan[t.direction].x*offset),
-                    "posy": 32*t.y + (t.stop?0:scan[t.direction].y*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,
+                // width: canvasWidth + unit,
-                height: 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:{

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': {},

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);

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++) {
+        var mw = core.floors[floorId].tileWidth;
-            for (var j = 0; j < 13; j++) {
+        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++) {
+        var dx = core.getHeroLoc('x');
-            for (var y = 0; y < 13; y++) {
+        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');
             }
         })

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)) {

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'),

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,

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,  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,  0,  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,  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,  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,  0,  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,  0,  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,  0,  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,  0,  0,  0,  0,  0,  0,  0,  0,  0,  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,  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,  0,  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,  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": {},

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;
 }