Merge pull request #188 from fux4/bigmap

bigmap!!!
2018-08-24 01:04:22 +08:00 · 2018-08-24 01:04:22 +08:00 · edef2beb1d
commit edef2beb1d
parent 3d9217d4ca aa66914308
11 changed files with 161 additions and 61 deletions
--- a/index.html
+++ b/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>
-    <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>
--- 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;
    }

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