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

Dynamic canvas

Browse Source
This commit is contained in:
ckcz123 2018-12-17 14:38:34 +08:00
parent fd08290b73
commit f26bc14bf1
11 changed files with 199 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_server/blockly/MotaAction.g4
View File

@ -1290,7 +1290,7 @@ loadBgm_s
/* loadBgm_s
tooltip : loadBgm: 预加载某个背景音乐，之后可以直接播放
helpUrl : https://h5mota.com/games/template/docs/#/event?id=playbgm%EF%BC%9A%E6%92%AD%E6%94%BE%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90
helpUrl : https://h5mota.com/games/template/docs/#/event?id=loadBgm%ef%bc%9a%e9%a2%84%e5%8a%a0%e8%bd%bd%e4%b8%80%e4%b8%aa%e8%83%8c%e6%99%af%e9%9f%b3%e4%b9%90
default : ["bgm.mp3"]
colour : this.soundColor
var code = '{"type": "loadBgm", "name": "'+EvalString_0+'"},\n';
@ -1303,7 +1303,7 @@ freeBgm_s
/* freeBgm_s
tooltip : freeBgm: 释放背景音乐的缓存
helpUrl : https://h5mota.com/games/template/docs/#/event?id=playbgm%EF%BC%9A%E6%92%AD%E6%94%BE%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90
helpUrl : https://h5mota.com/games/template/docs/#/event?id=freeBgm%ef%bc%9a%e9%87%8a%e6%94%be%e4%b8%80%e4%b8%aa%e8%83%8c%e6%99%af%e9%9f%b3%e4%b9%90%e7%9a%84%e7%bc%93%e5%ad%98
default : ["bgm.mp3"]
colour : this.soundColor
var code = '{"type": "freeBgm", "name": "'+EvalString_0+'"},\n';

1
editor-mobile.html
View File

@ -445,7 +445,6 @@
<canvas class='gameCanvas' id='curtain' 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="dymCanvas"></div>
</div>
</div>
<!-- */</script> -->

1
editor.html
View File

@ -430,7 +430,6 @@
<canvas class='gameCanvas' id='curtain' 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="dymCanvas"></div>
</div>
</div>
<!-- */</script> -->

1
index.html
View File

@ -145,7 +145,6 @@
<canvas class='gameCanvas' id='curtain' 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="dymCanvas"></div>
</div>
</div>
<script src='libs/thirdparty/mid.min.js'></script>

105
libs/control.js
View File

@ -1340,108 +1340,13 @@ control.prototype.checkBlock = function () {
////// 阻击事件（动画效果） //////
control.prototype.snipe = function (snipes) {
var scan = {
'up': {'x': 0, 'y': -1},
'left': {'x': -1, 'y': 0},
'down': {'x': 0, 'y': 1},
'right': {'x': 1, 'y': 0}
};
snipes.forEach(function (snipe) {
var x=snipe.x, y=snipe.y, direction = snipe.direction;
snipe.nx = x+scan[snipe.direction].x;
snipe.ny = y+scan[snipe.direction].y;
core.removeGlobalAnimate(x, y);
var block = core.getBlock(x,y).block;
var cls = block.event.cls;
var height = block.event.height || 32;
snipe.animate = block.event.animate || 1;
snipe.blockIcon = core.material.icons[cls][block.event.id];
snipe.blockImage = core.material.images[cls];
snipe.height = height;
var damageString = core.enemys.getDamageString(block.event.id, x, y);
var damage = damageString.damage, color = damageString.color;
snipe.damage = damage;
snipe.color = color;
snipe.block = core.clone(block);
})
var finishSnipe = function () {
// 阻击改成moveBlock事件完成
var actions = [];
snipes.forEach(function (t) {
core.removeBlock(t.x, t.y);
var nBlock = core.clone(t.block);
nBlock.x = t.nx; nBlock.y = t.ny;
core.status.thisMap.blocks.push(nBlock);
core.drawBlock(nBlock);
core.addGlobalAnimate(nBlock);
actions.push({"type": "move", "loc": [t.x, t.y], "steps": [t.direction], "time": 500, "keep": true, "async": true});
});
core.syncGlobalAnimate();
core.updateStatusBar();
return;
}
if (core.status.replay.replaying) {
finishSnipe();
}
else {
core.waitHeroToStop(function() {
core.lockControl();
var time = 500, step = 0;
var animateCurrent = 0;
var animateTime = 0;
core.canvas.damage.textAlign = 'left';
var animate=window.setInterval(function() {
step++;
animateTime += time / 16;
if (animateTime >= core.values.animateSpeed) {
animateCurrent++;
animateTime = 0;
}
snipes.forEach(function (snipe) {
var x=snipe.x, y=snipe.y, direction = snipe.direction;
var dx = scan[direction].x*2*step, dy = scan[direction].y*2*step;
var nowX = 32*x+dx, nowY = 32*y+dy;
// 清空上一次
core.clearMap('damage', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32);
core.canvas.event.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32);
core.canvas.event2.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y-32, 32, 32)
core.drawBlock(snipe.block, animateCurrent, dx, dy);
if (core.hasItem('book')) {
// drawDamage
core.fillBoldText(core.canvas.damage, snipe.damage, snipe.color, nowX+1, nowY+31);
}
})
if (step==16) { // 移动完毕
clearInterval(animate);
finishSnipe();
// 不存在自定义事件
if (core.status.event.id==null)
core.unLockControl();
}
}, time/16);
});
}
actions.push({"type": "waitAsync"});
core.insertAction(actions);
}
////// 更改天气效果 //////

4
libs/core.js
View File

@ -720,6 +720,10 @@ core.prototype.deleteCanvas = function (name) {
core.ui.deleteCanvas(name);
}
core.prototype.deleteAllCanvas = function () {
core.ui.deleteAllCanvas();
}
core.prototype.drawBlock = function (block, animate, dx, dy) {
core.maps.drawBlock(block, animate, dx, dy);
}

21
libs/events.js
View File

@ -9,7 +9,11 @@ events.prototype.init = function () {
this.eventdata = functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a.events;
this.events = {
'battle': function (data, core, callback) {
//core.autosave(true);
// 正在执行自定义事件：不允许战斗
if (core.status.event.id == 'action') {
if (core.isset(callback)) callback();
return;
}
core.battle(data.event.id, data.x, data.y);
if (core.isset(callback))
callback();
@ -20,13 +24,22 @@ events.prototype.init = function () {
callback();
},
'openDoor': function (data, core, callback) {
//core.autosave(true);
// 正在执行自定义事件：不允许开门
if (core.status.event.id == 'action') {
if (core.isset(callback)) callback();
return;
}
core.openDoor(data.event.id, data.x, data.y, true, function () {
if (core.isset(callback)) callback();
core.replay();
});
},
'changeFloor': function (data, core, callback) {
// 正在执行自定义事件：不允许切换楼层
if (core.status.event.id == 'action') {
if (core.isset(callback)) callback();
return;
}
var heroLoc = {};
if (core.isset(data.event.data.loc))
heroLoc = {'x': data.event.data.loc[0], 'y': data.event.data.loc[1]};
@ -1691,13 +1704,11 @@ events.prototype.moveImage = function (code, to, opacityVal, time, callback) {
var step = 0;
var per_time = 10, steps = parseInt(time / per_time);
var preOpac = parseFloat(core.dymCanvas[name].canvas.style.opacity), opacStep;
var preOpac = parseFloat(core.dymCanvas[name].canvas.style.opacity), opacStep = 0;
if (core.isset(opacityVal)) {
opacityVal = core.calValue(opacityVal);
opacStep = (opacityVal - preOpac) / steps;
}
else
opacStep = 0;
var moveStep = function () {
preOpac += opacStep;

338
libs/maps.js
View File

@ -370,29 +370,13 @@ maps.prototype.drawBlock = function (block, animate, dx, dy) {
// none：空地
if (block.event.id=='none') return;
var cls = block.event.cls, height = block.event.height || 32;
var cls = block.event.cls;
var image, x, y;
var blockInfo = this.__getBlockInfo(block);
if (blockInfo == null) return;
var image = blockInfo.image, x = blockInfo.bx, y = blockInfo.by, height = blockInfo.height;
if (!blockInfo.isTileset) x = (animate||0)%(block.event.animate||1);
if (cls == 'tileset') {
var offset = core.icons.getTilesetOffset(block.event.id);
if (offset == null) return;
image = core.material.images.tilesets[offset.image];
x = offset.x;
y = offset.y;
}
else if (cls == 'autotile') return;
// 空气墙的单独处理
else if (block.id==17) {
if (!core.isset(core.material.images.airwall)) return;
image = core.material.images.airwall;
x = y = 0;
}
else {
image = core.material.images[cls];
x = (animate||0)%(block.event.animate||1);
y = core.material.icons[cls][block.event.id];
}
dx = dx || 0;
dy = dy || 0;
@ -776,6 +760,93 @@ maps.prototype.getBlockCls = function (x, y, floorId, showDisable) {
return null;
}
maps.prototype.__getBlockInfo = function (block) {
var image, bx, by, height = block.event.height || 32;
var faceIds = {}, isTileset = false;
if (block.event.cls == 'tileset') {
var offset = core.icons.getTilesetOffset(block.event.id);
if (offset==null) {
return null;
}
bx = offset.x;
by = offset.y;
image = core.material.images.tilesets[offset.image];
isTileset = true;
}
// 不支持autotile
else if (block.event.cls == 'autotile') {
return null;
}
// 空气墙；忽略事件
else if (block.id==17) {
if (!core.isset(core.material.images.airwall)) return null;
image = core.material.images.airwall;
bx = by = 0;
}
else {
image = core.material.images[block.event.cls];
bx = 0;
by = core.material.icons[block.event.cls][block.event.id];
faceIds = block.event.faceIds||{};
}
return {
"image": image,
"bx": bx,
"by": by,
"height": height,
"isTileset": isTileset,
"faceIds": faceIds
};
}
maps.prototype.__moveBlockCanvas = function (image, bx, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas) {
// 重绘block & 重定位
if (headCanvas != null) {
core.dymCanvas[headCanvas].clearRect(0, 0, 32, height);
core.dymCanvas[headCanvas].drawImage(image, bx * 32, by * height, 32, height - 32, 0, 0, 32, height - 32);
core.relocateCanvas(headCanvas, nowX - core.bigmap.offsetX, nowY+32-height - core.bigmap.offsetY);
core.setOpacity(headCanvas, opacity);
}
if (bodyCanvas != null) {
core.dymCanvas[bodyCanvas].clearRect(0, 0, 32, 32);
core.dymCanvas[bodyCanvas].drawImage(image, bx * 32, by * height + height - 32, 32, 32, 0, 0, 32, 32);
core.relocateCanvas(bodyCanvas, nowX - core.bigmap.offsetX, nowY - core.bigmap.offsetY);
core.setOpacity(bodyCanvas, opacity);
}
if (damageCanvas != null) {
core.relocateCanvas(damageCanvas, nowX - core.bigmap.offsetX, nowY - core.bigmap.offsetY);
core.setOpacity(damageCanvas, opacity);
}
}
maps.prototype.__initBlockCanvas = function (block, height, x, y) {
var headCanvas = null, bodyCanvas = 'block'+x+"_"+y, damageCanvas = null;
core.createCanvas(bodyCanvas, 0, 0, 32, 32, 35);
if (height > 32) {
headCanvas = "blockHead"+x+"_"+y;
core.createCanvas(headCanvas, 0, 0, 32, height - 32, 55);
}
// 显伤
var damage = null, damageColor = null;
if ((block.event.cls == 'enemys' || block.event.cls == 'enemy48') && core.hasItem('book')
&& block.event.displayDamage !== false) {
var damageString = core.enemys.getDamageString(block.event.id, x, y);
damage = damageString.damage; damageColor = damageString.color;
}
if (damage != null) {
damageCanvas = "blockDamage"+x+"_"+y;
core.createCanvas(damageCanvas, 0, 0, 32, 32, 65);
core.dymCanvas[damageCanvas].textAlign = 'left';
core.fillBoldText(core.dymCanvas[damageCanvas], damage, damageColor, 1, 31);
}
return {
"headCanvas": headCanvas,
"bodyCanvas": bodyCanvas,
"damageCanvas": damageCanvas
}
}
////// 显示移动某块的动画，达到{“type”:”move”}的效果 //////
maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
time = time || 500;
@ -791,35 +862,13 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
core.removeBlock(x,y);
block=block.block;
var blockInfo = this.__getBlockInfo(block);
if (blockInfo == null) {
if (core.isset(callback)) callback();
return;
}
var image = blockInfo.image, bx = blockInfo.bx, by = blockInfo.by, height = blockInfo.height, isTileset = blockInfo.isTileset, faceIds = blockInfo.faceIds;
var image, bx, by, height = block.event.height || 32;
var faceIds = {};
if (block.event.cls == 'tileset') {
var offset = core.icons.getTilesetOffset(block.event.id);
if (offset==null) {
if (core.isset(callback)) callback();
return;
}
bx = offset.x;
by = offset.y;
image = core.material.images.tilesets[offset.image];
}
// 不支持autotile
else if (block.event.cls == 'autotile') {
if (core.isset(callback)) callback();
return;
}
// 空气墙；忽略事件
else if (block.id==17) {
if (core.isset(callback)) callback();
return;
}
else {
image = core.material.images[block.event.cls];
bx = 0;
by = core.material.icons[block.event.cls][block.event.id];
faceIds = block.event.faceIds||{};
}
// 要运行的轨迹：将steps展开
var moveSteps=[];
steps.forEach(function (e) {
@ -846,32 +895,12 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
'right': {'x': 1, 'y': 0}
};
var animateValue = block.event.animate || 1;
var animateCurrent = 0;
if (block.event.cls=='tileset') {
animateCurrent = bx;
}
var animateTime = 0;
var animateValue = block.event.animate || 1, animateCurrent = isTileset?bx:0, animateTime = 0;
var blockCanvas = this.__initBlockCanvas(block, height, x, y);
var headCanvas = blockCanvas.headCanvas, bodyCanvas = blockCanvas.bodyCanvas, damageCanvas = blockCanvas.damageCanvas;
var opacity = 1;
var alpha = 1, name = 'move'+x+'_'+y;
core.createCanvas(name, block.x - core.bigmap.offsetX, block.y * 32 +32 - height - core.bigmap.offsetY, 32, height, 45);
core.dymCanvas[name].textAlign = 'left';
// 显伤
var damage = null, damageColor = null;
if ((block.event.cls == 'enemys' || block.event.cls == 'enemy48') && core.hasItem('book')) {
var damageString = core.enemys.getDamageString(block.event.id, x, y);
damage = damageString.damage; damageColor = damageString.color;
}
var draw = function() {
core.dymCanvas[name].clearRect(0, 0, 32, height);
core.dymCanvas[name].drawImage(image, animateCurrent*32, by*height, 32, height, 0, 0, 32, height);
// 绘制显伤
if (damage != null)
core.fillBoldText(core.dymCanvas[name], damage, damageColor, 1, height-1);
};
draw();
core.maps.__moveBlockCanvas(image, animateCurrent, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas);
var animate=window.setInterval(function() {
@ -881,31 +910,27 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
animateTime = 0;
if (animateCurrent>=animateValue) animateCurrent=0;
}
if (block.event.cls=='tileset') {
animateCurrent = bx;
}
if (isTileset) animateCurrent = bx;
// 已经移动完毕，消失
if (moveSteps.length==0) {
if (keep) alpha=0;
else alpha -= 0.06;
if (alpha<=0) {
if (keep) opacity=0;
else opacity -= 0.06;
if (opacity<=0) {
delete core.animateFrame.asyncId[animate];
clearInterval(animate);
core.deleteCanvas(name);
core.deleteCanvas(headCanvas);
core.deleteCanvas(bodyCanvas);
core.deleteCanvas(damageCanvas);
// 不消失
if (keep) {
core.setBlock(id, nowX/32, nowY/32);
core.showBlock(nowX/32, nowY/32);
}
else {
if (block.event.cls == 'enemys' || block.event.cls == 'enemy48')
core.clearMap('damage', nowX, nowY, 32, 32);
}
if (core.isset(callback)) callback();
}
else {
core.dymCanvas[name].canvas.style.opacity = alpha;
core.maps.__moveBlockCanvas(image, animateCurrent, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas);
}
}
else {
@ -924,8 +949,7 @@ maps.prototype.moveBlock = function(x,y,steps,time,keep,callback) {
nowX+=scan[direction].x*2;
nowY+=scan[direction].y*2;
// 移动
core.relocateCanvas(name, nowX, nowY-height+32);
draw();
core.maps.__moveBlockCanvas(image, animateCurrent, by, height, nowX, nowY, opacity, headCanvas, bodyCanvas, damageCanvas);
if (step==16) {
// 该移动完毕，继续
step=0;
@ -952,36 +976,12 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) {
core.removeBlock(sx,sy);
block=block.block;
var image, bx, by, height = block.event.height || 32;
if (block.event.cls == 'tileset') {
var offset = core.icons.getTilesetOffset(block.event.id);
if (offset==null) {
var blockInfo = this.__getBlockInfo(block);
if (blockInfo == null) {
if (core.isset(callback)) callback();
return;
}
bx = offset.x;
by = offset.y;
image = core.material.images.tilesets[offset.image];
}
// 不支持autotile
else if (block.event.cls == 'autotile') {
if (core.isset(callback)) callback();
return;
}
// 空气墙；忽略事件
else if (block.id==17) {
if (core.isset(callback)) callback();
return;
}
else {
image = core.material.images[block.event.cls];
bx = 0;
by = core.material.icons[block.event.cls][block.event.id];
}
var alpha = 1;
core.setAlpha('route', alpha);
core.canvas.route.drawImage(image, bx*32, by * height, 32, height, block.x * 32, block.y * 32 +32 - height, 32, height);
var image = blockInfo.image, bx = blockInfo.bx, by = blockInfo.by, height = blockInfo.height, isTileset = blockInfo.isTileset, faceIds = blockInfo.faceIds;
core.playSound('jump.mp3');
@ -1009,35 +1009,27 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) {
curry = (curry * jump_count + ey) / (jump_count + 1.0);
}
var animateValue = block.event.animate || 1;
var animateCurrent = 0;
var animateTime = 0;
var blockCanvas = this.__initBlockCanvas(block, height, sx, sy);
var headCanvas = blockCanvas.headCanvas, bodyCanvas = blockCanvas.bodyCanvas, damageCanvas = blockCanvas.damageCanvas;
var opacity = 1;
core.maps.__moveBlockCanvas(image, bx, by, height, drawX(), drawY(), opacity, headCanvas, bodyCanvas, damageCanvas);
var animate=window.setInterval(function() {
animateTime += time / 16 / core.status.replay.speed;
if (animateTime >= core.values.animateSpeed) {
animateCurrent++;
animateTime = 0;
if (animateCurrent >= animateValue) animateCurrent = 0;
}
if (block.event.cls=='tileset') {
animateCurrent = bx;
}
if (jump_count>0) {
core.clearMap('route', drawX(), drawY()-height+32, 32, height);
updateJump();
core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, drawX(), drawY()-height+32, 32, height);
core.maps.__moveBlockCanvas(image, bx, by, height, drawX(), drawY(), opacity, headCanvas, bodyCanvas, damageCanvas);
}
else {
if (keep) alpha=0;
else alpha -= 0.06;
core.clearMap('route', drawX(), drawY()-height+32, 32, height);
if (alpha<=0) {
if (keep) opacity=0;
else opacity -= 0.06;
if (opacity<=0) {
delete core.animateFrame.asyncId[animate];
clearInterval(animate);
core.clearMap('route');
core.setAlpha('route', 1);
core.deleteCanvas(headCanvas);
core.deleteCanvas(bodyCanvas);
core.deleteCanvas(damageCanvas);
if (keep) {
core.setBlock(id, ex, ey);
core.showBlock(ex, ey);
@ -1045,9 +1037,7 @@ maps.prototype.jumpBlock = function(sx,sy,ex,ey,time,keep,callback) {
if (core.isset(callback)) callback();
}
else {
core.setAlpha('route', alpha);
core.canvas.route.drawImage(image, animateCurrent * 32, by * height, 32, height, drawX(), drawY()-height+32, 32, height);
core.setAlpha('route', 1);
core.maps.__moveBlockCanvas(image, bx, by, height, drawX(), drawY(), opacity, headCanvas, bodyCanvas, damageCanvas);
}
}
@ -1068,66 +1058,47 @@ maps.prototype.animateBlock = function (loc,type,time,callback) {
var block = core.getBlock(t[0],t[1],null,true);
if (block==null) return;
block=block.block;
var image, bx, by, height = block.event.height || 32;
if (block.event.cls == 'tileset') {
var offset = core.icons.getTilesetOffset(block.event.id);
if (offset==null) {
if (core.isset(callback)) callback();
return;
}
bx = offset.x;
by = offset.y;
image = core.material.images.tilesets[offset.image];
}
// 不支持autotile
else if (block.event.cls == 'autotile') {
return;
}
// 空气墙，忽略事件
else if (block.id==17) return;
else {
image = core.material.images[block.event.cls];
bx = 0;
by = core.material.icons[block.event.cls][block.event.id];
}
var blockInfo = core.maps.__getBlockInfo(block);
if (blockInfo == null) return;
var blockCanvas = core.maps.__initBlockCanvas(block, blockInfo.height, t[0], t[1]);
var headCanvas = blockCanvas.headCanvas, bodyCanvas = blockCanvas.bodyCanvas, damageCanvas = blockCanvas.damageCanvas;
list.push({
'x': t[0], 'y': t[1], 'height': height,
'bx': bx, 'by': by, 'image': image
})
})
'x': t[0], 'y': t[1], 'height': blockInfo.height,
'bx': blockInfo.bx, 'by': blockInfo.by, 'image': blockInfo.image,
'headCanvas': headCanvas, 'bodyCanvas': bodyCanvas, 'damageCanvas': damageCanvas
});
});
if (list.length==0) {
if (core.isset(callback)) callback();
return;
}
// core.status.replay.animate=true;
var clear = function () {
list.forEach(function (t) {
core.clearMap('route', t.x*32, t.y*32+32-t.height, 32, t.height);
})
}
var opacity = 0;
if (type=='hide') opacity=1;
var draw = function () {
list.forEach(function (t) {
core.canvas.route.drawImage(t.image, t.bx*32, t.by*t.height, 32, t.height, t.x*32, t.y*32+32-t.height, 32, t.height);
core.maps.__moveBlockCanvas(t.image, t.bx, t.by, t.height, t.x*32, t.y*32, opacity, t.headCanvas, t.bodyCanvas, t.damageCanvas);
})
}
var alpha = 0;
if (type=='hide') alpha=1;
core.setAlpha('route', alpha);
};
draw();
var per_time = 10, steps = parseInt(time / per_time), delta = 1 / steps;
var animate = setInterval(function () {
if (type=='show') alpha += delta;
else alpha -= delta;
clear();
if (alpha >=1 || alpha<=0) {
if (type=='show') opacity += delta;
else opacity -= delta;
if (opacity >=1 || opacity<=0) {
delete core.animateFrame.asyncId[animate];
clearInterval(animate);
core.setAlpha('route', 1);
list.forEach(function (t) {
core.deleteCanvas(t.headCanvas);
core.deleteCanvas(t.bodyCanvas);
core.deleteCanvas(t.damageCanvas);
});
if (type == 'show') {
loc.forEach(function (t) {
core.showBlock(t[0],t[1],data.floorId);
@ -1141,7 +1112,6 @@ maps.prototype.animateBlock = function (loc,type,time,callback) {
if (core.isset(callback)) callback();
}
else {
core.setAlpha('route', alpha);
draw();
}
}, per_time);

19
libs/ui.js
View File

@ -2796,7 +2796,6 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) {
newCanvas.style.zIndex = z;
newCanvas.style.position = 'absolute';
core.dymCanvas[name] = newCanvas.getContext('2d');
core.dom.dymCanvas.appendChild(newCanvas);
core.dymCanvas._list.push({
"id": name,
"style": {
@ -2804,10 +2803,12 @@ ui.prototype.createCanvas = function (name, x, y, width, height, z) {
"top": y,
}
});
core.dom.gameDraw.appendChild(newCanvas);
}
////// canvas查找 //////
ui.prototype.findCanvas = function (name) {
if (!core.isset(name)) return -1;
for (var index = 0; index < core.dymCanvas._list.length; index++) {
if (core.dymCanvas._list[index].id == name)
return index;
@ -2817,6 +2818,7 @@ ui.prototype.findCanvas = function (name) {
////// canvas重定位 //////
ui.prototype.relocateCanvas = function (name, x, y) {
if (!core.isset(name)) return;
var index = core.findCanvas(name);
if (index < 0) return;
if (core.isset(x)) {
@ -2831,6 +2833,7 @@ ui.prototype.relocateCanvas = function (name, x, y) {
////// canvas重置 //////
ui.prototype.resizeCanvas = function (name, width, height) {
if (!core.isset(name)) return;
var dstCanvas = core.dymCanvas[name].canvas;
if (core.isset(width)) {
dstCanvas.width = width;
@ -2843,9 +2846,19 @@ ui.prototype.resizeCanvas = function (name, width, height) {
}
////// canvas删除 //////
ui.prototype.deleteCanvas = function (name) {
if (!core.isset(name)) return;
var index = core.findCanvas(name);
if (index == -1) return;
core.dom.dymCanvas.removeChild(core.dom.dymCanvas.childNodes[index]);
core.dymCanvas[name] = null;
core.dom.gameDraw.removeChild(core.dymCanvas[name].canvas);
delete core.dymCanvas[name];
core.dymCanvas._list.splice(index,1);
}
////// 删除所有动态canvas //////
ui.prototype.deleteAllCanvas = function () {
core.dymCanvas._list.forEach(function (t) {
core.dom.gameDraw.removeChild(core.dymCanvas[t.id].canvas);
delete core.dymCanvas[t.id];
});
core.dymCanvas._list = [];
}

1
main.js
View File

@ -69,7 +69,6 @@ function main() {
'skillCol': document.getElementById('skillCol'),
'hard': document.getElementById('hard'),
'statusCanvas': document.getElementById('statusCanvas'),
'dymCanvas': document.getElementById('dymCanvas'),
};
this.mode = 'play';
this.loadList = [

4
styles.css
View File

@ -306,10 +306,6 @@ p#name {
z-index: 170;
}
#dymCanvas {
position: absolute;
}
.clearfix:before,
.clearfix:after {
content: ".";