Workshop › Sokoban › Step 7 of 29

Draw the walls

What we are doing

Every tile is a 48-pixel square. A small tile helper paints one square, slightly inset; then every wall in the Set is drawn with it.

```js
const TILE = 48

function draw() {
  ctx.fillStyle = '#1c1917'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  const tile = (x, y, color, inset = 0) => {
    ctx.fillStyle = color
    ctx.fillRect(x * TILE + inset, y * TILE + inset, TILE - inset * 2, TILE - inset * 2)
  }

  for (const k of walls) {
    const [x, y] = k.split(',').map(Number)
    tile(x, y, '#78716c', 1)
  }
}
```

What it means

• tile(x, y, color, inset) paints the tile at column x, row y: x * TILE pixels from the left, shrunk by inset on each side. inset = 0 is a default when it is left out.
• for (const k of walls) goes through the Set. k.split(',') cuts '3,2' into ['3', '2'], .map(Number) makes them numbers, and const [x, y] = names the two.
• Walls are grey, inset by 1 pixel, so a thin line shows between them.

Your turn

1. Above // The classic ... write const TILE = 48.
2. In draw, under the fillRect line, leave an empty line and write tile and the for loop. Press Run.

Skills: Drawing on a canvas

← Read the walls Center the level →

All steps

1. A level written as text
2. The canvas and the pen
3. The warehouse floor
4. A function that draws
5. A name for every tile
6. Read the walls
7. Draw the walls
8. Center the level
9. The goals
10. The boxes
11. The player
12. Two more levels
13. One step
14. Walk with the arrows
15. Boxes are in the way
16. Push a box
17. A box on a goal turns green
18. Solved!
19. On to the next level
20. Which level?
21. A line at the bottom
22. Count the moves
23. A photo of the game
24. A photo before every move
25. Undo
26. Restart
27. A record for every level
28. Show the record
29. Build it yourself: count the pushes