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

Where a gem came from

What we are doing

Falling is a drawing trick: the board changes at once, but each gem remembers in drop[r][c] how many pixels above its new place it came from, and is drawn that much higher.

```js
let drop // drop[row][col]: how many pixels above its place a gem is still drawn

  drop = board.map((row) => row.map(() => 0))

      board[write][c] = board[r][c]
      drop[write][c] = (write - r) * SIZE
      write--
    }
    for (let r = write; r >= 0; r--) {
      board[r][c] = randomGem()
      drop[r][c] = (write + 1) * SIZE
    }

      ctx.arc(x + SIZE / 2, y + SIZE / 2 - drop[r][c], SIZE / 2 - 6, 0, Math.PI * 2)
```

What it means

• board.map((row) => row.map(() => 0)) makes a grid the size of the board, full of 0.
• A gem copied from row r down to row write fell write - r rows: that many SIZEs.
• The new gems start above the board: all of them write + 1 rows higher than their places.
• draw subtracts drop[r][c] from the gem's y.

Your turn

1. Under let matched write let drop.
2. In reset, at the end, write the drop = ... line.
3. In collapse, write the two drop[...] lines as shown (put braces around the new-gems loop).
4. In draw, subtract drop[r][c] in the ctx.arc(...) line.

Skills: Game states, Arrays and objects

← Cascades Slide down →

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