Welcome to the 3x3 Puzzle Game! This is a simple sliding puzzle game where players can rearrange tiles to form a complete image. It's built using HTML, CSS, and JavaScript.
- Interactive Gameplay: Slide tiles to solve the puzzle.
- Custom Images: Players can upload or enter a URL for a custom image.
- Score Tracking: Keeps track of clicks, including highest and lowest scores.
- Responsive Design: Works well on various screen sizes.
You can view a live demo of the game here.
To run the game locally, follow these steps:
- Clone the repository:
git clone https://github.com/h4jack/3x3puzzle.git- Navigate to the project directory:
cd 3x3-puzzle/html- Open the index.html file in your web browser.
- Starting the Game: Click on the "Start New" button to initialize the game.
- Sliding Tiles: Click on any tile adjacent to the empty space to slide it into that position.
- Custom Images: Enter a URL of a square image or upload a file to set a custom image for the puzzle.
- Score Tracking: Your current clicks will be tracked, along with the lowest and highest clicks.
index.html:Main HTML file containing the layout of the game.style.css:CSS file for styling the game interface.script.js:JavaScript file containing the game logic.
isSwapPossible(obj, closed):Determines if a tile can be swapped with the empty space.swapCols(col, closed):Swaps the clicked tile with the empty space.isSolved():Checks if the puzzle is solved.shufflePuzzle():Shuffles the tiles while ensuring the puzzle is solvable.isValidURL(input):Validates a URL format for custom images.updateScore():Updates the click score and tracks the highest click count.setScores():Retrieves and displays the lowest and highest scores from local storage.
Contributions are always welcome! If you find any issues or have suggestions, please open an issue or submit a pull request.
License nginit is licensed under the MIT License. See the LICENSE file for details.