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

Wait before clearing

What we are doing

A phase says what the game is doing: 'idle' (waiting for the player) or 'clearing'. A matching swap starts the clearing phase with a timer of 14 frames; update, called every frame, counts it down and then collapses.

```js
let phase // 'idle' or 'clearing' (matched gems flash)
let timer

function reset() {
  // ...
  phase = 'idle'
}

function startClearing() {
  // ...
  phase = 'clearing'
  timer = 14
}

function collapse() {
  // ...
  phase = 'idle'
}

function update() {
  if (phase === 'clearing') {
    timer -= 1
    if (timer === 0) collapse()
    return
  }
}

function loop() {
  update()
  draw()
```

What it means

• reset starts idle. startClearing switches to 'clearing' and sets the timer to 14.
• trySwap no longer collapses at once; update does it when the timer reaches 0, and collapse switches back to 'idle'.
• The loop now calls update() before draw().

Your turn

1. Above let matched write let phase and let timer.
2. In reset, at the end, write phase = 'idle'.
3. In startClearing, at the end, write the two phase/timer lines.
4. In trySwap, delete the collapse() line.
5. In collapse, at the end (after the column loop), write phase = 'idle'.
6. Above function cellAt(event) { write update, and call update() in loop above draw().

Skills: Game states, The game loop

← Two halves of a clear Flash, and hands off →

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