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

Two halves of a clear

What we are doing

Everything happens in one instant now: one click and the board has already changed. To show it, the work must be split in two so the halves can happen at different moments: startClearing finds and scores the matches, collapse removes them and lets the gems fall. matched moves up to be shared by both.

```js
let matched // the cells being cleared

  startClearing()
  collapse()

function startClearing() {
  matched = findMatches()
  score += matched.size * 10
}

// Remove the matched gems; everything above falls down to fill the gaps, and new gems drop in from the top.
function collapse() {
  for (const cell of matched) board[Math.floor(cell / N)][cell % N] = -1
```

What it means

• matched is now declared at the top, so startClearing can fill it and collapse can read it later.
• startClearing finds and scores; collapse first empties the matched cells, then works as before.
• trySwap calls the two one after the other, so the game behaves the same for now.

Your turn

1. Under let score write let matched.
2. In trySwap, replace the const matched, score and for lines with startClearing().
3. Above the collapse comment write startClearing.
4. Change the comment above collapse and make the for (const cell of matched) ... line its first line.

Skills: Functions, Game states

← Let the gems fall Wait before clearing →

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