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;
+}
diff --git a/Games/Catch_The_Falling_Object/index.html b/Games/Catch_The_Falling_Object/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Catch the Falling Objects Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="game-container" id="game-container">
+        <div class="basket" id="basket"></div>
+        <div class="score" id="score">Score: 0</div>
+        <div class="lives" id="lives">
+            Lives:
+            <span id="heart-container">
+                <span class="heart" id="heart1"></span>
+                <span class="heart" id="heart2"></span>
+                <span class="heart" id="heart3"></span>
+                <span class="heart" id="heart4"></span>
+                <span class="heart" id="heart5"></span>
+            </span>
+        </div>
+        <div class="game-over" id="game-over">Game Over<br>Final Score: <span id="final-score"></span><br><button class="btn" onclick="startGame()">Restart</button></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Catch_The_Falling_Object/script.js b/Games/Catch_The_Falling_Object/script.js
@@ -0,0 +1,113 @@
+const basket = document.getElementById('basket');
+const gameContainer = document.getElementById('game-container');
+const scoreDisplay = document.getElementById('score');
+const livesContainer = document.getElementById('lives');
+const gameOverDisplay = document.getElementById('game-over');
+const finalScoreDisplay = document.getElementById('final-score');
+
+let score = 0;
+let lives = 5;
+let fallingObjectInterval;
+let gameOver = false;
+
+document.addEventListener('mousemove', (event) => {
+    if (!gameOver) {
+        let containerRect = gameContainer.getBoundingClientRect();
+        let basketWidth = basket.offsetWidth;
+        let x = event.clientX - containerRect.left - basketWidth / 2;
+        if (x < 0) x = 0;
+        if (x > containerRect.width - basketWidth) x = containerRect.width - basketWidth;
+        basket.style.left = x + 'px';
+    }
+});
+
+function createFallingObject() {
+    if (gameOver) return;
+
+    const fallingObject = document.createElement('div');
+    fallingObject.classList.add('falling-object');
+    fallingObject.style.left = Math.random() * (gameContainer.offsetWidth - 30) + 'px';
+    gameContainer.appendChild(fallingObject);
+
+    let fallingInterval = setInterval(() => {
+        if (gameOver) {
+            clearInterval(fallingInterval);
+            return;
+        }
+
+        let top = parseInt(fallingObject.style.top || 0);
+        if (top > gameContainer.offsetHeight - 40) {
+            clearInterval(fallingInterval);
+            fallingObject.remove();
+            loseLife();
+        } else {
+            fallingObject.style.top = top + 5 + 'px';
+            if (isCaught(fallingObject)) {
+                clearInterval(fallingInterval);
+                fallingObject.remove();
+                score++;
+                scoreDisplay.innerText = 'Score: ' + score;
+            }
+        }
+    }, 20);
+}
+
+function isCaught(fallingObject) {
+    let objectRect = fallingObject.getBoundingClientRect();
+    let basketRect = basket.getBoundingClientRect();
+    return (
+        objectRect.right >= basketRect.left &&
+        objectRect.left <= basketRect.right &&
+        objectRect.bottom >= basketRect.top &&
+        objectRect.top <= basketRect.bottom
+    );
+}
+
+function loseLife() {
+    if (lives > 0) {
+        lives--;
+        updateLivesDisplay();
+    }
+    if (lives <= 0) {
+        endGame();
+    }
+}
+
+function updateLivesDisplay() {
+    livesContainer.innerText = 'Lives: ';
+    for (let i = 1; i <= 5; i++) {
+        const heart = document.createElement('span');
+        heart.classList.add('heart');
+        if (i > lives) {
+            heart.style.color = 'transparent';
+        }
+        heart.innerText = '❤';
+        livesContainer.appendChild(heart);
+    }
+}
+
+function endGame() {
+    gameOver = true;
+    clearInterval(fallingObjectInterval);
+    finalScoreDisplay.innerText = 'Final Score: ' + score; // Display total score
+    gameOverDisplay.innerHTML = 'Game Over<br>' + finalScoreDisplay.innerHTML + '<br><button onclick="startGame()">Restart</button>'; // Update game over display with total score and restart button
+    gameOverDisplay.style.display = 'block';
+}
+
+function startGame() {
+    gameOver = false;
+    score = 0;
+    lives = 5;
+    scoreDisplay.innerText = 'Score: ' + score;
+    updateLivesDisplay();
+    gameOverDisplay.style.display = 'none';
+
+    // Remove existing falling objects
+    document.querySelectorAll('.falling-object').forEach(obj => obj.remove());
+
+    // Start creating falling objects again
+    fallingObjectInterval = setInterval(createFallingObject, 1000);
+}
+
+// Initialize the game
+startGame();