# Staggered Isometric Map In Javascript

I'm trying to create a staggered isometric map in Javascript.

var x, y, row, column, top, left,
width = window.innerWidth, height = window.innerHeight,
tile = {width: 64, height: 32};

row = Math.ceil(width / tile.width); // how many rows will be in map
column = Math.ceil(height / tile.height); // how many columns will be in map

for (x=0 ; x<row ; x++){
for (y=0 ; y<column ; y++){
top = y * tile.height - (y % 2 == 0 ? 0 : tile.height / 2);
left = x * tile.width - (y % 2 == 0 ? 0 : tile.width / 2);

$('<div />').addClass('tile').css({ width: tile.width, height: tile.height, top: top, left: left }).appendTo('body'); } } My formula doesn't work for vertical axis. It creates something like this. http://postimage.org/image/ekfnlbgoh/ How can I make it work? I need it to be something like this. http://legendofmazzeroth.wikidot.com/staggered-isometric-maps Here is the latest code: row = Math.ceil(height / (tile.height / 2)); column = Math.ceil(width / tile.width); for (y=0 ; y<=row ; y++){ for (x=0 ; x<=column ; x++){ top = y * (tile.height / 2) - (tile.height / 2); left = x * tile.width - (y % 2 == 0 ? 0 : tile.width / 2) - (tile.height / 2);$('<div />').addClass('tile').css({
width: tile.width,
height: tile.height,
top: top,
left: left
}).appendTo('body');
}
}

By the way, thanks to you that column/row mistake has been fixed.

• i tinkered with this code in chrome...instead of outputting the <div>, i made it output a <P> tag like this: document.write(<P>top="+top+"left="+left); when i run it, i see output like this: top=[object DOMWindow]left=0 changing the variable name from top to t makes the output more meaningful: top=0left=0 top=16left=-32 top=64left=0
– amb
Commented Apr 20, 2012 at 10:05

First, You've got your rows and columns backwards:

row = Math.ceil(height / tile.height); //number of rows
column = Math.ceil(width / tile.width); //number of columns

Then, there's a couple different ways to cycle through the tiles, depending on how you want the spaces to be indexed (if this is merely for background purposes, then it's not that important, but possibly if you need to keep track of where on the board all the other game entities are).

The closest way to what you're doing would be to always have the left variable be offset by 1/2 the width, then alternate the top offset based on the modulus (and watch those x/y values that were turned around because of the row/columns being backwards):

for (y=0 ; y<row ; y++){
for (x=0 ; x<column ; x++){
left = x * tile.width - tile.width / 2;
top = y * tile.height - (y % 2 == 0 ? 0 : tile.height / 2);