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/readme.md b/Games/8_puzzle/readme.md
@@ -0,0 +1,68 @@
+# 8 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.
+
+## Getting Started
+
+### Prerequisites
+
+To run this project, you need a web browser that supports HTML, CSS, and JavaScript.
+
+### 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.
+- `styles.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.
+
+## Demo
+
+You can see a live demo of the game [here](#).
+
+## Contributing
+
+If you'd like to contribute to this project, please fork the repository and use a feature branch. Pull requests are warmly welcome.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
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/readme.md b/Games/Catch_The_Falling_Object/readme.md
@@ -0,0 +1,30 @@
+# Catch the Falling Objects Game
+
+This is a simple browser-based game where you need to catch falling objects using a basket. 
+
+## How to Play
+
+1. Open `index.html` in your web browser.
+2. Move the basket using your mouse to catch falling objects.
+3. If an object reaches the ground without being caught, you'll lose a life.
+4. You have 5 lives. If you lose all lives, the game ends.
+5. Try to catch as many objects as you can to score points.
+
+## Features
+
+- Catch falling objects with the basket.
+- Keep track of your score.
+- Monitor your remaining lives.
+- Restart the game when it's over.
+
+## Screenshots
+
+![Game Screenshot](screenshot.png)
+
+## Credits
+
+This game was created by [Your Name] as a simple project.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).