Workshop › Sokoban › Step 24 of 29

A photo before every move

What we are doing

Just before a move really happens, we push a snapshot onto history. Blocked moves must not leave a photo, so the snapshot is taken after all the checks: after the push checks when there is a box, in an else when there is not.

```js
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
  history.push(snapshot())
  box.x = bx
  box.y = by
} else {
  history.push(snapshot())
}
```

What it means

• history.push(snapshot()) adds a photo at the end of the list.
• In the if (box) branch it comes after the wall-or-box check, so a blocked push leaves no photo.
• else runs when there is no box: a plain step, also photographed.

Your turn

In move, write history.push(snapshot()) above box.x = bx, and add the else part after the if (box) block.

Skills: Arrays and objects, Game states

← A photo of the game Undo →

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