IsometricFun

by Sam Fereday

HTML

<div id="output"></div>

CSS

body {
  font-family: arial;
}

#output {
  margin: 2em 0 0 7em;
  position: relative;
}
.cell {
  width: 32px;
  height: 16px;
  box-sizing: border-box;
  position: absolute;
  text-align: center;
  background-size: 32px 32px;
  cursor: pointer;
}
.cell:after {
  content: " ";
  width: 22px;
  height: 22px;
  position: absolute;
  top: 0;
  left: 0;
  background: #333;
  border: 1px solid #fff;
  z-index: 99;
  -webkit-transform: rotateX(60deg) rotateZ(45deg);
    -webkit-transform-style: preserve-3d;
}
.cell:hover:after {
  opacity: 0.5;
}

JavaScript

var Point = function(){
	this.x = 0;
  this.y = 0;
}

function isoTo2D(x, y) {
  var tempPt = new Point(0, 0);
  tempPt.x = (2 * y + x) / 2;
  tempPt.y = (2 * y - x) / 2;
  return(tempPt);
}

function twoDToIso(x, y) {
  var tempPt = new Point(0,0);
  tempPt.x = x - y;
  tempPt.y = (x + y) / 2;
  return(tempPt);
}

function getTileCoordinates(x, y, tileHeight){
  var tempPt = new Point(0, 0);
  tempPt.x = Math.floor(pt.x / tileHeight);
  tempPt.y = Math.floor(pt.y / tileHeight);
  return(tempPt);
}

//http://gamedev.stackexchange.com/questions/44966/isometric-drawing-order-with-larger-than-single-tile-images-drawing-order-algo
//http://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-a-primer-for-game-developers--gamedev-6511
//http://stackoverflow.com/questions/892811/drawing-isometric-game-worlds
var tile_map = [
 [1,1,1,1,1,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,0,0,0,0,1],
 [1,1,1,1,1,1]];

var cellY = 0;
var cellX = 0;

var container = document.getElementById("output");

var tile_width = 16; // Half of 32 seems to fix it, why is this? The actual tile graphic is set to 32...
var tile_height = 16;
var x;
var y;
var p;
var tileType;

// Reversed to fix z-indexing
for (cellY = 0; cellY < tile_map.length; cellY++) {
    for (cellX = 0; cellX < tile_map[cellY].length; cellX++) {
    	x = cellY * tile_width;
    	y = cellX * tile_height;
    	tileType = tile_map[cellY][cellX]; // swapped?     
      p = twoDToIso(x, y);
			container.innerHTML += "<div class='cell' style='left: "+p.x+"px; top: "+p.y+"px;'></div>";
    }
}