simple-iso.html

## simple-iso.html
<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>