Lights Out Puzzle Game — Free HTML CSS JS Snippet

Lights Out is a classic electronic puzzle from the 1990s: a grid of lights where clicking one tile toggles it and its orthogonal neighbors, and the goal is to turn every light off. It is a pure logic puzzle rooted in linear algebra over GF(2) — every toggle is its own inverse, which makes it possible to generate a puzzle that is provably solvable without running any solver at all. This snippet implements a complete playable 5x5 board in vanilla JavaScript: click handling, the plus-shaped toggle rule, guaranteed-solvable puzzle generation, a move counter, and a best-score tracker.

The plus-shaped toggle rule

applyToggle(r, c) flips the clicked cell and its four orthogonal neighbors (up, down, left, right — never diagonals), skipping any neighbor that falls outside the SIZE x SIZE grid. This five-cell "plus" pattern is the entire rule set of the game. Every other mechanic — solvability, the win condition, puzzle generation — follows directly from how this one function behaves.

Why random toggles from the solved state always produce a solvable puzzle

Because every toggle operation is its own inverse (applying the same toggle twice returns a cell to its original state) and toggles commute with each other, any sequence of toggles applied to the solved, all-off board can be undone by applying the exact same sequence of toggles again, in any order. generatePuzzle() exploits this directly: it starts from an all-off board, records a random sequence of cell coordinates in seed, and applies each one silently. The resulting scrambled board is guaranteed solvable — no backtracking solver or brute-force search is needed to prove it, because the seed sequence itself is a valid solution.

Reset versus New Puzzle

The two action buttons expose this property directly. "Reset puzzle" replays the same seed array from a cleared board, restoring the identical starting position without re-randomizing it — useful if you want to retry a specific puzzle after a failed attempt. "New puzzle" calls generatePuzzle() again, producing a fresh random seed and therefore a fresh solvable puzzle.

Move counting and win detection

Every click that isn't ignored (input is locked once won is true) increments moves and re-renders the grid. checkWin() runs after every move and simply checks whether every entry in the board array is false — Lights Out has no partial-credit state, only fully off or not yet solved. When the board clears, the game locks input, shows the final move count, and updates best if this run beat the previous record for the session.

Rendering as toggled CSS classes, not redrawn DOM

buildGrid() creates the 25 button elements once, and every subsequent update only toggles the .on class via render() — the DOM nodes themselves are never rebuilt during play. This keeps the click handler wiring stable and avoids the flicker or lost focus state that full re-renders can introduce in a rapid-click puzzle game.