Skip to content
A close up of a bee collecting pollen from small bunch of orange and red flowers. Leaves fill the foreground and background.

Conway’s Game of Life in HTML5

I first heard of Conway’s Game of Life when I read about the hacker emblem. After seeing a few other stories and projects based on this game, I decided to try my hand at making my own version of it using the web’s latest technologies, HTML5’s canvas element.

The game is normally supposed to be played on an infinite 2D grid, but for the sake of simplicity, I limited the grid to the canvas size. View the source code on GitHub.

How to play

Click on the game board to create cells. The random button will seed some common patterns, like the glider, and R‑pentomino.

Each cell has 4 basic rules determining whether it will live or die on to the next generation.

  • A cell with less than two neighbours will die due to under population.
  • A cell with two or three neighbours will live on to the next generation.
  • A cell with more than three neighbours will die due to overcrowding.
  • A dead cell with 3 neighbours will become alive due to reproduction.

Check out the Hacker News post for more fun tricks.

Generations: 0

Population: 0