<html><head> | |
</head><body> | |
<div style="text-align: center"> | |
<canvas width="640" height="360" id="canvas"> | |
</canvas> | |
<br>Click to change tiles. | |
</div> | |
<script type="text/javascript">(function() { | |
var canvas = document.getElementById("canvas"); | |
var width = canvas.width; | |
var height = canvas.height; | |
var context = canvas.getContext("2d"); | |
// Initialize grids: | |
var tile = []; | |
var obj = []; | |
var cols = 8; | |
var rows = 8; | |
for (var y = 0; y < rows; y++) { | |
tile[y] = []; | |
obj[y] = []; | |
for (var x = 0; x < cols; x++) { | |
var t = 2; | |
if (Math.random() < .3) t = 1; | |
else if (Math.random() < .3) t = 3; | |
tile[y][x] = t; | |
var o = 0; | |
if (Math.random() < .3) o = 1; | |
obj[y][x] = o; | |
} | |
} | |
// Isometric variables and helper functions: | |
var IsoW = 40; // cell width | |
var IsoH = 20; // cell height | |
var IsoX = width / 2; | |
var IsoY = 20; | |
function IsoToScreenX(localX, localY) { | |
return IsoX + (localX - localY) * IsoW; | |
} | |
function IsoToScreenY(localX, localY) { | |
return IsoY + (localX + localY) * IsoH; | |
} | |
function ScreenToIsoX(globalX, globalY) { | |
return ((globalX - IsoX) / IsoW + (globalY - IsoY) / IsoH) / 2; | |
} | |
function ScreenToIsoY(globalX, globalY) { | |
return ((globalY - IsoY) / IsoH - (globalX - IsoX) / IsoW) / 2; | |
} | |
// Draws an isometric tile at the given coordinates | |
function DrawIsoTile(x, y, color) { | |
context.fillStyle = color; | |
context.beginPath(); | |
context.moveTo(x, y); | |
context.lineTo(x - IsoW, y + IsoH); | |
context.lineTo(x, y + IsoH * 2); | |
context.lineTo(x + IsoW, y + IsoH); | |
context.closePath(); | |
context.fill(); | |
} | |
// Draw event: | |
var frame = 0; | |
setInterval(function() { | |
frame += 1; | |
context.clearRect(0, 0, width, height); | |
for (var y = 0; y < rows; y++) | |
for (var x = 0; x < cols; x++) { | |
var t = tile[y][x]; | |
var rx = IsoToScreenX(x, y); | |
var ry = IsoToScreenY(x, y); | |
// draw tile (if any): | |
switch (t) { | |
case 1: DrawIsoTile(rx, ry, "#C59E77"); break; | |
case 2: DrawIsoTile(rx, ry, "#94BA57"); break; | |
case 3: DrawIsoTile(rx, ry, "#9DD5E2"); break; | |
} | |
// draw object (if any): | |
switch (obj[y][x]) { | |
case 1: | |
var oz = 5 + Math.sin(frame / 7 + x - y) * 2; | |
// shadow: | |
context.save(); | |
context.translate(rx, ry + 20); | |
context.scale(1, 0.5); | |
context.fillStyle = "rgba(0, 0, 0, 0.5)"; | |
context.beginPath(); | |
context.arc(0, 0, 9 / (1 + oz / 20), 0, Math.PI * 2, false); | |
context.closePath(); | |
context.fill(); | |
context.restore(); | |
// outlined circle: | |
for (var step = 0; step < 2; step++) { | |
context.fillStyle = step > 0 ? "#FFFFFF" : "#000000"; | |
context.beginPath(); | |
context.arc(rx, ry + 20 - oz - 10, 11 - step, 0, Math.PI * 2, false); | |
context.closePath(); | |
context.fill(); | |
} | |
break; | |
} | |
} | |
}, 50); | |
// Click event: | |
canvas.addEventListener("mousedown", function(e) { | |
e.preventDefault(); | |
// get mouse coordinates from the event: | |
var mx = e.offsetX, my = e.offsetY; | |
// find local coordinates from them: | |
var ix = Math.floor(ScreenToIsoX(mx, my)); | |
var iy = Math.floor(ScreenToIsoY(mx, my)); | |
// if those are within the grid, change the clicked tile: | |
if (ix >= 0 && iy >= 0 && ix < cols && iy < rows) { | |
var d = tile[iy][ix]; | |
d += 1; | |
if (d > 3) d = 0; // (wrapping) | |
tile[iy][ix] = d; | |
} | |
}); | |
})();</script> | |
</body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment