jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Draw Thumbnail & View maps

Browse Source
This commit is contained in:
oc 2018-08-26 02:28:06 +08:00
parent 23062fde85
commit 7043c950d8
5 changed files with 164 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
libs/actions.js
View File

@ -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;
if(y<=4) {
nextId++;
while (nextId<core.floorIds.length && nextId!=now && core.floors[core.floorIds[nextId]].cannotViewMap)
nextId++;
if (nextId<core.floorIds.length)
core.ui.drawMaps(nextId);
var index = core.status.event.data.index;
var cx = core.status.event.data.x, cy = core.status.event.data.y;
if (x>=2 && x<=10 && y<=1) {
core.ui.drawMaps(index, cx, cy-1);
return;
}
else if (y>=8) {
nextId--;
while (nextId>=0 && nextId!=now && core.floors[core.floorIds[nextId]].cannotViewMap)
nextId--;
if (nextId>=0)
core.ui.drawMaps(nextId);
if (x>=2 && x<=10 && y>=11) {
core.ui.drawMaps(index, cx, cy+1);
return;
}
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) {
this.clickViewMaps(6,2);
}
else if (keycode==39 || keycode==40 || keycode==34) {
this.clickViewMaps(6,10);
}
if (!core.isset(core.status.event.data)) return;
if (keycode==38||keycode==33) this.clickViewMaps(6, 3);
if (keycode==40||keycode==34) this.clickViewMaps(6, 9);
if (keycode==87) this.clickViewMaps(6,0);
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:

10
libs/core.js
View File

@ -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);
// 设置勇士高度

14
libs/maps.js
View File

@ -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.top = (dy*core.domStyle.scale)+"px";
gif.style.left = (32*dx*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);
}
}
})

138
libs/ui.js
View File

@ -1476,30 +1476,81 @@ ui.prototype.drawFly = function(page) {
}
////// 绘制浏览地图界面 //////
ui.prototype.drawMaps = function (index) {
if (!core.isset(index)) index=core.floorIds.indexOf(core.status.floorId);
ui.prototype.drawMaps = function (index, x, y) {
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.id = 'viewMaps';
core.status.event.data = index;
var floorId = core.floorIds[index];
core.status.event.data = {"index": index, "x": x, "y": y};
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) {
core.clearMap(canvas, x, y, size, size);
ui.prototype.drawThumbnail = function(floorId, canvas, blocks, x, y, size, centerX, centerY, heroLoc, heroIcon) {
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;
var mw = core.floors[floorId].width || 13;
var mh = core.floors[floorId].height || 13;
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);
// background
for (var i=0;i<mw;i++) {
for (var j=0;j<mh;j++) {
tempCanvas.drawImage(blockImage, 0, blockIcon * 32, 32, 32, i * 32, j * 32, 32, 32);
}
}
// 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,
x+dx * ratio, y+(dy + image.height - 32) * ratio, ratio*image.width, 32*ratio);
tempCanvas.drawImage(image, 0, image.height-32, image.width, 32,
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;
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);
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);
}
// 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,
x+dx * ratio, y+dy * ratio, ratio * image.width, ratio * (image.height-32));
tempCanvas.drawImage(image, 0, 0, image.width, 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 () {

2
libs/utils.js
View File

@ -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加密 //////