Robots slide until they hit something. A* finds the fewest moves to the target.
Four robots sit on a walled 16x16 board, and a robot only stops when it hits a wall or another robot, so reaching a target usually means parking the others as stoppers first. A position is the four robot cells packed into one 32-bit number, with the three helper robots sorted because they are interchangeable. The solver is A*: a backward breadth-first search from the target, letting a robot stop anywhere along a slide, gives a lower bound on moves for every cell (the numbers that flash on the board), so the first solution found is the shortest one. Plain breadth-first search then runs on the same puzzle to show how many more positions it needs, and the radial tree replays A*'s expansions ring by ring, colored by which robot moved.
Try it. Click a robot to select it, then click a cell it can slide to, drag it in a direction, or use the arrow keys (1 to 4 or Tab picks a robot). Solve (Space) plays the shortest solution from where you are, Hint (H) draws the next optimal move, Reset (R), Z to undo, New target (T) and New board (B).
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a sliding robots puzzle with an optimal solver, using JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a 16x16 board on a canvas that fills the window and stays sharp on high-DPI screens. Store walls as four bits per cell (north, east, south, west), keep both sides of every wall in sync, and wall off the border and a 2x2 block in the middle.
- Add a few L-shaped wall corners in each quarter of the board and mark some of them as colored targets.
- Place four colored robots. A robot moves in one of four directions and keeps sliding until the next step would cross a wall or hit another robot. Let me click a robot and then press an arrow key to move it, with a quick eased slide.
- Pick a target and a robot that must reach it. Write a breadth-first search over positions: a position is the four robot cells, which fit in one 32-bit number (8 bits each). Every robot in every direction is a move. Keep a Set of visited positions and parent links, then play back the shortest solution.
- Show how many positions the search visited.
Once that works, make it beautiful and faster:
- Give the board dark tiles with bright wall bars, and draw the robots as glossy domes with eyes that look where they are heading, a motion trail and a little squash when they stop.
- The three helper robots are interchangeable, so sort their cells before packing. Count how many fewer positions that visits.
- Precompute, for every cell, the fewest moves the goal robot would need if it could stop anywhere along a slide (a backward BFS from the target). Use it as the heuristic for A* (when a queued position is reached again by a shorter path, lower its cost and requeue it, or the answer can come out a move too long), and compare A*'s count with plain breadth-first search.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as drawing the search tree, a hint button, or a generator that keeps only targets needing six or more moves.
