Create a gist now

Instantly share code, notes, and snippets.

<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