Question

After finding the latest version of Crafty’s game API seems to fail in IE8, I thought I would get back to my friend JQuery, to create a few simple board games.

I started off with 3 DIV’s, a black tile, a white tile, and blank tile, set Display:none

Then I thought to clone the blank tile to the dimensions of whatever board game I desired.
Using a simple double for loop, when set to 8×8 it crashes the browser, when set to 2×2 it is slow, can someone suggest me ways to improve the performance?

The CSS:

<style>
    .white {
        position:relative;
        width:57px;
        height:57px;
    }
    .white img {
        position:absolute;
        width:171px;
        height:57px;
        left:-57px;
        top:0px;
        clip:rect(0px, 114px, 57px, 57px); 
     }
    .blank {
        position:relative;
        width:57px;
        height:57px;
     }
    .blank img {
        position:absolute;
        width:171px;
        height:57px;
        left:-114px;
        top:0px;
        clip:rect(0px, 171px, 57px, 114px); 
     }
    .black {
        position:relative;
        width:57px;
        height:57px;
     }
    .black img {
        position:absolute;
        width:171px;
        height:57px;
        left:0px;
        top:0px;
        clip:rect(0px, 57px, 57px, 0px); 
     }

The HTML:

<div class="white" style="display:none">
   <img src="images/sprites.png" alt="">
</div>

<div class="black" style="display:none">
   <img src="images/sprites.png" alt="">
</div>

<div class="blank" style="display:none">
   <img src="images/sprites.png" alt="">
</div>

<div class="start">
</div>

The jquery:

$(document).ready(function()  {     
    B_W = 456;
    B_H = 456;
    B_X = 8;
    B_Y = 8;
    SQ_W = 57;
    SQ_H = 57;

    var i=0;
    var j=0;

    for(i = 0; i < B_X; i++) {
        for(j = 0; j < B_Y; j++) {
                $('.blank').clone()
                    .insertAfter('.start')
                    .css({
                        'position':'absolute', 
                        'top' : j * SQ_H + 'px', 
                        'left' : i * SQ_W + 'px', 
                        'display' : 'block'
                    });
        }
    }
});

Answer 1

The second best thing you can do is add the position and display attributes as a css style, and add the image as a background to the DIV, for example:

<style>
.blank
{
   position:absolute;
   display:block;
   width:8px;
   height:8px;
   background: url('images/sprites.png')
}
</style>

and then “play” with the background positioning. You can do this like so for the next 8×8 pixel portion of your sprites png:

style="background-position: 8px 0px; "

Also, have a template DIV at the start, which has an ID=blank instead of class=blank, and set the selector to:

$('#blank')

Best solution would be to use the canvas element though!