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

Buttons on the screen

What we are doing

A phone has no keyboard, so the game gets a row of five buttons under the grid. We draw them from a list of names; the Play button reads Pause while the world runs.

```js
const BAR_Y = TOP + ROWS * CELL + 12 // the row of buttons
const BUTTONS = ['Play', 'Step', 'Random', 'Clear', 'Gun']
const BUTTON_W = canvas.width / BUTTONS.length

  BUTTONS.forEach((label, i) => {
    ctx.fillStyle = '#334155'
    ctx.fillRect(i * BUTTON_W + 4, BAR_Y, BUTTON_W - 8, 36)
    ctx.fillStyle = 'white'
    ctx.font = 'bold 16px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(label === 'Play' && playing ? 'Pause' : label, i * BUTTON_W + BUTTON_W / 2, BAR_Y + 24)
  })
```

What it means

• BAR_Y is 12 pixels below the grid. BUTTON_W is 480 / 5 = 96, one fifth of the width each.
• forEach draws each button: a box starting at i * BUTTON_W, 4 pixels in from each side, 36 tall.
• textAlign = 'center' centres the label on x, the middle of the box.
• label === 'Play' && playing ? 'Pause' : label shows Pause on the Play button while the world runs.

Your turn

1. Under const TOP = 36 write the three button constants.
2. In draw, after the two loops, leave an empty line and write the forEach block.

Skills: Drawing on a canvas, Arrays and objects

← Fire the gun Tap the buttons →

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