Workshop › Sokoban › Step 16 of 29

Push a box

What we are doing

The whole game is one rule: you can push a box, but only one, and never into a wall. If the target tile has a box, we look one tile further: if it is free, the box moves there and the player follows.

```js
const box = boxAt(x, y)
if (box) {
  const bx = x + dx
  const by = y + dy
  if (walls.has(key(bx, by)) || boxAt(bx, by)) return // a box cannot push into a wall or another box
  box.x = bx
  box.y = by
}
```

What it means

• box is the box on the target tile, or undefined; if (box) enters only when there is one.
• bx, by is the tile beyond it, one more step in the same direction.
• A wall or another box there stops everything.
• Otherwise the box moves. box is the object inside boxes, so the array changes too. Then the player steps in.

Your turn

In move, replace the line if (boxAt(x, y)) return // pushing comes in the next step with the push block.

Skills: Game states, Collision detection

← Boxes are in the way A box on a goal turns green →

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