Draw Thumbnail & View maps

libs/actions.js

@@ -351,7 +351,7 @@ actions.prototype.keyUp = function(keyCode, fromReplay) {
         case 33: case 34: // PAGEUP/PAGEDOWN
         if (core.status.heroStop) {
             if (core.flags.enableViewMaps) {
-                core.ui.drawMaps(core.floorIds.indexOf(core.status.floorId));
+                core.ui.drawMaps();
             }
             else {
                 core.drawTip("本塔不允许浏览地图！");
@@ -968,23 +968,47 @@ actions.prototype.keyUpFly = function (keycode) {
 
 ////// 查看地图界面时的点击操作 //////
 actions.prototype.clickViewMaps = function (x,y) {
+    if (!core.isset(core.status.event.data)) {
+        core.ui.drawMaps(core.floorIds.indexOf(core.status.floorId));
+        return;
+    }
+
     var now = core.floorIds.indexOf(core.status.floorId);
-    var nextId = core.status.event.data;
+    var index = core.status.event.data.index;
-    if(y<=4) {
+    var cx = core.status.event.data.x, cy = core.status.event.data.y;
-        nextId++;
+
-        while (nextId<core.floorIds.length && nextId!=now && core.floors[core.floorIds[nextId]].cannotViewMap)
+    if (x>=2 && x<=10 && y<=1) {
-            nextId++;
+        core.ui.drawMaps(index, cx, cy-1);
-        if (nextId<core.floorIds.length)
+        return;
-            core.ui.drawMaps(nextId);
     }
-    else if (y>=8) {
+    if (x>=2 && x<=10 && y>=11) {
-        nextId--;
+        core.ui.drawMaps(index, cx, cy+1);
-        while (nextId>=0 && nextId!=now && core.floors[core.floorIds[nextId]].cannotViewMap)
+        return;
-            nextId--;
-        if (nextId>=0)
-            core.ui.drawMaps(nextId);
     }
-    else {
+    if (x<=1 && y>=2 && y<=10) {
+        core.ui.drawMaps(index, cx-1, cy);
+        return;
+    }
+    if (x>=11 && y>=2 && y<=10) {
+        core.ui.drawMaps(index, cx+1, cy);
+        return;
+    }
+
+    if(x>=2 && x<=10 && y<=4) {
+        index++;
+        while (index<core.floorIds.length && index!=now && core.floors[core.floorIds[index]].cannotViewMap)
+            index++;
+        if (index<core.floorIds.length)
+            core.ui.drawMaps(index);
+    }
+    else if (x>=2 && x<=10 && y>=8) {
+        index--;
+        while (index>=0 && index!=now && core.floors[core.floorIds[index]].cannotViewMap)
+            index--;
+        if (index>=0)
+            core.ui.drawMaps(index);
+    }
+    else if (x>=2 && x<=10 && y>=5 && y<=7) {
         core.clearMap('data');
         core.setOpacity('data', 1);
         core.ui.closePanel();
@@ -993,17 +1017,23 @@ actions.prototype.clickViewMaps = function (x,y) {
 
 ////// 查看地图界面时，按下某个键的操作 //////
 actions.prototype.keyDownViewMaps = function (keycode) {
-    if (keycode==37 || keycode==38 || keycode==33) {
+    if (!core.isset(core.status.event.data)) return;
-        this.clickViewMaps(6,2);
+    if (keycode==38||keycode==33) this.clickViewMaps(6, 3);
-    }
+    if (keycode==40||keycode==34) this.clickViewMaps(6, 9);
-    else if (keycode==39 || keycode==40 || keycode==34) {
+    if (keycode==87) this.clickViewMaps(6,0);
-        this.clickViewMaps(6,10);
+    if (keycode==65) this.clickViewMaps(0,6);
-    }
+    if (keycode==83) this.clickViewMaps(6,12);
+    if (keycode==68) this.clickViewMaps(12,6);
     return;
 }
 
 ////// 查看地图界面时，放开某个键的操作 //////
 actions.prototype.keyUpViewMaps = function (keycode) {
+    if (!core.isset(core.status.event.data)) {
+        core.ui.drawMaps(core.floorIds.indexOf(core.status.floorId));
+        return;
+    }
+
     if (keycode==27 || keycode==13 || keycode==32 || keycode==67) {
         core.clearMap('data');
         core.setOpacity('data', 1);
@@ -1585,9 +1615,12 @@ actions.prototype.clickSettings = function (x,y) {
                     core.drawTip("本塔不允许浏览地图！");
                 }
                 else {
+                    /*
                     core.drawText("\t[系统提示]即将进入浏览地图模式。\n\n点击地图上半部分，或按[↑]键可查看前一张地图\n点击地图下半部分，或按[↓]键可查看后一张地图\n点击地图中间，或按[ESC]键可离开浏览地图模式\n此模式下可以打开怪物手册以查看某层楼的怪物属性", function () {
                         core.ui.drawMaps(core.floorIds.indexOf(core.status.floorId));
                     })
+                    */
+                    core.ui.drawMaps();
                 }
                 break;
             case 3:

libs/core.js

@@ -2,11 +2,6 @@
  * 初始化 start
  */
 
-// 额外功能
-Number.prototype.clamp = function(min, max) {
-    return Math.min(Math.max(this, min), max);
-};
-
 function core() {
     this.material = {
         'animates': {},
@@ -81,7 +76,8 @@ function core() {
         offsetX: 0, // in pixel
         offsetY: 0,
         width: 13, // map width and height
-        height: 13
+        height: 13,
+        tempCanvas: null, // A temp canvas for drawing
     }
     this.initStatus = {
         'played': false,
@@ -275,6 +271,8 @@ core.prototype.init = function (coreData, callback) {
     core.material.ground = new Image();
     core.material.ground.src = "project/images/ground.png";
 
+    core.bigmap.tempCanvas = document.createElement('canvas').getContext('2d');
+
     core.loader.load(function () {
         console.log(core.material);
         // 设置勇士高度

libs/maps.js

@@ -354,10 +354,8 @@ maps.prototype.drawMap = function (mapName, callback) {
             }
         }
         images.forEach(function (t) {
-            var size=416, ratio=1;
             var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2];
             if (core.isset(dx) && core.isset(dy) && core.isset(core.material.images.images[p])) {
-                dx*=32; dy*=32;
                 var image = core.material.images.images[p];
                 if (!t[3]) {
                     if (/.*\.gif/i.test(p) && main.mode=='play') {
@@ -365,23 +363,23 @@ maps.prototype.drawMap = function (mapName, callback) {
                         var gif = new Image();
                         gif.src = core.material.images.images[p].src;
                         gif.style.position = 'absolute';
-                        gif.style.left = (dx*core.domStyle.scale)+"px";
+                        gif.style.left = (32*dx*core.domStyle.scale)+"px";
-                        gif.style.top = (dy*core.domStyle.scale)+"px";
+                        gif.style.top = (32*dy*core.domStyle.scale)+"px";
                         gif.style.width = core.material.images.images[p].width*core.domStyle.scale+"px";
                         gif.style.height = core.material.images.images[p].height*core.domStyle.scale+"px";
                         core.dom.gif.appendChild(gif);
                     }
                     else {
-                        core.canvas.bg.drawImage(image, dx * ratio, dy * ratio, Math.min(size - dx * ratio, ratio * image.width), Math.min(size - dy * ratio, ratio * image.height));
+                        core.canvas.bg.drawImage(image, 32*dx, 32*dy, image.width, image.height);
                     }
                 }
                 else if (t[3]==1)
-                    core.canvas.event2.drawImage(image, dx*ratio, dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height));
+                    core.canvas.event2.drawImage(image, 32*dx, 32*dy, image.width, image.height);
                 else if (t[3]==2) {
                     core.canvas.event2.drawImage(image, 0, 0, image.width, image.height-32,
-                        dx * ratio, dy * ratio, ratio * image.width, ratio * (image.height-32));
+                        32*dx, 32*dy, image.width, image.height-32);
                     core.canvas.bg.drawImage(image, 0, image.height-32, image.width, 32,
-                        dx * ratio, (dy + image.height - 32) * ratio, ratio*image.width, 32*ratio);
+                        32*dx, 32*dy + image.height - 32, image.width, 32);
                 }
             }
         })

libs/ui.js

@@ -1476,30 +1476,81 @@ ui.prototype.drawFly = function(page) {
 }
 
 ////// 绘制浏览地图界面 //////
-ui.prototype.drawMaps = function (index) {
+ui.prototype.drawMaps = function (index, x, y) {
-    if (!core.isset(index)) index=core.floorIds.indexOf(core.status.floorId);
+    core.lockControl();
+    core.status.event.id = 'viewMaps';
+
+    if (!core.isset(index)) {
+        core.status.event.data = null;
+        core.clearMap('ui');
+        core.setAlpha('ui', 1);
+
+        core.clearMap('animate');
+        core.setOpacity('animate', 0.4);
+        core.fillRect('animate', 0, 0, 416, 416, '#000000');
+
+        core.strokeRect('ui', 66, 2, 284, 60, "#FFD700", 4);
+        core.strokeRect('ui', 2, 66, 60, 284);
+        core.strokeRect('ui', 66, 416-62, 284, 60);
+        core.strokeRect('ui', 416-62, 66, 60, 284);
+        core.strokeRect('ui', 66, 66, 284, 92);
+        core.strokeRect('ui', 66, 32*8+2, 284, 92);
+        core.canvas.ui.textAlign = 'center';
+        core.fillText('ui', "上移地图 [W]", 208, 38, '#FFD700', '20px Arial');
+        core.fillText('ui', "下移地图 [S]", 208, 390);
+
+        var top = 150;
+        core.fillText('ui', "左", 32, top);
+        core.fillText('ui', "移", 32, top+32);
+        core.fillText('ui', "地", 32, top+32*2);
+        core.fillText('ui', "图", 32, top+32*3);
+        core.fillText('ui', "[A]", 32, top+32*4);
+        core.fillText('ui', "右", 384, top);
+        core.fillText('ui', "移", 384, top+32);
+        core.fillText('ui', "地", 384, top+32*2);
+        core.fillText('ui', "图", 384, top+32*3);
+        core.fillText('ui', "[D]", 384, top+32*4);
+
+        core.fillText('ui', "前张地图 [▲ / PGUP]", 208, 64+54);
+        core.fillText('ui', "后张地图 [▼ / PGDN]", 208, 32*8+54);
+
+        core.fillText('ui', "退出 [ESC / ENTER]", 208, 208+8);
+        core.fillText('ui', "[X] 可查看怪物手册", 285, 208+40, null, '13px Arial');
+        return;
+    }
+
+    core.clearMap('animate');
+    core.setOpacity('animate', 1);
+
+    if (core.isset(index.index)) {
+        x=index.x;
+        y=index.y;
+        index=index.index;
+    }
 
     if (index<0) index=0;
     if (index>=core.floorIds.length) index=core.floorIds.length-1;
+    var floorId = core.floorIds[index], mw = core.floors[floorId].width||13, mh = core.floors[floorId].height||13;
+    if (!core.isset(x)) x = parseInt(mw/2);
+    if (!core.isset(y)) y = parseInt(mh/2);
+    if (x<6) x=6;
+    if (x>mw-7) x=mw-7;
+    if (y<6) y=6;
+    if (y>mh-7) y=mh-7;
 
-    core.lockControl();
+    core.status.event.data = {"index": index, "x": x, "y": y};
-    core.status.event.id = 'viewMaps';
-    core.status.event.data = index;
-
-    var floorId = core.floorIds[index];
 
     clearTimeout(core.interval.tipAnimate);
-
     core.clearMap('ui');
     core.setAlpha('ui', 1);
-    this.drawThumbnail(floorId, 'ui', core.status.maps[floorId].blocks, 0, 0, 416);
+    this.drawThumbnail(floorId, 'ui', core.status.maps[floorId].blocks, 0, 0, 416, x, y);
 
     core.clearMap('data');
     core.setOpacity('data', 0.2);
     core.canvas.data.textAlign = 'left';
     core.setFont('data', '16px Arial');
 
-    var text = core.floors[floorId].title;
+    var text = core.floors[floorId].title + " ["+(x-6)+","+(y-6)+"]";
     var textX = 16, textY = 18, width = textX + core.canvas.data.measureText(text).width + 16, height = 42;
     core.fillRect('data', 5, 5, width, height, '#000');
     core.setOpacity('data', 0.5);
@@ -1679,7 +1730,7 @@ ui.prototype.drawSLPanel = function(index) {
             core.fillText('ui', i==0?"自动存档":name+id, (2*i+1)*u, 35, '#FFFFFF', "bold 17px Verdana");
             core.strokeRect('ui', (2*i+1)*u-size/2, 50, size, size, i==offset?strokeColor:'#FFFFFF', i==offset?6:2);
             if (core.isset(data) && core.isset(data.floorId)) {
-                this.drawThumbnail(data.floorId, 'ui', core.maps.load(data.maps, data.floorId).blocks, (2*i+1)*u-size/2, 50, size, data.hero.loc, data.hero.flags.heroIcon||"hero.png");
+                this.drawThumbnail(data.floorId, 'ui', core.maps.load(data.maps, data.floorId).blocks, (2*i+1)*u-size/2, 50, size, data.hero.loc.x, data.hero.loc.y, data.hero.loc, data.hero.flags.heroIcon||"hero.png");
                 core.fillText('ui', core.formatDate(new Date(data.time)), (2*i+1)*u, 65+size, '#FFFFFF', '10px Verdana');
             }
             else {
@@ -1691,7 +1742,7 @@ ui.prototype.drawSLPanel = function(index) {
             core.fillText('ui', name+id, (2*i-5)*u, 230, '#FFFFFF', "bold 17px Verdana");
             core.strokeRect('ui', (2*i-5)*u-size/2, 245, size, size, i==offset?strokeColor:'#FFFFFF', i==offset?6:2);
             if (core.isset(data) && core.isset(data.floorId)) {
-                this.drawThumbnail(data.floorId, 'ui', core.maps.load(data.maps, data.floorId).blocks, (2*i-5)*u-size/2, 245, size, data.hero.loc, data.hero.flags.heroIcon||"hero.png");
+                this.drawThumbnail(data.floorId, 'ui', core.maps.load(data.maps, data.floorId).blocks, (2*i-5)*u-size/2, 245, size, data.hero.loc.x, data.hero.loc.y, data.hero.loc, data.hero.flags.heroIcon||"hero.png");
                 core.fillText('ui', core.formatDate(new Date(data.time)), (2*i-5)*u, 260+size, '#FFFFFF', '10px Verdana');
             }
             else {
@@ -1709,20 +1760,27 @@ ui.prototype.drawSLPanel = function(index) {
 }
 
 ////// 绘制一个缩略图 //////
-ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroLoc, heroIcon) {
+ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, centerX, centerY, heroLoc, heroIcon) {
-    core.clearMap(canvas, x, y, size, size);
+
+    var mw = core.floors[floorId].width || 13;
+    var mh = core.floors[floorId].height || 13;
+    // 绘制到tempCanvas上面
+    var tempCanvas = core.bigmap.tempCanvas;
+    var tempWidth = mw*32, tempHeight = mh*32;
+    tempCanvas.canvas.width = tempWidth;
+    tempCanvas.canvas.height = tempHeight;
+    tempCanvas.clearRect(0, 0, tempWidth, tempHeight);
+
     var groundId = core.floors[floorId].defaultGround || "ground";
     var blockIcon = core.material.icons.terrains[groundId];
     var blockImage = core.material.images.terrains;
-    var persize = size/13;
+    // background
-    var mw = core.floors[floorId].width || 13;
+    for (var i=0;i<mw;i++) {
-    var mh = core.floors[floorId].height || 13;
+        for (var j=0;j<mh;j++) {
-    for (var i=0;i<13;i++) {
+            tempCanvas.drawImage(blockImage, 0, blockIcon * 32, 32, 32, i * 32, j * 32, 32, 32);
-        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);
         }
     }
-
+    // background image
     var images = [];
     if (core.isset(core.floors[floorId].images)) {
         images = core.floors[floorId].images;
@@ -1730,62 +1788,64 @@ ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, heroL
             images = [[0, 0, images]];
         }
     }
-
     images.forEach(function (t) {
-        var ratio = size/416;
         var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2];
         if (core.isset(dx) && core.isset(dy) && core.isset(core.material.images.images[p])) {
-            dx*=32; dy*=32;
             var image = core.material.images.images[p];
             if (!t[3])
-                core.canvas.ui.drawImage(image, x+dx*ratio, y+dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height));
+                tempCanvas.drawImage(image, 32 * dx, 32 * dy, image.width, image.height);
             else if (t[3]==2)
-                core.canvas.ui.drawImage(image, 0, image.height-32, image.width, 32,
+                tempCanvas.drawImage(image, 0, image.height-32, image.width, 32,
-                    x+dx * ratio, y+(dy + image.height - 32) * ratio, ratio*image.width, 32*ratio);
+                    32 * dx, 32 * dy + image.height - 32, image.width, 32);
         }
     })
-
+    // draw block
     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)) {
             if (block.event.cls == 'autotile') {
-                core.drawAutotile(core.canvas.ui, mapArray, block, persize, x, y);
+                core.drawAutotile(tempCanvas, mapArray, block, 32, 0, 0);
             }
             else {
                 if (block.event.id!='none') {
                     var blockIcon = core.material.icons[block.event.cls][block.event.id];
                     var blockImage = core.material.images[block.event.cls];
                     var height = block.event.height || 32;
-                    core.canvas[canvas].drawImage(blockImage, 0, blockIcon * height, 32, height, x + block.x * persize, y + block.y * persize + (persize-persize*height/32), persize, persize * height/32);
+                    tempCanvas.drawImage(blockImage, 0, blockIcon * height, 32, height, 32*block.x, 32*block.y + 32 - height, 32, height);
                 }
             }
         }
     }
-
+    // draw hero
     if (core.isset(heroLoc)) {
         if (!core.isset(core.material.images.images[heroIcon]))
             heroIcon = "hero.png";
         var icon = core.material.icons.hero[heroLoc.direction];
         var height = core.material.images.images[heroIcon].height/4;
-        var realHeight = persize*height/32;
+        tempCanvas.drawImage(core.material.images.images[heroIcon], icon.stop * 32, icon.loc * height, 32, height, 32*heroLoc.x, 32*heroLoc.y+32-height, 32, height);
-        core.canvas[canvas].drawImage(core.material.images.images[heroIcon], icon.stop * 32, icon.loc * height, 32, height, x+persize*heroLoc.x, y+persize*heroLoc.y+persize-realHeight, persize, realHeight);
     }
-
+    // draw fg
     images.forEach(function (t) {
-        var ratio = size/416;
         var dx=parseInt(t[0]), dy=parseInt(t[1]), p=t[2];
         if (core.isset(dx) && core.isset(dy) && core.isset(core.material.images.images[p])) {
-            dx*=32; dy*=32;
             var image = core.material.images.images[p];
             if (t[3]==1)
-                core.canvas.ui.drawImage(image, x+dx*ratio, y+dy*ratio, Math.min(size-dx*ratio, ratio*image.width), Math.min(size-dy*ratio, ratio*image.height));
+                tempCanvas.drawImage(image, 32*dx, 32*dy, image.width, image.height);
             else if (t[3]==2)
-                core.canvas.ui.drawImage(image, 0, 0, image.width, image.height-32,
+                tempCanvas.drawImage(image, 0, 0, image.width, image.height-32,
-                    x+dx * ratio, y+dy * ratio, ratio * image.width, ratio * (image.height-32));
+                    32*dx, 32*dy, image.width, image.height-32);
         }
     })
 
+    // draw to canvas
+    core.clearMap(canvas, x, y, size, size);
+    if (!core.isset(centerX)) centerX=parseInt(mw/2);
+    if (!core.isset(centerY)) centerY=parseInt(mh/2);
+
+    var offsetX = core.clamp(centerX-6, 0, mw), offsetY = core.clamp(centerY-6, 0, mh);
+    // offsetX~offsetX+12; offsetY~offsetY+12
+    core.canvas[canvas].drawImage(tempCanvas.canvas, offsetX*32, offsetY*32, 416, 416, x, y, size, size);
 }
 
 ui.prototype.drawKeyBoard = function () {

libs/utils.js

@@ -354,7 +354,7 @@ utils.prototype.subarray = function (a, b) {
 
 utils.prototype.clamp = function (x, a, b) {
     var min=Math.min(a, b), max=Math.max(a, b);
-    return Math.min(Math.max(x, min), max);
+    return Math.min(Math.max(x||0, min), max);
 }
 
 ////// Base64加密 //////