added a new game

kunjgit · Aug 4, 2024 · 309f792 · 309f792
1 parent f5d550b
commit 309f792
Show file tree

Hide file tree

Showing 6 changed files with 226 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/README.md b/README.md
@@ -330,6 +330,7 @@ This repository also provides one such platforms where contributers come over an
 |[Carrom Board Game](https://github.com/kunjgit/GameZone/tree/main/Games/carrom)|
 | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) |
 | [Airhockey_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_Game) |
+| [Am_I_the_number](https://github.com/kunjgit/GameZone/tree/main/Games/Am_I_the_number)   |
  </center>
 
 <br>

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