Workshop › Pac-Man-style Maze Chase › Step 5 of 42

Draw the pellets

What we are doing

Draw from the sets, not from the map, so eaten pellets disappear by themselves. A key is turned back into numbers with split and map(Number). Pellets are small 4×4 squares in the middle of their tile, power pellets circles of radius 6.

```js
  ctx.fillStyle = '#fde68a'
  for (const k of pellets) {
    const [col, row] = k.split(',').map(Number)
    ctx.fillRect(col * TILE + 10, TOP + row * TILE + 10, 4, 4)
  }
  for (const k of powers) {
    const [col, row] = k.split(',').map(Number)
    ctx.beginPath()
    ctx.arc(col * TILE + TILE / 2, TOP + row * TILE + TILE / 2, 6, 0, Math.PI * 2)
    ctx.fill()
  }
```

What it means

for (const k of pellets) visits every key in the set.
'8,15'.split(',') is ['8', '15']; .map(Number) turns both into numbers; [col, row] = unpacks them.
+ 10 and size 4 put the square in the middle of the 24-pixel tile.
arc(x, y, radius, 0, Math.PI * 2) is a full circle; beginPath starts it and fill paints it.

Your turn

In draw, under the maze loops, leave an empty line and write the pellet lines.

Skills: Drawing on a canvas

← A set of pellets The player →

All steps