Workshop › Minesweeper › Step 21 of 26

The end and a new game

What we are doing

When the game is over, the top strip says so, in green or red, and a click starts a new game.

```js
canvas.addEventListener('click', (event) => {
  if (state === 'won' || state === 'lost') {
    newGame()
    return
  }

  if (state === 'won' || state === 'lost') {
    ctx.textAlign = 'center'
    ctx.fillStyle = state === 'won' ? '#4ade80' : '#f87171'
    ctx.fillText(state === 'won' ? 'You win!' : 'Boom! Click to retry', canvas.width / 2, TOP / 2)
  }
```

What it means

• A click on a finished game calls newGame() instead of doing nothing.
• The message is centred in the top strip; ? : picks its colour and text.

Your turn

1. In the click listener, turn the first line into the if block with newGame().
2. In draw, under the 💣 line, leave an empty line and write the message block. Press Run.

Skills: Game states, Keyboard and mouse input

← Winning What time is it? →

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