kunjgit · Saipradyumnagoud · Jun 21, 2024 · Jun 21, 2024 · Jun 21, 2024
diff --git a/Games/15_Puzzle_Game/15_Puzzle_Game.png b/Games/15_Puzzle_Game/15_Puzzle_Game.png
diff --git a/Games/15_Puzzle_Game/README.md b/Games/15_Puzzle_Game/README.md
@@ -0,0 +1,36 @@
+# **15-Puzzle Game** 
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- The 15-Puzzle Game is a classic sliding puzzle game played on a 4x4 grid with 15 numbered tiles and one empty space. The objective is to reorder the tiles in numerical sequence, from 1 in the top-left corner to 15 in the bottom-right corner, by sliding tiles into the empty space.
+
+## **Functionalities 🎮**
+<!-- add functionalities over here -->
+- 4x4 grid layout with 15 numbered tiles and one empty space.
+- Ability to slide tiles into the adjacent empty space.
+- Score counter to track the number of moves made.
+- "New Game" button to reset the grid and score.
+- Winning condition: Arrange tiles in numerical order from 1 to 15.
+
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- Start the game by clicking the "New Game" button.
+- Click on a tile adjacent to the empty space to slide it into the empty space.
+- Continue sliding tiles to rearrange them in numerical order.
+- The game is won when the tiles are ordered from 1 to 15, starting from the top-left corner to the bottom-right corner.
+- The score (number of moves) is displayed and updated with each tile movement.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![alt text](15_Puzzle_Game.png)
+<br>
diff --git a/Games/15_Puzzle_Game/index.html b/Games/15_Puzzle_Game/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>15-Puzzle Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game-container">
+        <div id="grid" class="grid"></div>
+        <div class="controls">
+            <button id="new-game">New Game</button>
+            <div id="score">Score: 0</div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/15_Puzzle_Game/script.js b/Games/15_Puzzle_Game/script.js
@@ -0,0 +1,86 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const grid = document.getElementById('grid');
+    const newGameButton = document.getElementById('new-game');
+    const scoreDisplay = document.getElementById('score');
+    let score = 0;
+
+    function startNewGame() {
+        const tiles = [...Array(15).keys()].map(i => i + 1);
+        tiles.push(null); // Add empty space
+        shuffle(tiles);
+
+        // Clear the grid
+        grid.innerHTML = '';
+
+        // Create grid
+        tiles.forEach(tile => {
+            const tileElement = document.createElement('div');
+            tileElement.classList.add('tile');
+            if (tile === null) {
+                tileElement.classList.add('empty');
+            } else {
+                tileElement.textContent = tile;
+            }
+            grid.appendChild(tileElement);
+        });
+
+        // Reset score
+        score = 0;
+        updateScore();
+    }
+
+    function shuffle(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [array[i], array[j]] = [array[j], array[i]];
+        }
+    }
+
+    function isAdjacent(index1, index2) {
+        const x1 = index1 % 4, y1 = Math.floor(index1 / 4);
+        const x2 = index2 % 4, y2 = Math.floor(index2 / 4);
+        return (Math.abs(x1 - x2) + Math.abs(y1 - y2)) === 1;
+    }
+
+    function swapTiles(grid, index1, index2) {
+        const tiles = [...grid.children];
+        grid.insertBefore(tiles[index1], tiles[index2]);
+        grid.insertBefore(tiles[index2], tiles[index1]);
+        score++;
+        updateScore();
+    }
+
+    function updateScore() {
+        scoreDisplay.textContent = `Score: ${score}`;
+    }
+
+    function isSolved(tiles) {
+        for (let i = 0; i < 15; i++) {
+            if (parseInt(tiles[i].textContent) !== i + 1) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    grid.addEventListener('click', (e) => {
+        if (!e.target.classList.contains('tile')) return;
+        const emptyTile = document.querySelector('.tile.empty');
+        const emptyIndex = [...grid.children].indexOf(emptyTile);
+        const tileIndex = [...grid.children].indexOf(e.target);
+
+        if (isAdjacent(tileIndex, emptyIndex)) {
+            // Swap tiles
+            swapTiles(grid, tileIndex, emptyIndex);
+            // Check for win
+            if (isSolved([...grid.children])) {
+                alert('Congratulations, you solved the puzzle!');
+            }
+        }
+    });
+
+    newGameButton.addEventListener('click', startNewGame);
+
+    // Start a new game on initial load
+    startNewGame();
+});
diff --git a/Games/15_Puzzle_Game/styles.css b/Games/15_Puzzle_Game/styles.css
@@ -0,0 +1,57 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+
+.game-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #333;
+    background-color: white;
+    padding: 10px;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(4, 100px);
+    grid-template-rows: repeat(4, 100px);
+    gap: 5px;
+}
+
+.tile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    font-weight: bold;
+    background-color: #4caf50;
+    color: white;
+    border: 2px solid #333;
+    cursor: pointer;
+}
+
+.tile.empty {
+    background-color: white;
+    border: none;
+    cursor: default;
+}
+
+.controls {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#score {
+    margin-top: 10px;
+    font-size: 20px;
+}
diff --git a/README.md b/README.md
@@ -799,6 +799,7 @@ This repository also provides one such platforms where contributers come over an
 
 |[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)|
 |[Tic-tac-toe](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Tic-tac-toe)|
+|[15_Puzzle_Game](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/15_Puzzle_Game)|
  </center>
 
 <br>

diff --git a/assets/images/15_Puzzle_Game.png b/assets/images/15_Puzzle_Game.png