Workshop › Candy Crush-style Match 3 › Step 27 of 29

The end of a game

What we are doing

When the moves are used up and the last cascade has landed, the game is over: a line says so, and a click starts a new game.

```js
if (movesLeft === 0) {
  if (phase === 'idle') reset()
  return
}

if (movesLeft === 0 && phase === 'idle') {
  ctx.textAlign = 'center'
  ctx.fillText('No moves left! Click to play again', canvas.width / 2, 58)
}
```

What it means

• With no moves left, a click starts a new game once everything has settled, and does nothing else either way.
• The message is shown only when the game is really over.

Your turn

1. Make the movesLeft block the first lines of the click listener.
2. In draw, under the Moves line, write the message block.

Skills: Game states, Keyboard and mouse input

← Twenty moves Remember the best score →

All steps

1. A place for the board
2. A checkered grid
3. The game loop
4. A board of random gems
5. Draw the gems
6. Start without matches
7. Click a gem
8. Show the selection
9. Swap two neighbours
10. Find every match
11. No match, no swap
12. A score and a fresh start
13. Clear the match
14. Let the gems fall
15. Two halves of a clear
16. Wait before clearing
17. Flash, and hands off
18. Cascades
19. Where a gem came from
20. Slide down
21. Out from under the top
22. Is there any move?
23. Never stuck
24. A hint after five seconds
25. Show the hint
26. Twenty moves
27. The end of a game
28. Remember the best score
29. Build it yourself: swipe to swap