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

更新Autotile和感叹号

Browse Source
This commit is contained in:
ckcz123 2017-12-17 18:01:45 +08:00
parent e77762b10f
commit 0de35b6258
14 changed files with 223 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/terrains.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

1
index.html
View File

@ -35,7 +35,6 @@
<span class='startButton' id='aboutGame'>关于本塔</span>
</div>
<div id='levelChooseButtons'>
<!-- 如果不需要三个难度，直接像这样注释掉即可 -->
<span class='startButton' id='easyLevel'>简单</span>
<span class='startButton' id='normalLevel'>普通</span>
<span class='startButton' id='hardLevel'>困难</span>

135
libs/core.js
View File

@ -1558,21 +1558,146 @@ core.prototype.drawMap = function (mapName, callback) {
core.canvas.bg.drawImage(blockImage, 0, blockIcon * 32, 32, 32, x * 32, y * 32, 32, 32);
}
}
var autotileMaps = [];
for (var b = 0; b < mapBlocks.length; b++) {
// 事件启用
if (core.isset(mapBlocks[b].event) && !(core.isset(mapBlocks[b].enable) && !mapBlocks[b].enable)) {
blockIcon = core.material.icons[mapBlocks[b].event.cls][mapBlocks[b].event.id];
blockImage = core.material.images[mapBlocks[b].event.cls];
core.canvas.event.drawImage(core.material.images[mapBlocks[b].event.cls], 0, blockIcon * 32, 32, 32, mapBlocks[b].x * 32, mapBlocks[b].y * 32, 32, 32);
core.addGlobalAnimate(mapBlocks[b].event.animate, mapBlocks[b].x * 32, mapBlocks[b].y * 32, blockIcon, blockImage);
var block = mapBlocks[b];
if (core.isset(block.event) && !(core.isset(block.enable) && !block.enable)) {
if (block.event.cls == 'autotile') {
// core.drawAutotile();
autotileMaps[13*block.x + block.y] = true;
continue;
}
else {
blockIcon = core.material.icons[block.event.cls][block.event.id];
blockImage = core.material.images[block.event.cls];
core.canvas.event.drawImage(core.material.images[block.event.cls], 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
core.addGlobalAnimate(block.event.animate, block.x * 32, block.y * 32, blockIcon, blockImage);
}
}
}
core.drawAutotile('event', autotileMaps, 0, 0, 32);
core.setGlobalAnimate(core.values.animateSpeed);
if (core.isset(callback))
callback();
}
core.prototype.drawAutotile = function (canvas, autotileMaps, left, top, size) {
var isAutotile = function(x, y) {
if (x<0 || x>12 || y<0 || y>12) return 0;
return autotileMaps[13*x+y]?1:0;
}
for (var xx=0;xx<13;xx++) {
for (var yy=0;yy<13;yy++) {
if (isAutotile(xx, yy)) {
// 绘制autotile
var id=isAutotile(xx, yy - 1) + 2 * isAutotile(xx - 1, yy) + 4 * isAutotile(xx, yy + 1) + 8 * isAutotile(xx + 1, yy);
core.drawAutotileBlock(canvas, left + xx * size, top + yy * size, size, core.material.images.autotile, id);
}
}
}
for (var xx=0;xx<13;xx++) {
for (var yy=0;yy<13;yy++) {
if (isAutotile(xx, yy) + isAutotile(xx + 1, yy) + isAutotile(xx + 1, yy + 1) + isAutotile(xx, yy + 1) != 3) continue;
if (!isAutotile(xx, yy)) {
core.drawAutotileBlock(canvas, left + xx * size + size, top + yy * size + size, size, core.material.images.autotile, 16);
}
if (!isAutotile(xx + 1, yy)) {
core.drawAutotileBlock(canvas, left + xx * size + size / 2, top + yy * size + size, size, core.material.images.autotile, 17);
}
if (!isAutotile(xx + 1, yy + 1)) {
core.drawAutotileBlock(canvas, left + xx * size + size / 2, top + yy * size + size / 2, size, core.material.images.autotile, 18);
}
if (!isAutotile(xx, yy + 1)) {
core.drawAutotileBlock(canvas, left + xx * size + size, top + yy * size + size / 2, size, core.material.images.autotile, 19);
}
}
}
}
core.prototype.drawAutotileBlock = function (map, x, y, size, autotile, index) {
var canvas = core.canvas[map];
var blockIcon = core.material.icons.terrains.ground;
var blockImage = core.material.images.terrains;
switch (index) {
case 0:
canvas.drawImage(autotile, 0, 0, 32, 32, x, y, size, size);
break;
case 1:
canvas.drawImage(autotile, 0, 3 * 32, 16, 32, x, y, size / 2, size);
canvas.drawImage(autotile, 2 * 32 + 16, 3 * 32, 16, 32, x + size / 2, y, size / 2, size);
break;
case 2:
canvas.drawImage(autotile, 2 * 32, 32, 32, 16, x, y, size, size / 2);
canvas.drawImage(autotile, 2 * 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
break;
case 3:
canvas.drawImage(autotile, 2 * 32, 3 * 32, 32, 32, x, y, size, size);
break;
case 4:
canvas.drawImage(autotile, 0, 1 * 32, 16, 32, x, y, size / 2, size);
canvas.drawImage(autotile, 2 * 32 + 16, 1 * 32, 16, 32, x + size / 2, y, size / 2, size);
break;
case 5:
canvas.drawImage(autotile, 0, 2 * 32, 16, 32, x, y, size / 2, size);
canvas.drawImage(autotile, 2 * 32 + 16, 2 * 32, 16, 32, x + size / 2, y, size / 2, size);
break;
case 6:
canvas.drawImage(autotile, 2 * 32, 1 * 32, 32, 32, x, y, size, size);
break;
case 7:
canvas.drawImage(autotile, 2 * 32, 2 * 32, 32, 32, x, y, size, size);
break;
case 8:
canvas.drawImage(autotile, 0, 32, 32, 16, x, y, size, size / 2);
canvas.drawImage(autotile, 0, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
break;
case 9:
canvas.drawImage(autotile, 0, 3 * 32, 32, 32, x, y, size, size);
break;
case 10:
canvas.drawImage(autotile, 32, 32, 32, 16, x, y, size, size / 2);
canvas.drawImage(autotile, 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
break;
case 11:
canvas.drawImage(autotile, 32, 3 * 32, 32, 32, x, y, size, size);
break;
case 12:
canvas.drawImage(autotile, 0, 32, 32, 32, x, y, size, size);
break;
case 13:
canvas.drawImage(autotile, 0, 2 * 32, 32, 32, x, y, size, size);
break;
case 14:
canvas.drawImage(autotile, 32, 32, 32, 32, x, y, size, size);
break;
case 15:
canvas.drawImage(autotile, 32, 2 * 32, 32, 32, x, y, size, size);
break;
case 16:
canvas.clearRect(x, y, size / 2, size / 2);
canvas.drawImage(blockImage, 0, blockIcon * 32, 16, 16, x, y, size / 2, size / 2);
canvas.drawImage(autotile, 2 * 32, 0, 16, 16, x, y, size / 2, size / 2);
break;
case 17:
canvas.clearRect(x, y, size / 2, size / 2);
canvas.drawImage(blockImage, 0, blockIcon * 32, 16, 16, x, y, size / 2, size / 2);
canvas.drawImage(autotile, 2 * 32 + 16, 0, 16, 16, x, y, size / 2, size / 2);
break;
case 18:
canvas.clearRect(x, y, size / 2, size / 2);
canvas.drawImage(blockImage, 0, blockIcon * 32, 16, 16, x, y, size / 2, size / 2);
canvas.drawImage(autotile, 2 * 32 + 16, 16, 16, 16, x, y, size / 2, size / 2);
break;
case 19:
canvas.clearRect(x, y, size / 2, size / 2);
canvas.drawImage(blockImage, 0, blockIcon * 32, 16, 16, x, y, size / 2, size / 2);
canvas.drawImage(autotile, 2 * 32, 16, 16, 16, x, y, size / 2, size / 2);
break;
}
}
core.prototype.noPassExists = function (x, y, floorId) {
var block = core.getBlock(x,y,floorId);
if (block==null) return false;

6
libs/enemys.js
View File

@ -182,8 +182,10 @@ enemys.prototype.calDamage = function (hero_atk, hero_def, hero_mdef, mon_hp, mo
if (this.hasSpecial(mon_special, 4)) per_damage *= 2;
if (this.hasSpecial(mon_special, 5)) per_damage *= 3;
if (this.hasSpecial(mon_special, 6)) per_damage *= 4;
var counterDamage = 0;
// 反击
if (this.hasSpecial(mon_special, 8)) per_damage += parseInt(core.values.counterAttack * hero_atk);
if (this.hasSpecial(mon_special, 8)) counterDamage += parseInt(core.values.counterAttack * hero_atk);
// 先攻
var damage = mon_special == 1 ? per_damage : 0;
@ -193,7 +195,7 @@ enemys.prototype.calDamage = function (hero_atk, hero_def, hero_mdef, mon_hp, mo
if (this.hasSpecial(mon_special, 9)) damage = core.values.purify * hero_mdef;
var turn = parseInt((mon_hp - 1) / (hero_atk - mon_def));
var ans = damage + turn * per_damage;
var ans = damage + turn * per_damage + (turn + 1) * counterDamage;
ans -= hero_mdef;
// 魔防回血

26
libs/events.js
View File

@ -39,6 +39,11 @@ events.prototype.init = function () {
if (core.isset(callback))
callback();
},
"changeLight": function (data, core, callback) {
core.events.changeLight(data.x, data.y);
if (core.isset(callback))
callback();
},
'action': function (data, core, callback) {
core.events.doEvents(data.event.data, data.x, data.y);
if (core.isset(callback)) callback();
@ -577,6 +582,27 @@ events.prototype.passNet = function (data) {
core.updateStatusBar();
}
events.prototype.changeLight = function(x, y) {
var block = core.getBlock(x, y);
if (block==null) return;
var index = block.index;
block = block.block;
if (block.event.id != 'light') return;
// 改变为dark
block.id = 166;
block.event = {'cls': 'terrains', 'id': 'darkLight', 'noPass': true};
// 更新地图
core.canvas.event.clearRect(x * 32, y * 32, 32, 32);
var blockIcon = core.material.icons[block.event.cls][block.event.id];
core.canvas.event.drawImage(core.material.images[block.event.cls], 0, blockIcon * 32, 32, 32, block.x * 32, block.y * 32, 32, 32);
this.afterChangeLight();
}
// 改变灯后的事件
events.prototype.afterChangeLight = function() {
}
// 存档事件前一刻的处理
events.prototype.beforeSaveData = function(data) {

10
libs/floors/sample0.js
View File

@ -8,12 +8,12 @@ main.floors.sample0 = {
"canFlyTo": true, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器）
"canUseQuickShop": true, // 该层是否允许使用快捷商店
"map": [ // 地图数据，需要是13x13，建议使用地图生成器来生成
[0, 0, 220, 0, 0, 6, 87, 3, 65, 64, 44, 43, 42],
[0, 246, 0, 246, 0, 6, 0, 3, 58, 59, 60, 61, 41],
[219, 0, 0, 0, 219, 6, 0, 3, 57, 26, 62, 63, 40],
[6, 6, 125, 6, 6, 6, 0, 3, 53, 54, 55, 56, 39],
[0, 0, 220, 0, 0, 20, 87, 3, 65, 64, 44, 43, 42],
[0, 246, 0, 246, 0, 20, 0, 3, 58, 59, 60, 61, 41],
[219, 0, 0, 0, 219, 20, 0, 3, 57, 26, 62, 63, 40],
[20, 20, 20, 20, 20, 20, 0, 3, 53, 54, 55, 56, 39],
[216, 247, 256, 235, 248, 6, 0, 3, 49, 50, 51, 52, 38],
[5, 5, 125, 5, 5, 5, 0, 1, 45, 46, 47, 48, 37],
[6, 6, 125, 6, 6, 6, 0, 1, 45, 46, 47, 48, 37],
[224, 254, 212, 232, 204, 5, 0, 1, 31, 32, 34, 33, 36],
[201, 205, 217, 215, 207, 5, 0, 1, 27, 28, 29, 30, 35],
[5, 5, 125, 5, 5, 5, 0, 1, 21, 22, 23, 24, 25],

8
libs/floors/sample1.js
View File

@ -8,11 +8,11 @@ main.floors.sample1 = {
"canFlyTo": true, // 该楼能否被楼传器飞到（不能的话在该楼也不允许使用楼传器）
"canUseQuickShop": true, // 该层是否允许使用快捷商店
"map": [ // 地图数据，需要是13x13，建议使用地图生成器来生成
[7, 131, 8, 2, 9, 130, 10, 2, 0, 0, 132, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0],
[7, 131, 8, 2, 9, 130, 10, 2, 166, 165, 132, 165, 166],
[0, 0, 0, 0, 0, 0, 0, 2, 165, 164, 0, 162, 165],
[2, 2, 2, 2, 121, 2, 2, 2, 0, 0, 229, 0, 0],
[43, 33, 44, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0],
[21, 22, 21, 1, 0, 0, 0, 2, 0, 0, 0, 0, 0],
[43, 33, 44, 1, 0, 0, 0, 2, 165, 161, 0, 163, 165],
[21, 22, 21, 1, 0, 0, 0, 2, 166, 165, 0, 165, 166],
[1, 245, 1, 1, 0, 87, 0, 2, 2, 2, 85, 2, 2],
[0, 246, 0, 1, 0, 0, 0, 2, 2, 221, 0, 221, 2],
[246, 0, 246, 1, 0, 0, 0, 121, 85, 0, 0, 0, 2],

8
libs/icons.js
View File

@ -29,7 +29,13 @@ icons.prototype.init = function () {
'blueShop-left': 15,
'blueShop-right': 16,
'pinkShop-left': 17,
'pinkShop-right': 18
'pinkShop-right': 18,
'up': 19,
'down': 20,
'left': 21,
'right': 22,
'light': 23,
'darkLight': 24
},
'animates': {
'star': 0,

11
libs/maps.js
View File

@ -63,7 +63,7 @@ maps.prototype.getBlock = function (x, y, id) {
var tmp = {'x': x, 'y': y, 'id': id};
if (enable!=null) tmp.enable = enable;
// 0-9 地形
// 0-20 地形
if (id == 1) tmp.event = {'cls': 'terrains', 'id': 'yellowWall'}; // 黄墙
if (id == 2) tmp.event = {'cls': 'terrains', 'id': 'whiteWall'}; // 白墙
if (id == 3) tmp.event = {'cls': 'terrains', 'id': 'blueWall'}; // 白墙
@ -79,6 +79,8 @@ maps.prototype.getBlock = function (x, y, id) {
if (id == 13) tmp.event = {'cls': 'animates', 'id': 'weakNet', 'noPass': false, 'trigger': 'passNet'}; // 衰网
if (id == 14) tmp.event = {'cls': 'animates', 'id': 'curseNet', 'noPass': false, 'trigger': 'passNet'}; // 咒网
if (id == 20) tmp.event = {'cls': 'autotile', 'id': 'autotile', 'noPass': true};
// 21-80 物品
if (id == 21) tmp.event = {'cls': 'items', 'id': 'yellowKey'}; // 黄钥匙
if (id == 22) tmp.event = {'cls': 'items', 'id': 'blueKey'}; // 蓝钥匙
@ -157,6 +159,13 @@ maps.prototype.getBlock = function (x, y, id) {
if (id == 131) tmp.event = {'cls': 'npcs', 'id': 'blueShop'};
if (id == 132) tmp.event = {'cls': 'npcs', 'id': 'princess'};
// 161-200 其他（单向箭头、灯、箱子等等）
if (id == 161) tmp.event = {'cls': 'terrains', 'id': 'up'}; // 单向上箭头
if (id == 162) tmp.event = {'cls': 'terrains', 'id': 'down'}; // 单向下箭头
if (id == 163) tmp.event = {'cls': 'terrains', 'id': 'left'}; // 单向左箭头
if (id == 164) tmp.event = {'cls': 'terrains', 'id': 'right'}; // 单向右箭头
if (id == 165) tmp.event = {'cls': 'terrains', 'id': 'light', 'trigger': 'changeLight', 'noPass': false}; // 灯
if (id == 166) tmp.event = {'cls': 'terrains', 'id': 'darkLight', 'noPass': true}; // 暗灯
// 201-300 怪物
if (id == 201) tmp.event = {'cls': 'enemys', 'id': 'greenSlime'};

41
libs/ui.js
View File

@ -570,6 +570,27 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
core.canvas.data.textAlign='left';
core.fillText('data', mon_hp, right_start, top+margin+10+26, '#DDDDDD', 'bold 16px Verdana');
// 反击
if (core.enemys.hasSpecial(mon_special, 8)) {
var counterDamage = parseInt(core.values.counterAttack * hero_atk);
hero_mdef -= counterDamage;
if (hero_mdef<0) {
hero_hp+=hero_mdef;
hero_mdef=0;
}
// 更新勇士数据
core.clearMap('data', left_start, top+margin+10, lineWidth, 40);
core.canvas.data.textAlign='right';
core.fillText('data', hero_hp, left_end, top+margin+10+26, '#DDDDDD', 'bold 16px Verdana');
if (core.flags.enableMDef) {
core.clearMap('data', left_start, top+margin+10+3*lineHeight, lineWidth, 40);
core.fillText('data', hero_mdef, left_end, top+margin+10+26+3*lineHeight);
}
}
}
else {
// 怪物攻击
@ -580,7 +601,7 @@ ui.prototype.drawBattleAnimate = function(monsterId, callback) {
}, 250);
var per_damage = mon_atk-hero_def;
if (core.enemys.hasSpecial(mon_special, 8)) per_damage += parseInt(core.values.counterAttack * hero_atk); // 反击
if (per_damage < 0) per_damage = 0;
hero_mdef-=per_damage;
if (hero_mdef<0) {
@ -992,16 +1013,24 @@ ui.prototype.drawThumbnail = function(canvas, blocks, x, y, size, heroLoc) {
core.canvas[canvas].drawImage(blockImage, 0, blockIcon * 32, 32, 32, x + i * persize, y + j * persize, persize, persize);
}
}
var autotileMaps = [];
for (var b in blocks) {
var block = blocks[b];
if (core.isset(block.event) && !(core.isset(block.enable) && !block.enable)) {
var i = block.x, j = block.y;
var blockIcon = core.material.icons[block.event.cls][block.event.id];
var blockImage = core.material.images[block.event.cls];
//core.canvas[canvas].clearRect(x + i * persize, y + j * persize, persize, persize);
core.canvas[canvas].drawImage(blockImage, 0, blockIcon * 32, 32, 32, x + i * persize, y + j * persize, persize, persize);
if (block.event.cls == 'autotile') {
// core.drawAutotile();
autotileMaps[13*block.x + block.y] = true;
continue;
}
else {
var blockIcon = core.material.icons[block.event.cls][block.event.id];
var blockImage = core.material.images[block.event.cls];
core.canvas[canvas].drawImage(blockImage, 0, blockIcon * 32, 32, 32, x + block.x * persize, y + block.y * persize, persize, persize);
}
}
}
core.drawAutotile('ui', autotileMaps, x, y, persize);
if (core.isset(heroLoc)) {
var heroIcon = core.material.icons.hero[heroLoc.direction];
var height = core.material.icons.hero.height;

2
main.js
View File

@ -40,7 +40,7 @@ function main() {
];
// console.log('加载js文件列表加载完成' + this.loadList);
this.images = [
'animates', 'enemys', 'hero', 'items', 'npcs', 'terrains'
'animates', 'enemys', 'hero', 'items', 'npcs', 'terrains', "autotile"
];
this.sounds = {
'mp3': ['bgm-loop', 'floor'],

BIN
test/autotile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.4 KiB

377
test/grassAutotile.html
View File

@ -1,377 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.gameCanvas {
position: absolute;
}
body,
div,
img {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas class='gameCanvas' id='grasspic' width='96' height='128' style='z-index:3;top:208px;left:465px'></canvas>
<canvas class='gameCanvas' id='grass_pic' width='530' height='64' style='z-index:3;top:368px;left:465px'></canvas>
<canvas class='gameCanvas' id='grassLayer' width='416' height='416' style='z-index:2'></canvas>
<canvas class='gameCanvas' id='ui' width='416' height='416' style='z-index:100'></canvas>
<canvas class='gameCanvas' id='data' width='416' height='416' style='z-index:0'></canvas>
<p class='gameCanvas' id='pout' style='top:8px;left:500px'>通过鼠标拖拽或点击添加草地</p>
<script type="text/javascript">
var autotile = new Image()
//img.src="data:image/png;base64,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"
autotile.src = "autotile.png"
autotile.onload = function () {
console.log("loaded")
grasspic.getContext("2d").drawImage(autotile, 0, 0);
};
function drawAutotile(canvas, x, y, size, autotile, index) {
switch (index) {
case 0:
canvas.drawImage(autotile, 0, 0, 32, 32, x, y, size, size);
break;
case 1:
canvas.drawImage(autotile, 0, 3 * 32, 16, 32, x, y, size / 2, size);
canvas.drawImage(autotile, 2 * 32 + 16, 3 * 32, 16, 32, x + size / 2, y, size / 2, size);
break;
case 2:
canvas.drawImage(autotile, 2 * 32, 32, 32, 16, x, y, size, size / 2);
canvas.drawImage(autotile, 2 * 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
break;
case 3:
canvas.drawImage(autotile, 2 * 32, 3 * 32, 32, 32, x, y, size, size);
break;
case 4:
canvas.drawImage(autotile, 0, 1 * 32, 16, 32, x, y, size / 2, size);
canvas.drawImage(autotile, 2 * 32 + 16, 1 * 32, 16, 32, x + size / 2, y, size / 2, size);
break;
case 5:
canvas.drawImage(autotile, 0, 2 * 32, 16, 32, x, y, size / 2, size);
canvas.drawImage(autotile, 2 * 32 + 16, 2 * 32, 16, 32, x + size / 2, y, size / 2, size);
break;
case 6:
canvas.drawImage(autotile, 2 * 32, 1 * 32, 32, 32, x, y, size, size);
break;
case 7:
canvas.drawImage(autotile, 2 * 32, 2 * 32, 32, 32, x, y, size, size);
break;
case 8:
canvas.drawImage(autotile, 0, 32, 32, 16, x, y, size, size / 2);
canvas.drawImage(autotile, 0, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
break;
case 9:
canvas.drawImage(autotile, 0, 3 * 32, 32, 32, x, y, size, size);
break;
case 10:
canvas.drawImage(autotile, 32, 32, 32, 16, x, y, size, size / 2);
canvas.drawImage(autotile, 32, 3 * 32 + 16, 32, 16, x, y + size / 2, size, size / 2);
break;
case 11:
canvas.drawImage(autotile, 32, 3 * 32, 32, 32, x, y, size, size);
break;
case 12:
canvas.drawImage(autotile, 0, 32, 32, 32, x, y, size, size);
break;
case 13:
canvas.drawImage(autotile, 0, 2 * 32, 32, 32, x, y, size, size);
break;
case 14:
canvas.drawImage(autotile, 32, 32, 32, 32, x, y, size, size);
break;
case 15:
canvas.drawImage(autotile, 32, 2 * 32, 32, 32, x, y, size, size);
break;
case 16:
canvas.clearRect(x, y, size / 2, size / 2);
canvas.drawImage(autotile, 2 * 32, 0, 16, 16, x, y, size / 2, size / 2);
break;
case 17:
canvas.clearRect(x, y, size / 2, size / 2);
canvas.drawImage(autotile, 2 * 32 + 16, 0, 16, 16, x, y, size / 2, size / 2);
break;
case 18:
canvas.clearRect(x, y, size / 2, size / 2);
canvas.drawImage(autotile, 2 * 32 + 16, 16, 16, 16, x, y, size / 2, size / 2);
break;
case 19:
canvas.clearRect(x, y, size / 2, size / 2);
canvas.drawImage(autotile, 2 * 32, 16, 16, 16, x, y, size / 2, size / 2);
break;
}
/*
imgData = cxt.getImageData(0, 0, 32, 32);
grassImageData.push(imgData);
//0001
imgData = cxt.getImageData(0, 3 * 32, 16, 32);
cxt_.clearRect(0, 0, 32, 32);
cxt_.putImageData(imgData, 0, 0);
imgData = cxt.getImageData(2 * 32 + 16, 3 * 32, 16, 32);
cxt_.putImageData(imgData, 16, 0);
imgData = cxt_.getImageData(0, 0, 32, 32);
grassImageData.push(imgData);
//0010
imgData = cxt.getImageData(2 * 32, 32, 32, 16);
cxt_.clearRect(0, 0, 32, 32);
cxt_.putImageData(imgData, 0, 0);
imgData = cxt.getImageData(2 * 32, 3 * 32 + 16, 32, 16);
cxt_.putImageData(imgData, 0, 16);
imgData = cxt_.getImageData(0, 0, 32, 32);
grassImageData.push(imgData);
//0011
imgData = cxt.getImageData(2 * 32, 3 * 32, 32, 32);
grassImageData.push(imgData);
//0100
imgData = cxt.getImageData(0, 1 * 32, 16, 32);
cxt_.clearRect(0, 0, 32, 32);
cxt_.putImageData(imgData, 0, 0);
imgData = cxt.getImageData(2 * 32 + 16, 1 * 32, 16, 32);
cxt_.putImageData(imgData, 16, 0);
imgData = cxt_.getImageData(0, 0, 32, 32);
grassImageData.push(imgData);
//0101
imgData = cxt.getImageData(0, 2 * 32, 16, 32);
cxt_.clearRect(0, 0, 32, 32);
cxt_.putImageData(imgData, 0, 0);
imgData = cxt.getImageData(2 * 32 + 16, 2 * 32, 16, 32);
cxt_.putImageData(imgData, 16, 0);
imgData = cxt_.getImageData(0, 0, 32, 32);
grassImageData.push(imgData);
//0110
imgData = cxt.getImageData(2 * 32, 1 * 32, 32, 32);
grassImageData.push(imgData);
//0111
imgData = cxt.getImageData(2 * 32, 2 * 32, 32, 32);
grassImageData.push(imgData);
//1000
imgData = cxt.getImageData(0, 32, 32, 16);
cxt_.clearRect(0, 0, 32, 32);
cxt_.putImageData(imgData, 0, 0);
imgData = cxt.getImageData(0, 3 * 32 + 16, 32, 16);
cxt_.putImageData(imgData, 0, 16);
imgData = cxt_.getImageData(0, 0, 32, 32);
grassImageData.push(imgData);
//1001
imgData = cxt.getImageData(0, 3 * 32, 32, 32);
grassImageData.push(imgData);
//1010
imgData = cxt.getImageData(32, 32, 32, 16);
cxt_.clearRect(0, 0, 32, 32);
cxt_.putImageData(imgData, 0, 0);
imgData = cxt.getImageData(32, 3 * 32 + 16, 32, 16);
cxt_.putImageData(imgData, 0, 16);
imgData = cxt_.getImageData(0, 0, 32, 32);
grassImageData.push(imgData);
//1011
imgData = cxt.getImageData(1 * 32, 3 * 32, 32, 32);
grassImageData.push(imgData);
//1100
imgData = cxt.getImageData(0, 32, 32, 32);
grassImageData.push(imgData);
//1101
imgData = cxt.getImageData(0, 2 * 32, 32, 32);
grassImageData.push(imgData);
//1110
imgData = cxt.getImageData(32, 32, 32, 32);
grassImageData.push(imgData);
//1111
imgData = cxt.getImageData(32, 2 * 32, 32, 32);
grassImageData.push(imgData);
//s1
imgData = cxt.getImageData(2 * 32, 0, 16, 16);
grassImageData.push(imgData);
//s2
imgData = cxt.getImageData(2 * 32 + 16, 0, 16, 16);
grassImageData.push(imgData);
//s3
imgData = cxt.getImageData(2 * 32 + 16, 16, 16, 16);
grassImageData.push(imgData);
//s4
imgData = cxt.getImageData(2 * 32, 16, 16, 16);
grassImageData.push(imgData);
*/
}
//根据状态画图
var cxt = grassLayer.getContext("2d");
grass = function (ii, x, y) {
cxt.clearRect(x * 32, y * 32, 32, 32);
// cxt.putImageData(grassImageData[ii], x * 32, y * 32);
drawAutotile(cxt, x * 32, y * 32, 32, autotile, ii);
}
function clearGrass() { cxt.clearRect(0, 0, 416, 416); }
fullX = 12;
fullY = 12;
map = [];//-1表示空白,-2表示边界,其他对应实体
map[fullX + 1 + fullY * (fullX + 1)] = -2;
m = function (x, y) {
if (x < 0 || x > fullX || y < 0 || y > fullY) return fullX + 1 + fullY * (fullX + 1);
return x + y * (fullX + 1);
};
// ((100+map[m(xx,yy)] || 99)-100) 返回-1for空白-2for越界
isGrass = function (xx, yy) { return ~~(((100 + map[m(xx, yy)] || 99) - 100) == 1); }
updateGrass = function () {
clearGrass();
for (var xx = 0; xx <= fullX; xx++) {
for (var yy = 0; yy <= fullY; yy++) {
if (!isGrass(xx, yy)) continue;
var _id = 0;
_id += isGrass(xx, yy - 1) + 2 * isGrass(xx - 1, yy) + 4 * isGrass(xx, yy + 1) + 8 * isGrass(xx + 1, yy);
//1上2左4下8右
grass(_id, xx, yy);
}
}
for (var xx = 0; xx < fullX; xx++) {
for (var yy = 0; yy < fullY; yy++) {
if (isGrass(xx, yy) + isGrass(xx + 1, yy) + isGrass(xx + 1, yy + 1) + isGrass(xx, yy + 1) != 3) continue;
if (!isGrass(xx, yy)) {
// cxt.clearRect(xx * 32 + 32, yy * 32 + 32, 16, 16);
// cxt.putImageData(grassImageData[16], xx * 32 + 32, yy * 32 + 32);
drawAutotile(cxt, xx * 32 + 32, yy * 32 + 32, 32, autotile, 16);
}
if (!isGrass(xx + 1, yy)) {
// cxt.clearRect(xx * 32 + 16, yy * 32 + 32, 16, 16);
//cxt.putImageData(grassImageData[17], xx * 32 + 16, yy * 32 + 32);
drawAutotile(cxt, xx * 32 + 16, yy * 32 + 32, 32, autotile, 17);
}
if (!isGrass(xx + 1, yy + 1)) {
// cxt.clearRect(xx * 32 + 16, yy * 32 + 16, 16, 16);
// cxt.putImageData(grassImageData[18], xx * 32 + 16, yy * 32 + 16);
drawAutotile(cxt, xx * 32 + 16, yy * 32 + 16, 32, autotile, 18);
}
if (!isGrass(xx, yy + 1)) {
// cxt.clearRect(xx * 32 + 32, yy * 32 + 16, 16, 16);
// cxt.putImageData(grassImageData[19], xx * 32 + 32, yy * 32 + 16);
drawAutotile(cxt, xx * 32 + 32, yy * 32 + 16, 32, autotile, 19);
}
}
}
}
</script>
<script>
//画背景以及拖拽相关的支持
function printf(str) {
pout.innerText = str;
}
(function () {
var dc = data.getContext('2d');
var colorA = ["#f8f8f8", "#cccccc"];
var colorIndex = 1;
for (var ii = 0; ii < 13; ii++)
for (var jj = 0; jj < 13; jj++) {
dc.fillStyle = colorA[colorIndex];
colorIndex = 1 - colorIndex;
dc.fillRect(ii * 32, jj * 32, 32, 32);
}
})();//在data内画一个13*13的灰白相间的格子
(function () {
var uc = ui.getContext('2d');
function fillPos(pos) {
uc.fillStyle = '#' + ~~(Math.random() * 8) + ~~(Math.random() * 8) + ~~(Math.random() * 8);
uc.fillRect(pos.x * 32 + 12, pos.y * 32 + 12, 8, 8);
}//在格子内画一个随机色块
function eToLoc(e) { var loc = { 'x': e.clientX - ui.offsetLeft, 'y': e.clientY - ui.offsetTop, 'size': 32 }; return loc; }//返回可用的组件内坐标
function locToPos(loc) {
pos = { 'x': ~~(loc.x / loc.size), 'y': ~~(loc.y / loc.size) }
return pos;
}
var holdingPath = 0;
var stepPostfix = null;//用于存放寻路检测的第一个点之后的后续移动
var mouseOutCheck = 2;
function clear1() {
if (mouseOutCheck > 1) {
mouseOutCheck--;
setTimeout(clear1, 1000);
return;
}
holdingPath = 0;
stepPostfix = [];
uc.clearRect(0, 0, 416, 416);
}//用于鼠标移出canvas时的自动清除状态
ui.onmousedown = function (e) {
holdingPath = 1;
mouseOutCheck = 2;
setTimeout(clear1);
e.stopPropagation();
uc.clearRect(0, 0, 416, 416);
var loc = eToLoc(e);
pos = locToPos(loc)
stepPostfix = [];
stepPostfix.push(pos);
fillPos(pos);
}
ui.onmousemove = function (e) {
if (holdingPath == 0) { return; }
mouseOutCheck = 2;
e.stopPropagation();
var loc = eToLoc(e);
var pos = locToPos(loc);
var pos0 = stepPostfix[stepPostfix.length - 1]
var directionDistance = [pos.y - pos0.y, pos0.x - pos.x, pos0.y - pos.y, pos.x - pos0.x]
var max = 0, index = 4;
for (var i = 0; i < 4; i++) {
if (directionDistance[i] > max) {
index = i;
max = directionDistance[i];
}
}
pos = [{ 'x': 0, 'y': 1 }, { 'x': -1, 'y': 0 }, { 'x': 0, 'y': -1 }, { 'x': 1, 'y': 0 }, false][index]
if (pos) {
pos.x += pos0.x;
pos.y += pos0.y;
stepPostfix.push(pos);
fillPos(pos);
}
}
ui.onmouseup = function (e) {
holdingPath = 0;
e.stopPropagation();
var loc = eToLoc(e);
if (stepPostfix.length) {
console.log(stepPostfix);
for (var ii = 0; ii < stepPostfix.length; ii++)map[m(stepPostfix[ii].x, stepPostfix[ii].y)] = 1;
map[fullX + 1 + fullY * (fullX + 1)] = -2;
//console.log(map);
updateGrass();
}
}
})();
</script>
</html>

2
更新内容.txt
View File

@ -3,4 +3,4 @@
新增：单向箭头、感叹号
快捷道具使用：1破2炸3飞；读档改为D键 √
更多的默认素材；无需P图，直接替换即可
破甲、反击、净化等效果放全局变量
破甲、反击、净化等效果放全局变量 √