Workshop › Sokoban › Step 9 of 29

The goals

What we are doing

Goals never move either, so they also go in a Set. Three characters mean a goal: ., and * and + (a box or the player standing on one). They are drawn as small orange dots.

```js
let goals

  goals = new Set()

      if (ch === '.' || ch === '*' || ch === '+') goals.add(key(x, y))

  for (const k of goals) {
    const [x, y] = k.split(',').map(Number)
    tile(x, y, '#f59e0b', 18)
  }
```

What it means

• goals is a new Set, emptied in loadLevel like walls.
• || means "or": the character is a goal if it is ., * or +.
• The goals are drawn like the walls, in orange, inset by 18 pixels: a 12-pixel dot.

Your turn

1. Under let walls write let goals.
2. In loadLevel, under walls = new Set() write goals = new Set(); under the wall if, write the goal if.
3. In draw, under the walls loop, write the goals loop. Press Run.

Skills: Game states, Drawing on a canvas

← Center the level The boxes →

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