Map every position of a sliding-car puzzle, solve it, and generate harder ones.
Each car can only slide along its own lane, so a position is just one offset per car, packed into a single number. Breadth-first search from the start enumerates every position the cars can ever reach (often 5,000 to 20,000), then a second search runs backward from all the solved positions at once and labels each one with its exact distance to the exit. The state graph on the right draws that whole cluster in columns by distance, so the bottlenecks of a hard puzzle show up as narrow waists, and a glowing dot tracks where the lot is now. A hill-climbing generator edits layouts car by car, explores each cluster in full, and keeps its hardest position. It finds 25 to 40 move puzzles in a few seconds; the showcase puzzles (46, 44 and 40 moves) came from longer runs of the same generator.
Try it. Drag a car along its lane to move it. Hint (H) shows the next optimal move, Solve (Space) plays the shortest solution from wherever you are, Reset (R) puts the cars back, Z undoes, and New (N) runs the generator for a fresh hard puzzle.
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-car parking puzzle with a 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:
- The lot is a 6x6 grid. Each car is 2 or 3 cells long, horizontal or vertical, and can only slide along its own row or column. The red car sits in the third row and wins by reaching the exit on the right edge.
- Hard-code one puzzle as a list of cars (orientation, length, lane, offset). Draw the grid and the cars as rounded rectangles on a canvas that fills the window and stays sharp on high-DPI screens.
- Let me drag a car along its lane, clamped so it cannot pass through other cars, snapping to a cell when I let go.
- Write a solver: a position is just the list of car offsets, which you can pack into one number (one base-5 digit per car). From a position, every car can slide any distance until it hits something, and each slide counts as one move. Run breadth-first search from the current position until the red car can reach the exit, keep parent links, and play the solution back with eased animation.
- Show how many positions the search visited.
Once that works, make it beautiful:
- Draw the lot in isometric projection with chunky cars made of boxes (body, cabin with dark windows, wheels), sorted back to front.
- Run the search backward from every solved position at once to label all reachable positions with their distance to a solution. Then a Hint button can just pick any neighbor one step closer.
- Add a generator: place random cars, label the whole cluster, and keep the position farthest from a solution as the puzzle. Keep the hardest one you find.
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 hill climbing over layouts to find much harder puzzles, drawing the cluster of positions as a graph, or a timed challenge mode.
