Merge pull request #5106 from AmruthaPariprolu/add/find-the-missing-l…

…etter Added find the missing letter game
kunjgit · Aug 7, 2024 · 7af1820 · 7af1820
2 parents 70482ad + ad1e646
commit 7af1820
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 0 deletions.
diff --git a/Games/Find_The_Missing_Letter/README.md b/Games/Find_The_Missing_Letter/README.md
@@ -0,0 +1,21 @@
+# Find the Missing Letter Game
+
+## Overview
+"Find the Missing Letter" is a simple educational game where players need to guess the missing letter in a word. It is designed to help with letter recognition and spelling practice.
+
+## How to Play
+1. A word will be displayed with one letter missing.
+2. Guess the missing letter by typing it into the input box.
+3. Click "Submit" to check if your guess is correct.
+4. If the guess is correct, the missing letter will be filled in; otherwise, you can try again.
+
+## Files
+- `index.html`: The HTML structure of the game.
+- `styles.css`: The CSS styles for the game.
+- `scripts.js`: The JavaScript logic for the game.
+
+## Installation
+1. Clone or download the repository.
+2. Open `index.html` in a web browser to play the game.
+
+
diff --git a/Games/Find_The_Missing_Letter/index.html b/Games/Find_The_Missing_Letter/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Find the Missing Letter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="game-container">
+        <div class="game-title">Find the Missing Letter</div>
+        <div class="score" id="score">Score: 0</div>
+        <div class="word" id="word">_ _ _ _ _</div>
+        <input type="text" id="guess" class="input" maxlength="1" placeholder="Guess a letter">
+        <button id="submit" class="button">Submit</button>
+        <div id="message"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Find_The_Missing_Letter/script.js b/Games/Find_The_Missing_Letter/script.js
@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const wordElement = document.getElementById('word');
+    const guessInput = document.getElementById('guess');
+    const submitButton = document.getElementById('submit');
+    const messageElement = document.getElementById('message');
+    const scoreElement = document.getElementById('score');
+
+    // List of coding-related words
+    const words = [
+        'algorithm', 'debugging', 'compiler', 'syntax', 'variable',
+        'function', 'iterator', 'object', 'inheritance', 'polymorphism',
+        'repository', 'framework', 'exception', 'module', 'interface',
+        'refactoring', 'dependency', 'frontend', 'backend'
+    ];
+
+    let correctWord;
+    let missingIndex;
+    let displayedWord;
+    let score = 0;
+
+    function getRandomWord() {
+        const randomIndex = Math.floor(Math.random() * words.length);
+        return words[randomIndex];
+    }
+
+    function startGame() {
+        correctWord = getRandomWord();
+        missingIndex = Math.floor(Math.random() * correctWord.length);
+        displayedWord = correctWord.split('');
+        displayedWord[missingIndex] = '_';
+        wordElement.textContent = displayedWord.join('');
+        messageElement.textContent = ''; // Clear previous messages
+        messageElement.classList.remove('correct', 'incorrect'); // Remove previous classes
+        document.body.classList.remove('bg-correct', 'bg-incorrect'); // Reset background color
+    }
+
+    function updateScore(points) {
+        score += points;
+        scoreElement.textContent = `Score: ${score}`;
+    }
+
+    function handleGuess() {
+        const guessedLetter = guessInput.value.toLowerCase();
+        if (guessedLetter === correctWord[missingIndex]) {
+            displayedWord[missingIndex] = guessedLetter;
+            wordElement.textContent = displayedWord.join('');
+            messageElement.textContent = 'Correct!';
+            messageElement.classList.add('correct'); // Add correct class
+            document.body.classList.add('bg-correct'); // Apply light green background
+            updateScore(20); // Add 20 points for a correct answer
+            setTimeout(() => {
+                startGame(); // Restart the game after 1 second
+            }, 1000); // 1 second delay before starting a new game
+        } else {
+            messageElement.textContent = 'Incorrect, try again!';
+            messageElement.classList.add('incorrect'); // Add incorrect class
+            document.body.classList.add('bg-incorrect'); // Apply light red background
+            updateScore(-10); // Subtract 10 points for a wrong answer
+        }
+        guessInput.value = '';
+    }
+
+    startGame();
+
+    submitButton.addEventListener('click', handleGuess);
+});
diff --git a/Games/Find_The_Missing_Letter/style.css b/Games/Find_The_Missing_Letter/style.css
@@ -0,0 +1,103 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #ffeb3b, #ff5722); /* Initial bright gradient background */
+    margin: 0;
+    transition: background-color 0.5s ease; /* Smooth transition for background color change */
+}
+
+.game-container {
+    text-align: center;
+    background-color: #ffffff; /* White background for the game area */
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* More prominent shadow */
+    animation: bounce 1s ease infinite; /* Bounce animation effect */
+}
+
+.game-title {
+    font-size: 2.5em;
+    font-weight: bold;
+    color: #e91e63; /* Bright pink color for the title */
+    margin-bottom: 20px;
+    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3); /* Enhanced shadow effect */
+}
+
+.word {
+    font-size: 2em;
+    margin-bottom: 20px;
+    color: #4caf50; /* Bright green color for the word */
+}
+
+.input {
+    font-size: 1.5em;
+    padding: 10px;
+    margin: 10px;
+    border: 2px solid #2196f3; /* Bright blue border for the input */
+    border-radius: 5px;
+    outline: none;
+    transition: border-color 0.3s ease;
+}
+
+.input:focus {
+    border-color: #0d47a1; /* Darker blue for focus state */
+}
+
+.button {
+    padding: 10px 20px;
+    font-size: 1em;
+    cursor: pointer;
+    background-color: #ff5722; /* Bright orange background for the button */
+    color: #ffffff; /* White text */
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth color transition and scale effect */
+}
+
+.button:hover {
+    background-color: #d84315; /* Darker orange on hover */
+    transform: scale(1.05); /* Slightly enlarge the button on hover */
+}
+
+#message {
+    font-size: 1.2em;
+    margin-top: 20px;
+}
+
+#message.correct {
+    color: #4caf50; /* Bright green color for correct messages */
+}
+
+#message.incorrect {
+    color: #f44336; /* Bright red color for incorrect messages */
+}
+
+.score {
+    font-size: 1.5em;
+    margin-bottom: 20px;
+    color: #2196f3; /* Bright blue color for the score */
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-10px);
+    }
+    60% {
+        transform: translateY(-5px);
+    }
+}
+
+/* Classes for background color changes */
+.bg-correct {
+    background-color: #a5d6a7; /* Light green background for correct answer */
+}
+
+.bg-incorrect {
+    background-color: #ffcdd2; /* Light red background for incorrect answer */
+}
diff --git a/README.md b/README.md
@@ -1702,9 +1702,15 @@ This repository also provides one such platforms where contributers come over an
 |[Synonym_Symphony](https://github.com/kunjgit/GameZone/tree/main/Games/Synonym_Symphony)|
 |[Sentence_Scramble](https://github.com/kunjgit/GameZone/tree/main/Games/Sentence_Scramble)|
 |[Quiz_With_Timer](https://github.com/kunjgit/GameZone/tree/main/Games/Quiz_With_Timer)|
+|[Find_The_Missing_Letter](https://github.com/kunjgit/GameZone/tree/main/Games/Find_The_Missing_Letter)|
+
+
 | [Hole_And_Mole_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hole_And_Mole_Game)|
 |[Animal_Name_Guessing](https://github.com/kunjgit/GameZone/tree/main/Games/Animal_Name_Guessing)|
+add/find-the-missing-letter
+=======
 |[Cross_Road_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Cross_Road_Game)|
+ main
 
  </center>
 

diff --git a/assets/images/Find_The_Missing_Letter.png b/assets/images/Find_The_Missing_Letter.png