0
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ 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 \$\endgroup\$ – amb Apr 20 '12 at 10:05
6
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.