Sokoban Box Pushing Game — Free HTML CSS JS Snippet

Sokoban ("warehouse keeper" in Japanese) is a classic grid-based puzzle: push crates onto target squares by walking into them, one at a time, in a warehouse full of walls. The core constraint that makes it a genuine puzzle rather than a maze is that crates can only ever be pushed, never pulled — a bad push can permanently trap a crate against a wall. This snippet implements a complete playable version in vanilla JavaScript: level parsing from plain text grids, push physics with full collision checking, an undo stack, and automatic progression through multiple bundled levels.

Levels as plain text grids

Each entry in LEVELS is an array of equal-purpose strings using standard Sokoban notation: # for a wall, a space for open floor, . for a target square, $ for a crate, * for a crate already on a target, @ for the player, and + for the player standing on a target. parseLevel() walks every character of every row once and sorts each symbol into a Set — walls, targets, or boxes — keyed by a "r,c" string, plus the player's starting { r, c } position. Using plain text for level data means new levels can be authored by just typing a grid, with no separate level editor or JSON schema required.

Push physics: the collision chain

attemptMove(dir) is the entire physics engine. It first checks whether the player's destination cell is a wall — if so, the move is silently rejected. If the destination holds a crate, it computes where *that* crate would land one more step in the same direction, and rejects the whole move if that landing cell is a wall or already holds another crate (isWall(br, bc) || isBox(br, bc)) — this is what prevents pushing a crate into another crate or into a wall. Only after both checks pass does the function actually mutate state: the crate's key moves from its old position to its new one in the boxes Set, and the player advances into the crate's old cell.

An undo stack instead of a full board-state history

Rather than snapshotting the entire board after every move, history stores only the minimal delta needed to reverse one step: the player's previous position, plus pushedBoxFrom/pushedBoxTo keys if a crate moved on that turn (both null if it didn't). undo() pops the most recent entry, restores the player position, and — if a crate was involved — deletes it from its new key and re-adds it at its old key. This keeps undo cheap regardless of board size and trivially supports unlimited undo depth since every entry is small and independent.

Win detection and auto-advance

checkWin() runs after every completed move and checks whether every key currently in the boxes Set also exists in the targets Set — the moment that's true, every crate is correctly placed regardless of which specific crate sits on which specific target. On a win, the game shows the final move count and, after a short delay, automatically advances to the next bundled level via levelIndex++ and a fresh loadLevel() call, or stays on the final level if none remain.