kunjgit · katarianikita2003 · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024 · Jun 5, 2024
diff --git a/Games/8_puzzle/index.html b/Games/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/Games/8_puzzle/script.js b/Games/8_puzzle/script.js
@@ -0,0 +1,89 @@
+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 createTiles() {
+        puzzleContainer.innerHTML = '';
+        tiles.forEach((tile, index) => {
+            const tileElement = document.createElement('div');
+            tileElement.className = 'tile';
+            if (tile === 8) {
+                tileElement.classList.add('empty');
+            } else {
+                tileElement.textContent = tile + 1;
+                tileElement.addEventListener('click', () => moveTile(index));
+            }
+            puzzleContainer.appendChild(tileElement);
+        });
+    }
+
+    function moveTile(index) {
+        if (canMove(index)) {
+            [tiles[emptyIndex], tiles[index]] = [tiles[index], tiles[emptyIndex]];
+            emptyIndex = index;
+            createTiles();
+            if (isSolved()) {
+                clearInterval(timer);
+                alert(`Congratulations, you solved the puzzle in ${Math.floor((Date.now() - startTime) / 1000)} seconds!`);
+            }
+        }
+    }
+
+    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 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]];
+            }
+        } while (isSolved());
+        emptyIndex = tiles.indexOf(8);
+        createTiles();
+        startTimer();
+    }
+
+    function resetTiles() {
+        tiles = [...Array(9).keys()];
+        emptyIndex = 8;
+        createTiles();
+        resetTimer();
+    }
+
+    function isSolved() {
+        return tiles.every((tile, index) => tile === index);
+    }
+
+    function startTimer() {
+        resetTimer();
+        startTime = Date.now();
+        timer = setInterval(() => {
+
+            const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
+            timerElement.textContent = `Time: ${elapsedTime}s`;
+        }, 1000);
+    }
+
+    function resetTimer() {
+        clearInterval(timer);
+        timerElement.textContent = 'Time: 0s';
+    }
+
+    shuffleButton.addEventListener('click', shuffleTiles);
+    resetButton.addEventListener('click', resetTiles);
+
+    createTiles();
+});
diff --git a/Games/8_puzzle/style.css b/Games/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;
+}