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

Flash, and hands off

What we are doing

While clearing, the matched gems flash white: every few frames they switch between white and their color. And clicks are only taken while the game is idle.

```js
    const flashing = phase === 'clearing' && matched.has(r * N + c) && Math.floor(timer / 3) % 2 === 0
    ctx.fillStyle = flashing ? '#ffffff' : COLORS[gem]

if (phase !== 'idle') return
```

What it means

• A gem flashes if we are clearing, it is one of the matched cells (matched.has), and Math.floor(timer / 3) % 2 is 0, which switches on and off every 3 frames.
• The listener returns at once unless the game is idle.

Your turn

1. In draw, replace ctx.fillStyle = COLORS[gem] with the two lines.
2. Make if (phase !== 'idle') return the first line of the click listener.

Skills: Drawing on a canvas, Game states

← Wait before clearing Cascades →

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