Staggered Isometric Map In Javascript

Question

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.

Answer 1

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

        $('<div />').addClass('tile').css({
            width: tile.width,
            height: tile.height,
            top: top,
            left: left
        }).appendTo('body');
    }
}

Hope that helps.