Workshop › Minesweeper › Step 19 of 26

Mines left

What we are doing

The top left shows MINES - flags: how many mines are left if every flag is right. It is not stored anywhere; it is counted from the grid each time it is drawn, so it can never be out of date.

```js
const flags = grid.flat().filter((cell) => cell.flagged).length
ctx.fillStyle = 'white'
ctx.font = 'bold 18px monospace'
ctx.textAlign = 'left'
ctx.fillText('💣 ' + (MINES - flags), 10, TOP / 2)
```

What it means

• flags counts the flagged cells.
• The parentheses make the subtraction happen before the text is joined.
• Left-aligned at x = 10, in the middle of the top strip.

Your turn

In draw, under the cell loop, leave an empty line and write the five lines. Press Run.

Skills: Game states, Drawing on a canvas

← Draw the flags Winning →

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