Merge branch 'main' into main

kunjgit · Jun 13, 2024 · 437e5de · 437e5de
2 parents 51b481c + a1593f4
commit 437e5de
Show file tree

Hide file tree

Showing 102 changed files with 7,393 additions and 200 deletions.
diff --git a/Games/Alphabet-and-Vowels/README.md b/Games/Alphabet-and-Vowels/README.md
@@ -0,0 +1,38 @@
+# **Alphabet and Vowel Game**
+
+---
+
+<br>
+
+## **Description 📃**
+
+- The Alphabet and Vowel Game is an interactive web-based game designed to help players identify vowels and consonants. This game is ideal for educational purposes, providing a fun way to enhance letter recognition and differentiate between vowels and consonants. It offers a seamless and enjoyable experience for players of all ages.
+
+## **Functionalities 🎮**
+
+- Displays a grid of alphabet letters.
+- Prompts players to click on vowels first, followed by consonants.
+- Provides immediate feedback on the correctness of the selected letter.
+- Tracks player progress and updates instructions dynamically.
+- Features a reset button to start a new game session.
+- Boasts a modern, user-friendly interface for an engaging experience.
+
+<br>
+
+## **How to play? 🕹️**
+
+1. Launch the Alphabet and Vowel Game in your browser.
+2. Read the instructions to know whether to click on vowels or consonants.
+3. Click on the letters displayed in the grid according to the instructions.
+4. Receive instant feedback indicating if your choice was correct or incorrect.
+5. Complete the first task (clicking all vowels), then move on to the next task (clicking all consonants).
+6. Use the "Reset Game" button to restart the game at any time.
+
+<br>
+
+## **Screenshots 📸**
+
+![image](https://github.com/kunjgit/GameZone/assets/97523900/03b0a814-d6f5-4aea-8ca9-7995947677e0)
+
+
+<br>
diff --git a/Games/Alphabet-and-Vowels/app.js b/Games/Alphabet-and-Vowels/app.js
@@ -0,0 +1,56 @@
+const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
+const vowels = 'AEIOU';
+let score = 0;
+let target = 'vowel';
+
+document.addEventListener('DOMContentLoaded', () => {
+    const alphabetGrid = document.getElementById('alphabetGrid');
+    const feedback = document.getElementById('feedback');
+    const instruction = document.getElementById('instruction');
+    const resetButton = document.getElementById('resetButton');
+
+    const shuffleArray = array => array.sort(() => Math.random() - 0.5);
+
+    const generateButtons = () => {
+        shuffleArray(alphabet).forEach(letter => {
+            const button = document.createElement('button');
+            button.textContent = letter;
+            button.addEventListener('click', () => checkLetter(letter, button));
+            alphabetGrid.appendChild(button);
+        });
+    };
+
+    const checkLetter = (letter, button) => {
+        if ((target === 'vowel' && vowels.includes(letter)) || 
+            (target === 'consonant' && !vowels.includes(letter))) {
+            button.classList.add('correct');
+            score++;
+            feedback.textContent = 'Correct!';
+        } else {
+            button.classList.add('wrong');
+            feedback.textContent = 'Try again!';
+        }
+
+        button.disabled = true;
+
+        if (score === 5) {
+            target = 'consonant';
+            instruction.textContent = 'Now click on all the consonants!';
+            score = 0;
+            feedback.textContent = '';
+        }
+    };
+
+    const resetGame = () => {
+        alphabetGrid.innerHTML = '';
+        feedback.textContent = '';
+        instruction.textContent = 'Click on all the vowels!';
+        score = 0;
+        target = 'vowel';
+        generateButtons();
+    };
+
+    resetButton.addEventListener('click', resetGame);
+
+    generateButtons();
+});
diff --git a/Games/Alphabet-and-Vowels/index.html b/Games/Alphabet-and-Vowels/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alphabet and Vowel Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Alphabet and Vowel Game</h1>
+        <p id="instruction">Click on all the vowels!</p>
+        <div class="alphabet-grid" id="alphabetGrid"></div>
+        <p id="feedback"></p>
+        <button id="resetButton">Reset Game</button>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Games/Alphabet-and-Vowels/style.css b/Games/Alphabet-and-Vowels/style.css
@@ -0,0 +1,69 @@
+body {
+  font-family: 'Arial', sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #16d1e2;
+}
+
+.container {
+  text-align: center;
+  background: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  color: #333;
+}
+
+.alphabet-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 50px);
+  gap: 10px;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.alphabet-grid button {
+  background-color: #008cba;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  width: 50px;
+  height: 50px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.alphabet-grid button.correct {
+  background-color: #4caf50;
+}
+
+.alphabet-grid button.wrong {
+  background-color: #f44336;
+}
+
+#feedback {
+  margin-top: 20px;
+  font-size: 20px;
+}
+
+#resetButton {
+  background-color: #ff9800;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+#resetButton:hover {
+  background-color: #e68900;
+}
diff --git a/Games/Block_Ninja/README.md b/Games/Block_Ninja/README.md
@@ -0,0 +1,59 @@
+# **Block Ninja**
+
+---
+
+## **Description 📃**
+Block Ninja is an engaging and addictive game where players must slash through blocks that appear on the screen while avoiding dangerous obstacles. The game tests your reflexes and precision as you aim to score the highest points by slicing through as many blocks as possible. The challenge increases with each level, making it an exciting experience for players of all ages.
+
+## **Functionalities 🎮**
+- **Start Game:** Begin a new game session.
+- **Slash Blocks:** Use swipe gestures or mouse movements to slash through blocks.
+- **Avoid Obstacles:** Dodge dangerous obstacles to prevent losing points or ending the game.
+- **Score Tracking:** Keep track of your highest scores and aim to beat them.
+- **Multiple Levels:** Progress through various levels of increasing difficulty.
+- **Sound Effects:** Enjoy immersive sound effects that enhance the gaming experience.
+- **Pause/Resume:** Pause the game anytime and resume from where you left off.
+
+## **How to Play? 🕹️**
+1. **Launch the Game:**
+   - Open the Block Ninja game application on your device.
+
+2. **Start a New Game:**
+   - Click on the "Start Game" button to begin.
+
+3. **Slash Blocks:**
+   - Use your finger (on touch screens) or mouse (on computers) to swipe across the screen.
+   - Slash through the blocks that appear to score points.
+
+4. **Avoid Obstacles:**
+   - Be cautious of obstacles that appear among the blocks.
+   - Avoid slashing through these obstacles as they can end the game or reduce your points.
+
+5. **Score Points:**
+   - Successfully slashing blocks will earn you points.
+   - Try to slash multiple blocks in one swipe for combo points.
+
+6. **Advance Through Levels:**
+   - As you score points, you'll advance through levels of increasing difficulty.
+   - Each level presents new challenges and faster-moving blocks.
+
+7. **Pause/Resume:**
+   - You can pause the game at any time by clicking the "Pause" button.
+   - Resume the game from the same point by clicking "Resume."
+
+8. **End of Game:**
+   - The game ends when you hit a dangerous obstacle or miss too many blocks.
+   - Your final score will be displayed, and you can choose to start a new game.
+
+---
+
+Enjoy slicing through blocks and mastering the art of the Block Ninja! Can you achieve the highest score and become the ultimate ninja?
+
+
+## **Screenshots 📸**
+
+
+![image](../../assets/images/Block_Ninja.png)
+
+<br>
+
diff --git a/Games/Block_Ninja/index.html b/Games/Block_Ninja/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Game canvas -->
+<canvas id="c"></canvas>
+
+<!-- Gameplay HUD -->
+<div class="hud">
+	<div class="hud__score">
+		<div class="score-lbl"></div>
+		<div class="cube-count-lbl"></div>
+	</div>
+	<div class="pause-btn"><div></div></div>
+	<div class="slowmo">
+		<div class="slowmo__bar"></div>
+	</div>
+</div>
+
+<!-- Menu System -->
+<div class="menus">
+	<div class="menu menu--main">
+		<h1>Block Ninja!</h1>
+		<button type="button" class="play-normal-btn">PLAY GAME</button>
+		<button type="button" class="play-casual-btn">CASUAL MODE</button>
+	</div>
+	<div class="menu menu--pause">
+		<h1>Paused</h1>
+		<button type="button" class="resume-btn">RESUME GAME</button>
+		<button type="button" class="menu-btn--pause">MAIN MENU</button>
+	</div>
+	<div class="menu menu--score">
+		<h1>Game Over</h1>
+		<h2>Your Score:</h2>
+		<div class="final-score-lbl"></div>
+		<div class="high-score-lbl"></div>
+		<button type="button" class="play-again-btn">PLAY AGAIN</button>
+		<button type="button" class="menu-btn--score">MAIN MENU</button>
+	</div>
+</div>
+  <script src="script.js"></script>
+</body>
+</html>