Merge branch 'main' into main

kunjgit · Jul 5, 2024 · 9820fd6 · 9820fd6
2 parents 158edde + 5003531
commit 9820fd6
Show file tree

Hide file tree

Showing 613 changed files with 30,679 additions and 988 deletions.
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/Alien_Invasion/.DS_Store b/Games/Alien_Invasion/.DS_Store
diff --git a/Games/Alien_Invasion/README..md b/Games/Alien_Invasion/README..md
@@ -0,0 +1,20 @@
+# AttackAlienInvaders Game App
+A cool 2D alien planet exploration steampunk-themed game application with techniques of vanilla JavaScript, HTML5, CSS3 and HTML Canvas. From sprite animation to parallax backgrounds, the game App is completely built from scratch, with no frameworks or libraries, using HTML, CSS and plain vanilla JavaScript. The game contains richful premium art assets for characters, environments and props.
+
+### [Game Won Demo](https://github.com/KrystalZhang612/KrystalZhang-AttackAlienInvaders-Game-App/blob/main/testing-result-AttackAlienInvader-game-app/Won%20Game.mov): Most Wondrous! Well done explorer!
+https://user-images.githubusercontent.com/72481348/198857930-95a5c040-1d47-4ca6-b5a6-15ac05e8e520.mov
+### [Game Lost Demo](https://github.com/KrystalZhang612/KrystalZhang-AttackAlienInvaders-Game-App/blob/main/testing-result-AttackAlienInvader-game-app/Lost%20Game.mov): Blazed! Get my repair kit and try again! 
+https://user-images.githubusercontent.com/72481348/198857699-86d076d4-f746-435b-89ec-333ad1ba01b8.mov
+
+# Game Premiere Storyline
+***Central Computer***: <br/>
+`These alien creatures have very similar physiology to the earth seahorses. Their bodies can easily cut through the thick atmosphere. They can move very fast.`<br/> 
+***Explorer***:<br/>
+`Seahorses hives are being attacked by something. This one has been damaged. I wonder if you can hack into this creature’s central computer to control it for a while.`<br/> 
+***Central Computer***: <br/>
+`It is surprisingly easy to override its circuits. Seems like these machines are not used by our technology. I’m getting a lot of new data.`<br/> 
+***Central Computer***: <br/>
+`The atmosphere on this planet is thick enough to allow heavy silicon-based lifeforms to float but smoke is blocking most of the sunlight. Many creatures developed artificial lights and glowing appendages to see through the heavy clouds. The Seahorse sentinel has a basic attack that’s powerful against weak enemies, but if it absorbs energy from one of the overcharged creatures, it gets additional firepower for a short period of time and it instantly replenishes its ammo. Ammo also automatically recharges over time. It seems we just need to help it to get through these aggressive swarms in time so it can join its hive.`
+- There is a stream of data about multiple different species.
+- The alien creatures in the hood of their ecosystem have special movements, special abilities, and interact with the environments on other planets.
+