Merge pull request #92 from pavitraag/main

Added 8_puzzle
iamrahulmahato · Oct 2, 2024 · 1c11a18 · 1c11a18
2 parents 6011d0c + f84c00f
commit 1c11a18
Show file tree

Hide file tree

Showing 5 changed files with 273 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -105,6 +105,18 @@ <h3 class="card-heading">Storybazzi</h3>
                     </p>
                 </div>
             </a>
+            <a href="./projects/8_puzzle/index.html" class="card"> <!-- Closing tag here is misplaced -->
+                <div class="card-cover counter-cover-colour">
+                    <img src="./assets/image/numbers.png" alt="">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">8 Puzzle</h3>
+                    <p class="card-description">
+                        A 8 Puzzle.
+                    </p>
+                </div>
+            </a>
+
             <a href="./projects/Calculator/index.html" class="card">
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/Calc-100.png" alt="">
@@ -116,6 +128,7 @@ <h3 class="card-heading">Calculator</h3>
                         </p>
                 </div>
             </a>
+
             <a href="./projects/Snake Game/index.html" class="card">
                 <div class="card-cover">
                     <img src="./assets/image/snake.png" alt="">
@@ -219,6 +232,7 @@ <h3 class="card-heading">Tic Tac Toe</h3>
                     </p>
                 </div>
             </a>
+
             <a href="./projects/Number%20Guessing/index.html" class="card">
                 <div class="card-cover counter-cover-colour">
                     <img src="./assets/image/numbers.png" alt="number guessing">

diff --git a/projects/8_puzzle/Readme.md b/projects/8_puzzle/Readme.md
@@ -0,0 +1,57 @@
+# 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 structure of the game 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.
diff --git a/projects/8_puzzle/index.html b/projects/8_puzzle/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>8 Puzzle Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="game-container">
+        <h1>8 Puzzle Game</h1>
+        <div id="timer">Time: 0s</div>
+        <div id="puzzle-container"></div>
+        <div id="buttons">
+            <button id="shuffle-button">Shuffle</button>
+            <button id="reset-button">Reset</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/8_puzzle/script.js b/projects/8_puzzle/script.js
@@ -0,0 +1,101 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const puzzleContainer = document.getElementById('puzzle-container');
+    const shuffleButton = document.getElementById('shuffle-button');
+    const resetButton = document.getElementById('reset-button');
+    const timerElement = document.getElementById('timer');
+
+    let tiles = [...Array(9).keys()];
+    let emptyIndex = 8;
+    let timer;
+    let startTime;
+
+    // Function to create the puzzle tiles
+    function createTiles() {
+        puzzleContainer.innerHTML = '';  // Clear previous tiles
+        tiles.forEach((tile, index) => {
+            const tileElement = document.createElement('div');
+            tileElement.className = 'tile';
+            if (tile === 8) {
+                tileElement.classList.add('empty');  // Empty tile
+            } else {
+                tileElement.textContent = tile + 1;  // Numbered tile
+                tileElement.addEventListener('click', () => moveTile(index));  // Tile click to move
+            }
+            puzzleContainer.appendChild(tileElement);  // Append the tile to container
+        });
+    }
+
+    // Function to move the tile if possible
+    function moveTile(index) {
+        if (canMove(index)) {
+            [tiles[emptyIndex], tiles[index]] = [tiles[index], tiles[emptyIndex]];  // Swap tiles
+            emptyIndex = index;  // Update empty index
+            createTiles();  // Re-render tiles
+            if (isSolved()) {
+                clearInterval(timer);  // Stop timer if solved
+                alert(`Congratulations, you solved the puzzle in ${Math.floor((Date.now() - startTime) / 1000)} seconds!`);
+            }
+        }
+    }
+
+    // Function to check if a tile can move
+    function canMove(index) {
+        const emptyRow = Math.floor(emptyIndex / 3);
+        const emptyCol = emptyIndex % 3;
+        const row = Math.floor(index / 3);
+        const col = index % 3;
+        return (emptyRow === row && Math.abs(emptyCol - col) === 1) || (emptyCol === col && Math.abs(emptyRow - row) === 1);
+    }
+
+    // Function to shuffle the tiles
+    function shuffleTiles() {
+        do {
+            for (let i = tiles.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [tiles[i], tiles[j]] = [tiles[j], tiles[i]];  // Shuffle logic
+            }
+        } while (isSolved());  // Ensure puzzle isn't solved after shuffle
+
+        emptyIndex = tiles.indexOf(8);  // Update empty index
+        createTiles();  // Recreate shuffled tiles
+
+        resetTimer();  // Reset the timer after shuffling
+        startTimer();  // Start the timer after the shuffle
+    }
+
+    // Function to reset the tiles and timer
+    function resetTiles() {
+        tiles = [...Array(9).keys()];  // Reset tiles to original order
+        emptyIndex = 8;  // Reset empty tile index
+        createTiles();  // Re-render tiles
+        resetTimer();  // Reset the timer
+    }
+
+    // Function to check if the puzzle is solved
+    function isSolved() {
+        return tiles.every((tile, index) => tile === index);  // Check if tiles are in order
+    }
+
+    // Function to start the timer
+    function startTimer() {
+        resetTimer();  // Clear any existing timer before starting a new one
+        startTime = Date.now();  // Get start time
+        timer = setInterval(() => {
+            const elapsedTime = Math.floor((Date.now() - startTime) / 1000);  // Calculate elapsed time
+            timerElement.textContent = `Time: ${elapsedTime}s`;  // Update timer display
+        }, 1000);  // Update every second
+    }
+
+    // Function to reset the timer
+    function resetTimer() {
+        clearInterval(timer);  // Stop the previous timer interval
+        timerElement.textContent = 'Time: 0s';  // Reset the displayed timer
+    }
+
+    // Event listeners for shuffle and reset buttons
+    shuffleButton.addEventListener('click', shuffleTiles);
+    resetButton.addEventListener('click', resetTiles);
+
+    // Create initial tiles when page loads
+    createTiles();
+});
diff --git a/projects/8_puzzle/style.css b/projects/8_puzzle/style.css
@@ -0,0 +1,80 @@
+body {
+    display: flex;
+    background-image: linear-gradient(#f0d7ed, #b8dddd);
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+#game-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#puzzle-container {
+    display: grid;
+    grid-template-columns: repeat(3, 100px);
+    gap: 5px;
+    background-color: #cf837d84;
+    padding: 10px;
+    box-shadow: 10px 10px rgb(196, 117, 117);
+}
+
+.tile {
+    width: 100px;
+    height: 100px;
+    background-color: rgba(145, 216, 188, 0.621);
+    color: #f9f9f9;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2em;
+    cursor: pointer;
+    user-select: none;
+}
+
+.tile.empty {
+    background-color: transparent;
+    cursor: default;
+}
+
+#shuffle-button {
+    margin-top: 20px;
+    padding: 7px 50px;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: whitesmoke;
+    background-color: rgb(135, 30, 12);
+    border: 2px solid rgb(0, 0, 0);
+    border-radius: 5px;
+}
+
+#shuffle-button:hover {
+    margin-top: 20px;
+    padding: 7px 50px;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: whitesmoke;
+    background-color: rgb(135, 30, 12);
+    border: 2px solid rgb(0, 0, 0);
+    border-radius: 5px;
+}
+
+#reset-button {
+    margin-top: 20px;
+    padding: 7px 50px;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: whitesmoke;
+    background-color: rgb(135, 30, 12);
+    border: 2px solid rgb(0, 0, 0);
+    border-radius: 5px;
+}
+
+#timer {
+    font-size: 1.5em;
+    margin-bottom: 20px;
+}