# Conway's Game of Life in HTML5 Canvas

It's been done elsewhere (and better!), but I've been working on an HTML5 canvas version of Conway's Game of Life as a means of picking up a bit more experience using Canvas. Here's the link, and here's the code - I'm sure you can work out the controls.

There's nothing particularly interesting about it at this stage, but when I get the opportunity I'll probably look at implementing my own mouse handling, zooming and scrolling routines, as I'm currently limited by the available size of the canvas.

It's using a pretty straightforward two-pass algorithm in CoffeeScript – it generates a 2D array of neighbour counts for each cell in one pass, then uses it to evolve the simulation in the next pass. Key routines below:

# Examine each cell. If it is active, then increment neighbour counter # of all surrounding cells. for x in [0..@cols] for y in [0..@rows] if @grid[x][y] neighbour_counts[ x + 1 ][ y + 1 ]++ if x < @cols && y < @rows neighbour_counts[ x ][ y + 1 ]++ if y < @rows neighbour_counts[ x - 1 ][ y + 1 ]++ if x > 0 && y < @rows neighbour_counts[ x - 1 ][ y ]++ if x > 0 neighbour_counts[ x - 1 ][ y - 1 ]++ if x > 0 && y > 0 neighbour_counts[ x ][ y - 1 ]++ if y > 0 neighbour_counts[ x + 1 ][ y - 1 ]++ if x < @cols && y > 0 neighbour_counts[ x + 1 ][ y ]++ if x < @cols # Toggle activity state of cells based on life rules # Any live cell with fewer than two live neighbours dies # Any live cell with two or three live neighbours lives # Any live cell with more than three live neighbours dies # Any dead cell with exactly three live neighbours becomes a live cell for x in [0..@cols] for y in [0..@rows] currently_active = @grid[x][y] neighbour_count = neighbour_counts[x][y] if currently_active if neighbour_count < 2 || neighbour_count > 3 @clear_cell x, y else if neighbour_count == 3 @set_cell x, y