Isometric

by joeycakes

HTML

<canvas width="640" height="360" id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var width = canvas.width;
var height = canvas.height;
var context = canvas.getContext("2d");
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;
	}
}
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;
}


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();
}