What you will use in this project
- Game state machines
- CSS transitions and 3D transforms
- High-score persistence with localStorage
- Event delegation in a grid
Web Project: Browser Puzzle Game
Complete each step in the editor and watch the result as your page takes shape.
Build Browser Puzzle Game, step-by-step
Create an engaging puzzle game.
Add multiple difficulty levels and a scoring system.
How it works
- 1 Follow the steps on the left. Each dot in the stepper bar is one focused chunk of work. Read the instructions, the “What to do” checklist, and any hints.
- 2 Write your code on the right. The editor is yours. Files auto-save as you type. Use the Preview tab to see your work in action.
-
3
Click
Check codewhen you’re ready. We grade your work against the step’s rubric and tell you exactly what passed and what still needs work. - 4 Pass a step to move on. Build the project cumulatively. Pass every step to complete it and earn the full XP.
How it’s graded
This project is broken into 11 steps. Each one has its own pass criterion. Click Check code on every step to verify your progress and earn the full +220 XP.
| # | Step & pass criterion | Weight |
|---|---|---|
| 1 | Page shell Stats, board, reset present | 10 pts |
| 2 | Difficulty selector Three difficulty buttons | 10 pts |
| 3 | Style the board Board styled as grid | 5 pts |
| 4 | Style tile states Tile flipped or matched state styled | 5 pts |
| 5 | Define the deck Code shuffles the deck | 10 pts |
| 6 | Render the board JS builds tiles into #board | 10 pts |
| 7 | Click to flip Tile click handler wired | 5 pts |
| 8 |
Match or flip back
|
25 pts |
| 9 | Stats and timer Moves and timer update | 10 pts |
| 10 | Difficulty and reset Difficulty and reset clicks wired | 5 pts |
| 11 | High score High score in localStorage | 5 pts |
