Workshop › Sokoban › Step 6 of 29

Read the walls

What we are doing

loadLevel turns the text into state: it walks every character with its column x and row y, and puts every wall's key into a Set.

```js
let level = 0
let walls

function loadLevel(index) {
  level = index
  walls = new Set()
  LEVELS[level].forEach((line, y) => {
    ;[...line].forEach((ch, x) => {
      if (ch === '#') walls.add(key(x, y))
    })
  })
}

loadLevel(0)
```

What it means

• level is the index of the current level, walls the Set of wall keys.
• new Set() makes an empty Set, so every load starts clean.
• forEach((line, y) => ...) runs the function for every row, with the row's text and its number.
• [...line] spreads a row into characters; the inner forEach gives each character and its column.
• The ; at the start stops JavaScript from gluing a line that starts with [ to the line before.
• walls.add(key(x, y)) adds the tile's name to the Set.

Your turn

1. Above const key, write let level = 0 and let walls, and leave an empty line.
2. Under the key line, leave an empty line and write loadLevel.
3. At the bottom, write loadLevel(0) above draw(). Press Run.

Skills: Arrays and objects, Game states

← A name for every tile Draw the walls →

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