Workshop › Sokoban › Step 1 of 29

Sokoban: A level written as text

Push every box onto a goal. Reading a standard level format, sets for walls and goals, the pushing rules, levels, and undo with a history of snapshots.

What we are doing

Sokoban: a warehouse worker pushes boxes onto goals. Its levels have been shared for decades in a tiny text format, one character per tile. We write the first level that way.

```js
// The classic Sokoban text format: # wall, . goal, $ box, * box on a goal, @ player, + player on a goal.
const LEVELS = [
  [
    '#####',
    '#@$.#',
    '#####',
  ],
]
```

What it means

• The comment explains the six characters.
• A level is an array of strings, one string per row: here a corridor with the player, a box and a goal.
• LEVELS is an array of levels (so an array of arrays). For now it has one.

Your turn

Write the comment and the list under the three comment lines, then press Run.

Skills: Arrays and objects

The canvas and the pen →

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