What is the lightest way to make a huge chess-like grid?

Question

Hey there

I'm working on a browser-game and I can't help but wonder about what's the lightest way to make the grid/board on which the game takes place.

Right now, as a mere sample, I'll show you this:

-link no longer active, it was basically a 25x25 table+tr+td grid-

Now, as the grid gets bigger and bigger, the table and its td's create a very heavy filepage which in turn...sucks in more resources from the browser engine and computer.

So, is a table with td's the most lightweight way to craft a huge grid-like board or is there something lighter that you recommend?

Cheers Sotkra

Answer 1

You could try getting rid of the table, instead positioning the pieces with CSS {position: relative; top: 20px; left: 20px} etc. and draw a repeating backrgound grid.

Answer 2

Removing the links and handling them via the click event in Javascript (preferably with something like JQuery) should cut down a lot on the filesize.

Answer 3

You could build the table by using JavaScript to manipulate the DOM. If the grid's contents are very regular, the code to do that would be much smaller than having 400x400 times <td></td> plus markup. Of course performance then depends on the JavaScript engine. But if that does not suck completely, it could even be faster than parsing all the HTML, independant of the network transfer time.

Answer 4

You could build it with CSS floats, e.g if the squares are 20x20px:

<style type="text/css">
div.container {
width: Xpx; /* 20px [square box width]+1px [border width of each square])) * number of squares */
height: Xpx; /* similar to above] */
border: solid black;
border-width: 1px 0px 0px 1px;} /* North East South West */

div.square {
float: left;
width: 20px;
height: 20px;
border: solid black;
border-width: 0px 1px 1px 0px;}

div.row {
clear: both;}
</style>


<div class="container">
    <div class="row">
        <div class="square">
        </div>
        ...
    </div>
...
</div>

Remember to use IE with a valid doctype http://htmlhelp.com/tools/validator/doctype.html or to use box model hacks in quirks mode [http://tantek.com/CSS/Examples/boxmodelhack.html].

You could probably make the above take up less if you use IDs instead of classes and use single letters in the CSS.

What's fastest usually depends wildly on the browser though, e.g. I wouldn't be surprised if IE performs better with tables, while other browsers perform better with relative DIVs/floats.

(I haven't tested the above, but something similar should work.)

You could then convert the above to JavaScript to reduce page load times, e.g:

function GenHTML(NumRows, NumCols) {
    var LRows = []
    for (var x=0; x<NumRows; x++) {
        var LCols = []
        for (var y=0; y<NumCols; y++) {
            var HTML = '<div class="square"></div>'
            LCols.push(HTML)}

        LRows.push('<div class="row">'+ LCols.join('') +'</div>')}
    return LRows.join('')}

function SetHTML(NumRows, NumCols) {
    document.getElementById('container').innerHTML = GenHTML(NumRows, NumCols)}

Answer 5

My suggestion is having the tiles absolutely positioned inside the board, to save on HTML (transfer time) and position calculations (load time) by the browser. JS to register the clicks and handle it (less HTML = less transfer and load time).

So, you could have this base CSS:

#board {
  display: block;
  width: [BoardWidth]px; /* TileWidth * NumberOrColumns */
  height: [BoardHeight]px; /* TileHeight * NumberOfRows */
  position: relative;
}
.tile {
  display: block;
  width: [TileWidth]px;
  height: [TileHeight]px;
  float: left;
}

Then having the html generated like that:

<div id="board">
<div class="tile" style="position: absolute; left:0px; top:0px;"></div>
<div class="tile" style="position: absolute; left:20px; top:0px;"></div>
<div class="tile" style="position: absolute; left:40px; top:0px;"></div>
<div class="tile" style="position: absolute; left:60px; top:0px;"></div>
<div class="tile" style="position: absolute; left:0px; top:20px;"></div>
<div class="tile" style="position: absolute; left:20px; top:20px;"></div>
<div class="tile" style="position: absolute; left:40px; top:20px;"></div>
<div class="tile" style="position: absolute; left:60px; top:20px;"></div>
<div class="tile" style="position: absolute; left:0px; top:40px;"></div>
<!--(...)-->
</div>

In which every tile has position left: [X*TileWidth]px; top: [Y*TileHeight]px;.
That, or David M's suggestion.

You can also cut on page load time if you make the page size smaller - so, like suggested, using JQuery or another JavaScript framework to create the trigger for the click on each div would be ideal.
I'm not very savvy, but using JQuery it would be something like:

$(document).ready(function() {
  $(".tile").click(function() {
    // find out which square was clicked, and perhaps redirect to a page with get variables
  });
});

Answer 6

http://www.w3schools.com/TAGS/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

If you use an imagemap to produce the triggers for your checkered board you would just need the repeated background and a transparent image that fills the total with and height.

Answer 7

Computing a table layout is a very complex work for a browser, because it has to know the dimensions of the last cell to calculate the exact width of each column. So, if you use a table, add table-layout:fixed early.

Floating boxes or relative positioning may be faster to render.