Grid Game: Lights Out
Build Lights Out on a 5 × 5 grid in plain JavaScript. The starter renders the grid from a board of booleans; make it a game.
Requirements
- Clicking a cell toggles it and its four neighbours (edges and corners have fewer).
- Count moves and show them; when every light is off, announce the win with the move count and stop accepting clicks.
- "New game" starts from a random board that is guaranteed solvable.
- Render from state: the grid is rebuilt from the board after every change, not patched cell by cell.
- One click listener on the grid (event delegation), not one per cell.
- Cells are buttons with
aria-pressedreflecting their state, and the status line is a live region.
Hints
Hint 1
Keep toggle(board, r, c) pure: copy the rows, flip the five positions that are in bounds, return the copy.
Hint 2
A random board made by applying random toggles to the solved board is solvable by construction — the same toggles undo it.
Hint 3
Read the clicked cell with event.target.closest(".cell") and its data-r / data-c; ignore clicks once the game is won.