Drawing a grid in javascript ( game of life, for example )

Question

Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.

Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.

The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.

I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.

Answer should include either one of the following:

a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS

b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.

Answer 1

For a small grid (< 100x100), use a table and give each cell an ID for fast access.

For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.

Answer 2

<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.

Answer 3

Why not build the grid as an HTML Table? After all this is what you want?

Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.

You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.

Answer 4

I've implemented the Game of Life in JS. There are a number of ways you can do this, but for my experiment I used a grid in a PRE element filled with rows of SPANs, like this (2x2).

<pre>
    <span class="dead">X</span><span class="dead">X</span><br />
    <span class="alive">X</span><span class="dead">X</span><br />
</pre>

The class of the element determines how it's displayed (black X or white X on a black background).

Keeping references to all SPANs in a 2d array (matrix = [x][y]) gives you fast access to all the elements.