Workshop › Sokoban › Step 15 of 29

Boxes are in the way

What we are doing

boxAt(x, y) finds the box on a tile, if there is one. For now a box blocks the player like a wall; pushing comes next.

```js
function boxAt(x, y) {
  return boxes.find((box) => box.x === x && box.y === y)
}

function move(dx, dy) {
  const x = player.x + dx
  const y = player.y + dy
  if (walls.has(key(x, y))) return
  if (boxAt(x, y)) return // pushing comes in the next step
  player = { x, y }
}
```

What it means

• boxes.find(...) gives the first box for which the test is true, or undefined if there is none.
• The test: the box's x equals x and (&&) its y equals y.
• return gives the found box back to the caller.
• In move, a box on the target tile stops the step for now.

Your turn

1. Above function move, write boxAt and leave an empty line.
2. In move, under the wall line, write the box line. Press Run.

Skills: Arrays and objects, Collision detection

← Walk with the arrows Push a box →

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