Merge branch 'main' into main

kunjgit · Jul 7, 2024 · c7df349 · c7df349
2 parents 616e285 + ff6af60
commit c7df349
Show file tree

Hide file tree

Showing 185 changed files with 8,484 additions and 426 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Games/8_Puzzle/README.md b/Games/8_Puzzle/README.md
@@ -0,0 +1,61 @@
+# 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.
+
+## Credits
+
+This game was created by Nikita Saini [github - @katarianikita2003] as a simple project.
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/Aero_Acrobat/about.html b/Games/Aero_Acrobat/about.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>About Us - Aero Acrobat</title>
+    <link rel="stylesheet" href="./assets/stylesheets/main.css">
+    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <style>
+    #about-page {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    text-align: center;
+    padding: 20px;
+}
+
+#about {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 20px;
+    background-color: #333;
+    margin: auto;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 10px;
+}
+
+#about-heading {
+    font-size: 2em;
+    margin-bottom: 20px;
+    font-family: 'Press Start 2P', cursive;
+}
+
+#about-text {
+    font-size: 1.2em;
+    font-family: 'Press Start 2P', cursive;
+}
+
+#back {
+    margin-top: 20px;
+}
+
+#back a {
+    color: #00f;
+    text-decoration: none;
+    font-size: 1.2em;
+}
+
+  </style>
+</head>
+  <body background="./assets/images/body-bg.jpg">
+    <h1>About Us</h1>
+
+    <div id="about-page">
+      <div id="about">
+        <div id="about-heading">ABOUT US</div>
+        <div id="about-text">
+          Welcome to Aero Acrobat! Our game development team is dedicated to creating thrilling and entertaining experiences for players of all ages. Aero Acrobat is a fun and challenging game that combines skill and precision to test your acrobatic abilities in the sky. Our goal is to deliver high-quality gaming experiences that keep you engaged and coming back for more. Thank you for playing Aero Acrobat. If you have any questions or feedback, please reach out to us at [email protected].
+        </div>
+        <div id="back">
+          <a href="index.html">BACK TO MAIN PAGE</a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Games/Aero_Acrobat/index.html b/Games/Aero_Acrobat/index.html
@@ -2,12 +2,11 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
-    <title></title>
+    <title>Aero Acrobat</title>
     <link rel="stylesheet" href="./assets/stylesheets/main.css">
     <script type="application/javascript" src="lib/bundle.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
   <body background="./assets/images/body-bg.jpg">
     <h1>Aero Acrobat</h1>
@@ -19,6 +18,6 @@ <h1>Aero Acrobat</h1>
       <canvas id="game-canvas"  style=""></canvas>
     </div>
     <div id='sound-button'><i class="material-icons">volume_up</i></div>
-    <div id='info-button'><i class="material-icons">info_outline</i></div>
+    <div id='info-button'><a href="about.html"><i class="material-icons">info_outline</i></a></div> <!-- Updated About Us button -->
   </body>
 </html>
diff --git a/Games/Ant_Smasher/Readme.md b/Games/Ant_Smasher/Readme.md
@@ -0,0 +1,20 @@
+# **Game_Name**
+
+Ant Smasher
+
+## **Description 📃**
+
+Frontend game developed using HTML, CSS, JavaScript. Player has to kill all the Ants
+
+## **functionalities 🎮**
+
+- Player has to kill all the Ants by Smashing it.
+
+## **How to play? 🕹️**
+
+- Click the Start button to start the game
+- When players hits the ant the score will get increased.
+
+## **Screenshots 📸**
+
+![alt text](./img/image.png)