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

Update canvas fg -> damage

Browse Source
This commit is contained in:
ckcz123 2018-09-13 14:46:49 +08:00
parent 3d188025ca
commit 97aa203d94
7 changed files with 53 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api.md
View File

@ -162,7 +162,7 @@ core.trigger(x, y) [异步]
core.clearMap(mapName) core.clearMap(mapName)
清空某个画布图层。 清空某个画布图层。
mapName可为'bg', 'event', 'fg', 'event2', 'hero', 'animate', 'weather', 'ui', 'data', 'all'之一。 mapName可为'bg', 'event', 'hero', 'event2', 'fg', 'damage', 'animate', 'weather', 'ui', 'data', 'all'之一。
如果mapName为'all'，则为清空所有画布；否则只清空对应的画布。 如果mapName为'all'，则为清空所有画布；否则只清空对应的画布。

7
docs/personalization.md
View File

@ -10,11 +10,12 @@ HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们
所有图层从低往高依次如下： 所有图层从低往高依次如下：
- bg：背景层；绘制地面素材，或者作为背景的图片素材 - bg：背景层；绘制背景图层素材bgmap，和背景贴图
- event：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理 - event：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理
- hero：勇士层；主要用来绘制勇士 - hero：勇士层；主要用来绘制勇士
- event2：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位），也可以用来绘制该层的前景图片素材 - event2：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位）
- fg：显伤层；主要用来绘制怪物显伤和领域显伤 - fg：前景层；绘制前景图层素材fgmap，和前景贴图
- damage：显伤层；主要用来绘制怪物显伤和领域显伤
- animate：动画层；主要用来绘制动画。showImage事件绘制的图片也是在这一层。 - animate：动画层；主要用来绘制动画。showImage事件绘制的图片也是在这一层。
- weather：天气层；主要用来绘制天气（雨/雪） - weather：天气层；主要用来绘制天气（雨/雪）
- curtain：色调层；用来控制当前楼层的画面色调 - curtain：色调层；用来控制当前楼层的画面色调

1
index.html
View File

@ -117,6 +117,7 @@
<canvas class='gameCanvas' id='hero' 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='event2' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='fg' width='416' height='416'></canvas> <canvas class='gameCanvas' id='fg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='damage' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='animate' 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='weather' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='route' width='416' height='416'></canvas> <canvas class='gameCanvas' id='route' width='416' height='416'></canvas>

6
libs/actions.js
View File

@ -1574,19 +1574,19 @@ actions.prototype.clickSwitchs = function (x,y) {
break; break;
case 3: case 3:
core.flags.displayEnemyDamage=!core.flags.displayEnemyDamage; core.flags.displayEnemyDamage=!core.flags.displayEnemyDamage;
core.updateFg(); core.updateDamage();
core.setLocalStorage('enemyDamage', core.flags.displayEnemyDamage); core.setLocalStorage('enemyDamage', core.flags.displayEnemyDamage);
core.ui.drawSwitchs(); core.ui.drawSwitchs();
break; break;
case 4: case 4:
core.flags.displayCritical=!core.flags.displayCritical; core.flags.displayCritical=!core.flags.displayCritical;
core.updateFg(); core.updateDamage();
core.setLocalStorage('critical', core.flags.displayCritical); core.setLocalStorage('critical', core.flags.displayCritical);
core.ui.drawSwitchs(); core.ui.drawSwitchs();
break; break;
case 5: case 5:
core.flags.displayExtraDamage=!core.flags.displayExtraDamage; core.flags.displayExtraDamage=!core.flags.displayExtraDamage;
core.updateFg(); core.updateDamage();
core.setLocalStorage('extraDamage', core.flags.displayExtraDamage); core.setLocalStorage('extraDamage', core.flags.displayExtraDamage);
core.ui.drawSwitchs(); core.ui.drawSwitchs();
break; break;

74
libs/control.js
View File

@ -1437,7 +1437,7 @@ control.prototype.snipe = function (snipes) {
var animateCurrent = 0; var animateCurrent = 0;
var animateTime = 0; var animateTime = 0;
core.canvas.fg.textAlign = 'left'; core.canvas.damage.textAlign = 'left';
var animate=window.setInterval(function() { var animate=window.setInterval(function() {
@ -1455,22 +1455,22 @@ control.prototype.snipe = function (snipes) {
var nowX = 32*x+dx, nowY = 32*y+dy; var nowX = 32*x+dx, nowY = 32*y+dy;
// 清空上一次 // 清空上一次
core.clearMap('fg', nowX-2*scan[direction].x, nowY-2*scan[direction].y, 32, 32); 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.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.canvas.event2.clearRect(nowX-2*scan[direction].x, nowY-2*scan[direction].y-32, 32, 32)
core.drawBlock(snipe.block, animateCurrent, dx, dy); core.drawBlock(snipe.block, animateCurrent, dx, dy);
if (core.hasItem('book')) { if (core.hasItem('book')) {
// drawFG // drawDamage
core.setFillStyle('fg', '#000000'); core.setFillStyle('damage', '#000000');
core.canvas.fg.fillText(snipe.damage, nowX + 2, nowY + 30); core.canvas.damage.fillText(snipe.damage, nowX + 2, nowY + 30);
core.canvas.fg.fillText(snipe.damage, nowX, nowY + 30); core.canvas.damage.fillText(snipe.damage, nowX, nowY + 30);
core.canvas.fg.fillText(snipe.damage, nowX + 2, nowY + 32); core.canvas.damage.fillText(snipe.damage, nowX + 2, nowY + 32);
core.canvas.fg.fillText(snipe.damage, nowX, nowY + 32); core.canvas.damage.fillText(snipe.damage, nowX, nowY + 32);
core.setFillStyle('fg', snipe.color); core.setFillStyle('damage', snipe.color);
core.canvas.fg.fillText(snipe.damage, nowX + 1, nowY + 31); core.canvas.damage.fillText(snipe.damage, nowX + 1, nowY + 31);
} }
}) })
@ -1589,18 +1589,18 @@ control.prototype.setFg = function(color, time, callback) {
} }
////// 更新全地图显伤 ////// ////// 更新全地图显伤 //////
control.prototype.updateFg = function () { control.prototype.updateDamage = function () {
if (!core.isset(core.status.thisMap) || !core.isset(core.status.thisMap.blocks)) return; if (!core.isset(core.status.thisMap) || !core.isset(core.status.thisMap.blocks)) return;
// 更新显伤 // 更新显伤
var mapBlocks = core.status.thisMap.blocks; var mapBlocks = core.status.thisMap.blocks;
core.clearMap('fg'); core.clearMap('damage');
// 没有怪物手册 // 没有怪物手册
if (!core.hasItem('book')) return; if (!core.hasItem('book')) return;
core.setFont('fg', "bold 11px Arial"); core.setFont('damage', "bold 11px Arial");
var hero_hp = core.status.hero.hp; var hero_hp = core.status.hero.hp;
if (core.flags.displayEnemyDamage || core.flags.displayCritical) { if (core.flags.displayEnemyDamage || core.flags.displayCritical) {
core.canvas.fg.textAlign = 'left'; core.canvas.damage.textAlign = 'left';
for (var b = 0; b < mapBlocks.length; b++) { for (var b = 0; b < mapBlocks.length; b++) {
var x = mapBlocks[b].x, y = mapBlocks[b].y; var x = mapBlocks[b].x, y = mapBlocks[b].y;
if (core.isset(mapBlocks[b].event) && mapBlocks[b].event.cls.indexOf('enemy')==0 if (core.isset(mapBlocks[b].event) && mapBlocks[b].event.cls.indexOf('enemy')==0
@ -1637,14 +1637,14 @@ control.prototype.updateFg = function () {
damage += "+"; damage += "+";
} }
core.setFillStyle('fg', '#000000'); core.setFillStyle('damage', '#000000');
core.canvas.fg.fillText(damage, 32 * x + 2, 32 * (y + 1) - 2); core.canvas.damage.fillText(damage, 32 * x + 2, 32 * (y + 1) - 2);
core.canvas.fg.fillText(damage, 32 * x, 32 * (y + 1) - 2); core.canvas.damage.fillText(damage, 32 * x, 32 * (y + 1) - 2);
core.canvas.fg.fillText(damage, 32 * x + 2, 32 * (y + 1)); core.canvas.damage.fillText(damage, 32 * x + 2, 32 * (y + 1));
core.canvas.fg.fillText(damage, 32 * x, 32 * (y + 1)); core.canvas.damage.fillText(damage, 32 * x, 32 * (y + 1));
core.setFillStyle('fg', color); core.setFillStyle('damage', color);
core.canvas.fg.fillText(damage, 32 * x + 1, 32 * (y + 1) - 1); core.canvas.damage.fillText(damage, 32 * x + 1, 32 * (y + 1) - 1);
} }
// 临界显伤 // 临界显伤
@ -1653,13 +1653,13 @@ control.prototype.updateFg = function () {
if (critical.length>0) critical=critical[0]; if (critical.length>0) critical=critical[0];
critical = core.formatBigNumber(critical[0]); critical = core.formatBigNumber(critical[0]);
if (critical == '???') critical = '?'; if (critical == '???') critical = '?';
core.setFillStyle('fg', '#000000'); core.setFillStyle('damage', '#000000');
core.canvas.fg.fillText(critical, 32 * x + 2, 32 * (y + 1) - 2 - 10); core.canvas.damage.fillText(critical, 32 * x + 2, 32 * (y + 1) - 2 - 10);
core.canvas.fg.fillText(critical, 32 * x, 32 * (y + 1) - 2 - 10); core.canvas.damage.fillText(critical, 32 * x, 32 * (y + 1) - 2 - 10);
core.canvas.fg.fillText(critical, 32 * x + 2, 32 * (y + 1) - 10); core.canvas.damage.fillText(critical, 32 * x + 2, 32 * (y + 1) - 10);
core.canvas.fg.fillText(critical, 32 * x, 32 * (y + 1) - 10); core.canvas.damage.fillText(critical, 32 * x, 32 * (y + 1) - 10);
core.setFillStyle('fg', '#FFFFFF'); core.setFillStyle('damage', '#FFFFFF');
core.canvas.fg.fillText(critical, 32 * x + 1, 32 * (y + 1) - 1 - 10); core.canvas.damage.fillText(critical, 32 * x + 1, 32 * (y + 1) - 1 - 10);
} }
} }
@ -1667,20 +1667,20 @@ control.prototype.updateFg = function () {
} }
// 如果是领域&夹击 // 如果是领域&夹击
if (core.flags.displayExtraDamage) { if (core.flags.displayExtraDamage) {
core.canvas.fg.textAlign = 'center'; core.canvas.damage.textAlign = 'center';
for (var x=0;x<core.bigmap.width;x++) { for (var x=0;x<core.bigmap.width;x++) {
for (var y=0;y<core.bigmap.height;y++) { for (var y=0;y<core.bigmap.height;y++) {
var damage = core.status.checkBlock.damage[x+core.bigmap.width*y]; var damage = core.status.checkBlock.damage[x+core.bigmap.width*y];
if (damage>0) { if (damage>0) {
damage = core.formatBigNumber(damage); damage = core.formatBigNumber(damage);
core.setFillStyle('fg', '#000000'); core.setFillStyle('damage', '#000000');
core.canvas.fg.fillText(damage, 32 * x + 17, 32 * (y + 1) - 13); core.canvas.damage.fillText(damage, 32 * x + 17, 32 * (y + 1) - 13);
core.canvas.fg.fillText(damage, 32 * x + 15, 32 * (y + 1) - 15); core.canvas.damage.fillText(damage, 32 * x + 15, 32 * (y + 1) - 15);
core.canvas.fg.fillText(damage, 32 * x + 17, 32 * (y + 1) - 15); core.canvas.damage.fillText(damage, 32 * x + 17, 32 * (y + 1) - 15);
core.canvas.fg.fillText(damage, 32 * x + 15, 32 * (y + 1) - 13); core.canvas.damage.fillText(damage, 32 * x + 15, 32 * (y + 1) - 13);
core.setFillStyle('fg', '#FF7F00'); core.setFillStyle('damage', '#FF7F00');
core.canvas.fg.fillText(damage, 32 * x + 16, 32 * (y + 1) - 14); core.canvas.damage.fillText(damage, 32 * x + 16, 32 * (y + 1) - 14);
} }
} }
} }
@ -2740,7 +2740,7 @@ control.prototype.updateStatusBar = function () {
core.statusBar.image.settings.src = core.statusBar.icons.settings.src; core.statusBar.image.settings.src = core.statusBar.icons.settings.src;
} }
core.updateFg(); core.updateDamage();
} }
////// 屏幕分辨率改变后重新自适应 ////// ////// 屏幕分辨率改变后重新自适应 //////

6
libs/core.js
View File

@ -73,7 +73,7 @@ function core() {
scale: 1.0, scale: 1.0,
} }
this.bigmap = { this.bigmap = {
canvas: ["bg", "event", "event2", "fg", "route"], canvas: ["bg", "event", "event2", "fg", "damage", "route"],
offsetX: 0, // in pixel offsetX: 0, // in pixel
offsetY: 0, offsetY: 0,
width: 13, // map width and height width: 13, // map width and height
@ -799,8 +799,8 @@ core.prototype.setFg = function(color, time, callback) {
} }
////// 更新全地图显伤 ////// ////// 更新全地图显伤 //////
core.prototype.updateFg = function () { core.prototype.updateDamage = function () {
core.control.updateFg(); core.control.updateDamage();
} }
////// 测试是否拥有某个特殊属性 ////// ////// 测试是否拥有某个特殊属性 //////

4
styles.css
View File

@ -280,6 +280,10 @@ span#poison, span#weak, span#curse, span#pickaxe, span#bomb, span#fly {
z-index: 60; z-index: 60;
} }
#damage {
z-index: 65;
}
#animate { #animate {
z-index: 70; z-index: 70;
} }