Workshop › Conway's Game of Life › Step 1 of 32

Conway's Game of Life: The board

Four simple rules, and a world that comes alive. A grid of cells, counting neighbours, why every cell must change at the same moment (double buffering), a world that wraps around, painting with the pointer, and the famous glider gun.

What we are doing

The Game of Life (John Conway, 1970) is a "zero-player game": you set up a pattern of cells and four simple rules decide everything after that. First we need a board: find the canvas, take its pen and paint it dark.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```

What it means

Your turn

Write the lines under the three comment lines, then press Run.

Skills: Drawing on a canvas

All steps

  1. The board
  2. Measure the grid
  3. One living cell
  4. A function that draws
  5. The world in memory
  6. Draw every living cell
  7. A random soup
  8. Count the neighbours
  9. Four rules
  10. Draw again and again
  11. Next generation with N
  12. Count the generations
  13. Show the generation
  14. A world without edges
  15. Count the living
  16. A generation every few frames
  17. Let it live
  18. Running or not
  19. One place for the buttons
  20. Space to play, N to step
  21. Clear and shuffle
  22. Where is the pointer?
  23. Which cell?
  24. Click a cell
  25. Paint or erase?
  26. Drag to paint
  27. Patterns from text
  28. The glider gun
  29. Fire the gun
  30. Buttons on the screen
  31. Tap the buttons
  32. Build it yourself: a world at rest