Return to Question

appended answer 27745 as supplemental

Source Link

edited Apr 20, 2012 at 18:17

30.1k
12
96
143

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.

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.

Source Link

asked Apr 20, 2012 at 0:03

U. Aydin

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