Workshop › Mario-style Platformer › Step 22 of 37

Coins

What we are doing

The o characters are coins. Tiles stay in the level forever, but coins disappear when collected, so loadLevel copies each one out of the text into an object in coins. They are drawn as yellow circles, in the world.

```js
let coins

  coins = []

      if (line[col] === 'o') coins.push({ x: x + 8, y: y + 8, w: 16, h: 16, taken: false })

  ctx.fillStyle = '#facc15'
  for (const coin of coins) {
    if (coin.taken) continue
    ctx.beginPath()
    ctx.arc(coin.x + coin.w / 2, coin.y + coin.h / 2, 8, 0, Math.PI * 2)
    ctx.fill()
  }
```

What it means

• A coin is a 16×16 box in the middle of its tile (8 pixels in), and taken: false.
• coins = [] at the start of loadLevel empties the list before filling it.
• beginPath starts a shape; arc(cx, cy, r, 0, Math.PI * 2) is a full circle of radius r around (cx, cy); fill paints it.
• Taken coins are skipped with continue. The coins are drawn before restore, so they scroll with the world.

Your turn

1. Under let player write let coins.
2. In loadLevel, write coins = [] first, and the 'o' line under the 'P' line.
3. In draw, above ctx.fillStyle = '#dc2626', write the coin drawing and an empty line.

Skills: Arrays and objects, Drawing on a canvas

← Draw only what is on screen Collect them →

All steps

1. The sky
2. A level made of text
3. Draw the tiles
4. What is solid?
5. Is a box touching anything?
6. Find the start
7. Draw the player
8. Gravity
9. Landing on tiles
10. Which keys are held?
11. Speed up
12. Friction
13. Walls
14. Jump
15. Bump your head
16. Short hops
17. A few frames of grace
18. Coyote time
19. A camera that follows
20. Stop at the ends
21. Draw only what is on screen
22. Coins
23. Collect them
24. Count, and screen versus world
25. Enemies
26. Enemies that walk
27. Do not walk off ledges
28. Lives and a fresh start
29. Falling into a pit
30. Enemies hurt
31. Stomp!
32. Squashed enemies are gone
33. Game over
34. Play again
35. The flag
36. Reach the flag
37. Build it yourself: jump buffering