Conway's Game of Life in JavaScript

GridOptions
Recording
Interval:

Conway's Game of Life is an example of cellular automation created by British mathematican John Horton Conway in 1970. It is a very specific type of game as it does not involve any players. Game 'plays itself' using the environment configuration that was set up earlier.

For some reason I found the idea of a game that plays itself very interesing, so.. I decided to implement it in JavaScript. (Because everything should be implemented in JavaScript one day, right?)



Rules

Conway's Game of Life environment consists of a matrix of cells. Cell can be in an active state (marked later as:      ) or in inactive state (marked as:      ). Every iteration (game loop step) is checking how many active neighbours particular cell has, and based on the number of neighbours it either activates or deactives itself. The rules are:

- Any live cell with less than 2 live neighbours dies, as if caused by underpopulation.
- Any live cell with more than 3 live neighbours dies, as if by overcrowding.
- Any live cell with 2 or 3 live neighbours lives on to the next generation.
- Any dead cell with exactly 3 live neighbours becomes a live cell.

Implementation

I decided to use jQuery and DOM manipulation, but in a long run it is not the best solution. Current code does not allow me to create big grids and perform complex manipulations as it takes too much effort for a browser to update all cells in the table.

On a plus side - my example should work on all browsers and even though it is not as fast as it could be, it demonstrates the principle quite well.

For those of you who would like to play with my code, I put it in a GitHub repo here.

What's next

Canvas! jQuery performance in manipulating the table above is just too poor. I can't create bigger grid, because it would just take too long for each game loop step to finish.

One way to overcome this problem, is to use HTML5 canvas, and draw pixels on it without relying on slow DOM manipulation. This way I could perform more complex simulations. I could also allow users to 'draw' shapes and allow them to see how they behave in GoL environment.

Stay tuned!

Social/Code

profile for rochal on Stack Exchange, a network of free, community-driven Q&A sites