Conway's Game of Life in Javascript/Canvas
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples Update examples HTML Feb 24, 2012
LICENSE Fix License Date Mar 27, 2015
gameoflife.js Add random colorization, and update README Feb 24, 2012 Update Feb 5, 2014

Conway's Game of Life in Javascript/Canvas


View examples of this script in action here:

Note: Best viewed in Chrome

What is Conway's Game of Life?

Wikipedia has a great article, including many examples: Conway's_Game_of_Life on Wikipedia

How to Run

Create new GameOfLife object, and pass it the grid size, cell size, a canvas ID, and an array containing the starting cells:

var game = new GameOfLife(grid_width, grid_height, cell_width, cell_height, "life");

Here's a sample with parameters:

// Must be same size as game dimensions 
//  (10 x 10 in this case)
var starting_cells = [
params = {
  canvas_id:    "life",
  cell_width:   10,
  cell_height:  10,
  init_cells:   starting_cells
game = new GameOfLife(params);

Advance the game to the next step:


To run this as an animation, just set an interval to call game.step(). In this example, it will update every second, but you can modify it to use any millisecond value:

var interval = setInterval(game.step, 1000);

You can stop the animation by calling clearInterval:



// DOM ID of <canvas> element
canvas_id:    "life"

// Pixel width/height of a single cell
cell_width:   10,
cell_height:  10,

// Multi-dimensional Array of Cell Starting Positions
init_cells:   starting_cells

// If true, each cell is assigned a random RGBA colour value
colourful:    true

// Alternate spelling works too ;)
// colorful:     true

See examples folder for more working demos.

Thanks @bgilham