Create a fully functional "8 Puzzle" (3x3 sliding number tile game) using only HTML, CSS, and JavaScript that works on both desktop (mouse click) and mobile (touch input).
1. Game Layout & Design
The puzzle consists of 9 tiles arranged in a 3×3 grid.
Tiles are numbered 1 to 8, and one tile space is left blank. The tile numbers should be randomly shuffled at the start.
Use CSS for styling:
Numbered tiles: blue background with white text
Blank tile: gray background
Display a step counter above the puzzle showing how many moves the player has made.
Show an instruction message at the beginning:
“Click or tap a number tile to move it. Arrange tiles from 1 to 8 to win!”
2. Game Mechanics
Allow the user to click or tap a numbered tile that is adjacent (up/down/left/right) to the blank space to move it.
When a valid move is made, the selected tile should swap with the blank tile, and the tile should briefly flash red as visual feedback.
Controls:
Desktop: Move tiles via mouse click
Mobile: Move tiles via touch input
The winning state is:
1 2 3
4 5 6
7 8 ⬜
When the player wins, show a success message:
“🎉 Congratulations! You solved it!”
Also show a Restart button to play again.
3. Extra Features
Step counter: Increment by +1 every time the player moves a tile; update the counter in real time.
Responsive design: Ensure the grid resizes and looks good on both desktop and mobile screens.
Victory animation: Add a small animation effect when the game is completed successfully to make the game more fun.
Copied
Duplicate the sample to my website
{{ item.name }}{{ item.title }}
Duplicate
Close
