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

Slide down

What we are doing

Each frame of the falling phase, every drop gets FALL pixels smaller, down to 0. Only when no gem is still in the air has the fall ended; then the cascade check runs as before.

```js
const FALL = 8 // pixels a gem falls per frame

  if (phase === 'falling') {
    let moving = false
    for (let r = 0; r < N; r++) {
      for (let c = 0; c < N; c++) {
        drop[r][c] = Math.max(0, drop[r][c] - FALL)
        if (drop[r][c] > 0) moving = true
      }
    }
    if (moving) return
```

What it means

• Math.max(0, drop - FALL) takes 8 off but never goes below 0.
• moving starts false and becomes true if any gem is still above its place.
• While something moves, update stops there; once everything has landed, the cascade check below runs.

Your turn

1. Under COLORS write FALL.
2. In update, at the top of the 'falling' block, above the // Landed... comment, write the lines shown.

Skills: The game loop, Game states

← Where a gem came from Out from under the top →

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