377 lines
17 KiB
HTML
377 lines
17 KiB
HTML
<!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> |