kunjgit · kunjgit · Jun 12, 2024 · Jun 8, 2024 · Jun 8, 2024 · Jun 9, 2024
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/README.md b/README.md
@@ -338,9 +338,13 @@ This repository also provides one such platforms where contributers come over an
 | [Brick Buster Game](https://github.com/kunjgit/GameZone/tree/main/Games/Brick Buster) |
 | [Rapid_click_frenzy](https://github.com/kunjgit/GameZone/tree/main/Games/Rapid_click_frenzy) 
 |[Penguins Can't Fly](https://github.com/Will2Jacks/GameZoneForked/tree/Task/Games/Penguins_Can't_Fly)|
+
+| [Alphabet-and-Vowels](https://github.com/kunjgit/GameZone/tree/main/Games/Alphabet-and-Vowels) |
+
 | [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game)|
 
 
+
  </center>
 
 <br>

diff --git a/assets/images/Alphabet-and-Vowels.jpeg b/assets/images/Alphabet-and-Vowels.jpeg