Isometric tiles
There are two difficulties when dealing with isometric tiles. First, it's very simple to display an orthogonal grid with DOM elements, whereas it's more complicated to display an isometric one. Secondly, the occlusion is harder to compute.
Drawing an isometric tile map
We will use a trick here to generate our tile map. Each of our tiles will be stored in an area where they are surrounded by transparent pixels in such a way as to give them a square shape, just like the following screenshot:
To make the magic happen, we will use two normal tile maps to display one isometric one. They will overlap, but with an offset between them equal to half the height and half the width of one tile. The following figure shows you how it would look:
Occlusion for isometric games
The occlusion for isometric games is harder to manage than for orthogonal ones. In this situation, you can't simply play with layers to generate the correct occlusion. Instead, you will have to give a z index to each "block...