Pixel Pairs
Turn over two tiles at a time and find all eight matching pairs.
Mechanic: Shuffling, turn state, and delayed match resolution.
First edit: Replace the eight symbols, or change the mismatch delay while preserving the input lock.
Free browser puzzle and board game templates
Pixel Pairs and Three in a Row build their boards with HTML buttons rather than drawing every cell on a canvas. They are useful starters for learning how stored state becomes an interactive interface, with a small enough board to inspect every update.
Pixel Pairs keeps track of hidden symbols, the first selection, and a lock while a mismatch is visible. Three in a Row keeps nine marks and checks eight winning combinations. Neither requires a continuous drawing loop, a database, or a game engine.
For more solo puzzles, merge numbers toward 2048, uncover safe squares in Minefield, turn off a grid in Lights Out, or put Slide Fifteen into order. Four in a Row is another option for two players sharing one screen. Every game has a playable page and a matching source download.
Three in a Row
A two-player game of tic-tac-toe, played on the same device.
Mechanic: Board state, turn switching, and win detection.
First edit: Add a round counter or highlight the winning line before considering a computer opponent.
Merge Tiles
Slide matching numbers together. Build a 2048 tile before the board fills up.
Mechanic: Directional grid transforms, single-merge rules, and move detection.
First edit: Change TARGET from 2048 to 512 for a shorter round. Keep the single-merge rule and only spawn a new tile after a move changes the board.
Minefield
Find the safe squares on an 8 × 8 board. Read the numbers and flag ten hidden mines.
Mechanic: Safe-first-click generation, neighbor counts, flood fill, and flags.
First edit: Change MINES to tune the board, keeping enough cells outside the first-click safety area. Keep flood fill from opening flagged squares.
Four in a Row
Drop discs into seven columns. Connect four before your opponent does, on the same device.
Mechanic: Gravity-based placement, alternating turns, and directional win scans.
First edit: Read the four direction pairs in hasFour. Add a winning-line highlight while preserving the gravity rule and rejecting full columns.
Lights Out
Turn off all 25 lights. Each tap flips one light and its immediate neighbors.
Mechanic: Grid neighbors, reversible toggles, and solvable puzzle generation.
First edit: Change the number of shuffle presses to generate a different opening. Starting from a solved board and applying legal toggles keeps the puzzle solvable.
Slide Fifteen
Put fifteen numbered tiles in order by sliding them into the empty square.
Mechanic: Legal neighbor moves, permutation state, and solvable shuffling.
First edit: Adjust SHUFFLE_STEPS to change the scramble. Shuffle through legal moves instead of a random permutation, which can produce an unsolvable board.
Choose a state-management example
Choose Pixel Pairs to work on shuffling, delayed callbacks, and preventing extra input during a pending action. Choose Three in a Row to work on alternating turns and terminal states. In either starter, check the completion condition before accepting another move, and make Restart clear the entire previous round. Their shared HTML-button approach also gives you a concrete starting point for keyboard focus. Merge Tiles teaches directional transforms, Minefield uses neighbor counts and flood fill, Lights Out uses reversible toggles, and Slide Fifteen demonstrates solvable shuffling. Four in a Row adds gravity and directional line scans.
Questions
Do these templates use a framework?
No. The boards and event handlers use browser HTML, CSS, and JavaScript. The downloadable files have no package dependencies.
Does the tic-tac-toe template include online multiplayer?
No. Two people share one device. Network play would need additional synchronization and hosting logic.
Continue with a related collection or guide, or browse all templates.