Javascript grid drawing (e.g. life game)

Question

In fact, I had this idea in my head for a kind of evolution simulator, not quite like the Conways Game of Life, but one part where they correspond is that they will both be based on a square grid.

Now, personally, I like working in HTML + Javascript + for simple applications, since it allows you to quickly create a user interface, and if you are not doing something highly computational, then JS in the browser is a decent platform.

The problem I'm trying to solve right now involves drawing and updating the grid. I might have missed something, but it looks like there is no simple and easy to calculate way to do this for an 80x40 grid. An easy way would be to create a div with an absolute position and a specific background color for any square that is NOT empty. However, it can get very slow with anything over 60-70 color squares.

I am definitely ready to switch to another language if the situation requires it, but first I just want to know that I'm not stupidly missing the easy way to do this using HTML + JS.

The response must include one of the following values:

a) A smart way to draw and update an 80x40 grid (where the squares change color and “move”) in HTML + JS

b) Another language that can do this fast enough. I would prefer not to spend a few days learning DirectDraw or something.

Answer 1

Why not build a grid as an HTML table? After all, is that what you want?

Give each cell a computable identifier and create some javascript functions to update them. Shoudlnt is a problem in general.

You can see the new canvas tag in HTML 5, but from what you said, I don’t think you need it.

Answer 2

<canvas> seems the right way. A library like Raphael helps avoid cross-platform problems. Other options are Processing.js , but it does not work in IE.

Answer 3

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

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