Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.