CODEWITHSUNDEEP
javascriptjquerycss
Maurice
Maurice

Reputation: 1157

Generate divs (tiles) in a row using javascript with all the same size except the one marked 0

I am trying to show some divs in a row using javascript. To do this, I have the following JScode: 

var levels = [
    [
        [1,2,0,1,2,1]
    ]
];

If 1 it will show the red div block, if 2 then the blue div block, if 0 no block is shown. This is all ok. The divs are 100 x100px and the HTML it generates looks like this:

<div id="plane">
  <div class="tile tile1" style="left:0px; top:0px"></div>
  <div class="tile tile2" style="left:100px; top:0px"></div>
  <div class="tile tile1" style="left:300px; top:0px"></div>
  <div class="tile tile2" style="left:400px; top:0px"></div>
  <div class="tile tile1" style="left:500px; top:0px"></div>
</div>

done by this part of the JS code:

this.getHTML = function () {
        return '<div class="tile tile'+this.type+'" style="left:'+this.x*100+'px; top:'+this.y*100+'px"></div>';
    };

As you can see the 0 block isn't shown. The problem I am having is that this 0 block also is 100x100px where I want it to be 50x50px. So only the 0 block 50x50px, all others should stay 100x100px so it will produce:

<div id="plane">
      <div class="tile tile1" style="left:0px; top:0px"></div>
      <div class="tile tile2" style="left:100px; top:0px"></div>
      <div class="tile tile1" style="left:250px; top:0px"></div>
      <div class="tile tile2" style="left:350px; top:0px"></div>
      <div class="tile tile1" style="left:450px; top:0px"></div>
    </div>

But how to do this correctly? I am kinda stucked here. I've tried adapting the CSS values, but this doesn't work.

Please see my fiddle (click the 1 to see the blocks): http://jsfiddle.net/mauricederegt/8aNL9/

Kind regards

Upvotes: 2

Views: 1167

Answers (1)

kwah
kwah

Reputation: 1149

Thinking out loud..

Where the width/height is variable, if a tile must know (or calculate) its own x,y coordinates it must also be "aware" of all the tiles that have come before it - both vertically and horizontally - otherwise you face the issue you have currently. Alternatively, the generating loop must keep track of the "current" x/y position and assign this to the tile.

Regardless of how it is implemented, algorithmically, having a pre-defined grid of 100x100px squares with tiles that "know" its own [i,j] position (from which it can work out its x,y coordinates and width) is very different to having a grid of nxm px tiles.

Perhaps you could experiment with passing the x/y coordinates into the tile object, as opposed to its i,j position?

Update: Couldn't resist having a play with this.. 

loadLevel: function (newLevel) {
    level = newLevel;
    tiles = [];
    var html = [];
    var currentX = 0;
    var currentY = 0;

    for (var i = 0, lngi = levels[level].length; i < lngi; i++) {
        for (var j = 0, lngj = levels[level][i].length; j < lngj; j++) {
            if (levels[level][i][j] > 0) {
                var curIndex = tiles.length;
                tiles[curIndex] = new tile(levels[level][i][j], i, j, curIndex, currentX, currentY);
                html.push(tiles[curIndex].getHTML());
                currentX += tileWidth;
            }
            else if(levels[level][i][j] === 0) {
                currentX += blankWidth;
            }   
        }
        //Start a new row
        currentY += tileHeight;
        currentX = 0;
    }
    el.innerHTML = html.join('');
}

See this fiddle for the full code listing..
http://jsfiddle.net/7Yprn/

Note that the row height is fixed, resulting in 50x100px vertical rectangles, as opposed to the 50x50px gaps you requested in the original question:

Upvotes: 1

Related Questions