https://github.com/ajay-dhangar/8-puzzle
8 Number Puzzle Game
https://github.com/ajay-dhangar/8-puzzle
game game-development games
Last synced: 7 months ago
JSON representation
8 Number Puzzle Game
- Host: GitHub
- URL: https://github.com/ajay-dhangar/8-puzzle
- Owner: ajay-dhangar
- Created: 2024-09-28T02:16:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-28T02:23:48.000Z (about 1 year ago)
- Last Synced: 2025-03-19T06:51:44.211Z (7 months ago)
- Topics: game, game-development, games
- Language: JavaScript
- Homepage: https://ajay-dhangar.github.io/8-puzzle/
- Size: 8.79 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Number Puzzle Game
An interactive 8-puzzle game built with HTML, CSS, and JavaScript. The objective of the game is to arrange the tiles in numerical order by sliding them into the empty space.
## Features
- Shuffle the puzzle tiles.
- Reset the puzzle to the solved state.
- Timer to track the time taken to solve the puzzle.
## How to Play
1. Open the game in your web browser.
2. Click the "Shuffle" button to start a new game.
3. Slide the tiles by clicking on them to move them into the empty space.
4. Arrange the tiles in numerical order (1 to 8) with the empty space in the bottom-right corner.
5. The game ends when you have arranged all the tiles correctly. Your score will be displayed based on the number of moves and time taken.
### Installation
1. Clone the repository or download the files.
2. Open the `index.html` file in your preferred web browser.
### Files
- `index.html`: The main HTML file that contains the structure of the game.
- `style.css`: The CSS file that styles the game.
- `script.js`: The JavaScript file that contains the game logic.
### Usage
1. Open `index.html` in your browser.
2. Click the **Shuffle** button to shuffle the tiles.
3. Arrange the tiles in numerical order by clicking on them to slide them into the empty space.
4. The timer starts when you click the **Shuffle** button and stops when you solve the puzzle.
5. Click the **Reset** button to reset the puzzle to the solved state and reset the timer.
## Code Structure
### HTML
The HTML file sets up the game's structure with a container for the puzzle and buttons for shuffling and resetting the tiles.
### CSS
The CSS file styles the game elements, including the puzzle tiles and buttons, and provides a responsive layout.
### JavaScript
The JavaScript file contains the game logic:
- `createTiles()`: Creates and displays the puzzle tiles.
- `moveTile(index)`: Moves a tile if it is adjacent to the empty space.
- `canMove(index)`: Checks if a tile can be moved.
- `shuffleTiles()`: Shuffles the tiles.
- `resetTiles()`: Resets the tiles to the solved state.
- `startTimer()`: Starts the timer.
- `resetTimer()`: Resets the timer.
## Screenshots
## Credits
This game was created by Ajay Dhangar [github - @ajay-dhangar] as a simple project.