I am new to isometric and game programming in general.

Just cannot figure out how to iterate the grid from behind. I want to do it so that the tiles overlap properly.

My grid starts at [0][0] which translates into the tile closest to the left edge.

This is how my a smaller version of my map grid looks like:

var map = [
[1, 1, 1],
[1, 0, 0],
[1, 1, 1]

I have no trouble displaying it when I loop forward through the arrays: enter image description here

But when I try to iterate backwards through the Y array, it starts bugging, and does not display all tiles and have no clue why: enter image description here

I hope the images are large enough, else please "Zoom in" or open them in a new tab.



1 Answer 1


You're not drawing for y==0 in the second loop. That's why you don't have everything.

You can fix your loop as

for (var y=map.length-1; y>=0; y--) {

or more concise :

for (var y=map.length; y-->0;) {

Not the answer you're looking for? Browse other questions tagged .