Workshop › Minesweeper › Step 11 of 26

Coloured numbers

What we are doing

An open cell shows how many mines are around it, unless it is 0. Each number has its own colour (1 blue, 2 green, 3 red...), so experienced players read the board at a glance; a lookup list keeps it to one line.

```js
const NUMBER_COLORS = [null, '#2563eb', '#16a34a', '#dc2626', '#7c3aed', '#b45309', '#0891b2', '#111827', '#6b7280']

  ctx.font = 'bold 22px sans-serif'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'

      if (cell.count > 0) {
        ctx.fillStyle = NUMBER_COLORS[cell.count]
        ctx.fillText(String(cell.count), x + CELL / 2, y + CELL / 2 + 1)
      }
```

What it means

• NUMBER_COLORS[n] is the colour of the number n. Index 0 is null because 0 is never written.
• Font and alignment are set once before the loop: text is centred on the given point both ways.
• String(count) turns the number into text for fillText.

Your turn

1. Under const MINES = 10, write NUMBER_COLORS.
2. In draw, above the for loop, write the three text settings.
3. In the if (cell.revealed) block, under its fillRect, write the if (cell.count > 0) block. Press Run.

Skills: Drawing on a canvas

← Open cells look different Click to open →

All steps

1. A grid of cell objects
2. The canvas and the pen
3. Draw the field
4. Draw every frame
5. Neighbours
6. Mines, but not under the first click
7. Shuffle the candidates
8. Count the mines around
9. Open a cell
10. Open cells look different
11. Coloured numbers
12. Click to open
13. Stepping on a mine
14. Show the mines
15. Flood fill
16. Flags with the right button
17. A flag protects its cell
18. Draw the flags
19. Mines left
20. Winning
21. The end and a new game
22. What time is it?
23. The clock
24. Stop the clock
25. The best time
26. Build it yourself: wrong flags