Merge branch 'main' into gssoc-towerbuildinggame

kunjgit · Aug 8, 2024 · 9187714 · 9187714
2 parents 9bc39f0 + 7f75d8c
commit 9187714
Show file tree

Hide file tree

Showing 11 changed files with 444 additions and 0 deletions.
diff --git a/Games/Am_I_the_number/README.md b/Games/Am_I_the_number/README.md
@@ -0,0 +1,22 @@
+# **AM I the number** 
+
+---
+
+<br>
+
+## **Description 📃**
+- think of a number and match if the number you thought of matches the number to be guessed under 10 tries.
+
+
+## **How to play? 🕹️**
+- enter a number in the guess field and press submit to check whether the number you thought of matches the number.
+
+
+<br>
+
+
+<br>
+
+
+
+<br>
diff --git a/Games/Am_I_the_number/index.html b/Games/Am_I_the_number/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Am I the number?
+    </title>
+    <link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+    <div id="wrapper">
+        <h1>Number guessing game</h1>
+        <p>Try and guess a random number between 1 to 100</p>
+        <p>You have 10 attempts to get it correct</p>
+    </br>
+    <form class="form">
+        <label2 for="guessField" id="guess">Think of a number</label>
+            <input type="text" id="guessField" class="guessField">
+            <input type="submit" id="subt" value="Submit guess" class="guessSubmit">
+            </form>
+            <div class="resultParas">
+                <p>Previous guesses: <span class="guesses"> </span></p>
+                <p>Guesses remaining: <span class="lastResult">10</span></p>
+                <p class="lowOrHi"></p>
+            </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Am_I_the_number/script.js b/Games/Am_I_the_number/script.js
@@ -0,0 +1,97 @@
+document.addEventListener('DOMContentLoaded', function () {
+    let randomNumber = parseInt(Math.random() * 100 + 1);
+
+    const submit = document.querySelector('#subt');
+    const userInput = document.querySelector('#guessField');
+    const guessSlot = document.querySelector('.guesses');
+    const remaining = document.querySelector('.lastResult');
+    const lowOrHi = document.querySelector('.lowOrHi');
+    const startOver = document.querySelector('.resultParas');
+
+    const p = document.createElement('p');
+
+    let prevGuess = [];
+    let numGuess = 1;
+
+    let playGame = true;
+
+    if (playGame) {
+      submit.addEventListener('click', function (e) {
+        e.preventDefault();
+        const guess = parseInt(userInput.value);
+        console.log(guess);
+        validateGuess(guess);
+      });
+    }
+
+    function validateGuess(guess) {
+      if (isNaN(guess)) {
+        alert('Please enter a valid number');
+      } else if (guess < 1) {
+        alert('Please enter a number more than 1');
+      } else if (guess > 100) {
+        alert('Please enter a number less than 100');
+      } else {
+        prevGuess.push(guess);
+        if (numGuess === 10) {
+          displayGuess(guess);
+          displayMessage(`Game Over. Random number was ${randomNumber}`);
+          endGame();
+        } else {
+          displayGuess(guess);
+          checkGuess(guess);
+        }
+      }
+    }
+
+    function checkGuess(guess) {
+      if (guess === randomNumber) {
+        displayMessage(`You guessed it right`);
+        endGame();
+      } else if (guess < randomNumber) {
+        displayMessage(`Number is TOO low`);
+      } else if (guess > randomNumber) {
+        displayMessage(`Number is TOO high`);
+      }
+    }
+
+    function displayGuess(guess) {
+      userInput.value = '';
+      guessSlot.innerHTML += `${guess}, `;
+      numGuess++;
+      remaining.innerHTML = `${11 - numGuess}`;
+    }
+
+    function displayMessage(message) {
+      lowOrHi.innerHTML = `<h2>${message}</h2>`;
+    }
+
+    function endGame() {
+      userInput.value = '';
+      userInput.setAttribute('disabled', '');
+      if (!document.querySelector('#newGame')) {
+        p.classList.add('button');
+        p.innerHTML = `<h2 id="newGame">Start new Game</h2>`;
+        startOver.appendChild(p);
+      }
+      playGame = false;
+      newGame();
+    }
+
+    function newGame() {
+      const newGameButton = document.querySelector('#newGame');
+      newGameButton.addEventListener('click', function (e) {
+        randomNumber = parseInt(Math.random() * 100 + 1);
+        prevGuess = [];
+        numGuess = 1;
+        guessSlot.innerHTML = '';
+        remaining.innerHTML = `${11 - numGuess}`;
+        userInput.removeAttribute('disabled');
+        lowOrHi.innerHTML = '';
+        startOver.removeChild(p);
+
+        playGame = true;
+      });
+    }
+  });
+
diff --git a/Games/Am_I_the_number/style.css b/Games/Am_I_the_number/style.css
@@ -0,0 +1,77 @@
+.body {
+    font-family: Arial, sans-serif;
+    background-color: #cff6f9;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 600vh;
+    margin: 0;
+}
+#wrapper {
+    background-color: #d4f0fb;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 35%;
+    box-sizing: border-box;
+    margin-left: 32%;
+    margin-top: 10%;
+    margin-right:35%;
+}
+h1 {
+    color: #333;
+    margin-bottom: 10px;
+}
+p {
+    color: #666;
+    margin: 10px 0;
+}
+.form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+label {
+    margin-bottom: 10px;
+}
+.guessField {
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-top:10px;
+    margin-bottom: 10px;
+    width: 80%;
+    box-sizing: border-box;
+}
+.guessSubmit {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: white;
+    cursor: pointer;
+}
+.guessSubmit:hover {
+    background-color: #0056b3;
+}
+.resultParas {
+    margin-top: 20px;
+}
+.resultParas p {
+    margin: 5px 0;
+}
+.lowOrHi h2 {
+    color: #ff0000;
+}
+.button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 20px;
+}
+.button:hover {
+    background-color: #0056b3;
+}
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);
+});