kunjgit · kunjgit · Jun 10, 2024 · Jun 9, 2024
diff --git a/Games/Number_Guessing_Game/README.md b/Games/Number_Guessing_Game/README.md
@@ -0,0 +1,32 @@
+<h1>NUMBERGUESSINGGAME</h1>
+
+
+<h2>Description</h2>
+Game Overview:
+The Number Guessing Game is a fun and engaging activity where players attempt to guess a secret number within a specified range. This game tests players' ability to use logic and intuition to narrow down their guesses and find the correct number in the fewest attempts possible. It's suitable for all ages and can be played solo or with friends.
+
+Objective:
+The objective of the game is to guess the secret number chosen by the computer (or another player) in as few guesses as possible.
+
+How to Play:
+Start the Game: The game begins with the computer selecting a random number within a predefined range, for example, 1 to 100.
+Make a Guess: The player makes their first guess by entering a number within the range.
+Receive Feedback: The computer provides feedback on whether the guessed number is too high, too low, or correct.
+Adjust Guess: Based on the feedback, the player adjusts their next guess accordingly.
+Repeat: Steps 2 to 4 are repeated until the player correctly guesses the secret number.
+Win: Once the player guesses the correct number, the game congratulates the player and displays the number of attempts taken.
+Features:
+Difficulty Levels: Players can choose different difficulty levels, which change the range of numbers (e.g., 1-50 for easy, 1-100 for medium, and 1-1000 for hard).
+Hint System: Optional hints can be provided to help players, such as indicating if they are within 10 numbers of the correct answer.
+Score Tracking: The game can track the number of attempts and time taken to guess the correct number, allowing players to challenge themselves to improve.
+Multiplayer Mode: Players can take turns guessing the number, and the one who guesses correctly in the fewest attempts wins.
+Benefits:
+Educational: Helps improve number sense and logical thinking.
+Entertaining: Provides a fun challenge and a sense of achievement when the correct number is guessed.
+Versatile: Suitable for players of all ages and can be played in various settings, from casual gatherings to classroom activities.
+Conclusion:
+The Number Guessing Game is a simple yet captivating game that can provide hours of entertainment and mental stimulation. Whether played alone or with friends, it offers a perfect blend of fun and learning, making it a great choice for anyone looking to pass the time with a challenge.
+
+
+
+
diff --git a/Games/Number_Guessing_Game/favicon/android-chrome-192x192.png b/Games/Number_Guessing_Game/favicon/android-chrome-192x192.png
diff --git a/Games/Number_Guessing_Game/favicon/android-chrome-512x512.png b/Games/Number_Guessing_Game/favicon/android-chrome-512x512.png
diff --git a/Games/Number_Guessing_Game/favicon/apple-touch-icon.png b/Games/Number_Guessing_Game/favicon/apple-touch-icon.png
diff --git a/Games/Number_Guessing_Game/favicon/favicon-16x16.png b/Games/Number_Guessing_Game/favicon/favicon-16x16.png
diff --git a/Games/Number_Guessing_Game/favicon/favicon-32x32.png b/Games/Number_Guessing_Game/favicon/favicon-32x32.png
diff --git a/Games/Number_Guessing_Game/favicon/favicon.ico b/Games/Number_Guessing_Game/favicon/favicon.ico
diff --git a/Games/Number_Guessing_Game/favicon/site.webmanifest b/Games/Number_Guessing_Game/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Number Guessing Game",
+  "short_name": "Number Guessing Game",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#000300",
+  "display": "standalone"
+}
diff --git a/Games/Number_Guessing_Game/index.html b/Games/Number_Guessing_Game/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- FAVICON -->
+    <link rel="shortcut icon" type="image/x-icon" href="favicon/favicon.ico"> <!-- FOR IE -->
+    <link rel="icon" type="image/x-icon" href="favicon/favicon.ico"> <!-- FOR Browser Chrome, Opera, etc -->
+    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png"> <!-- FOR iPhone -->
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
+    <link rel="manifest" href="favicon/site.webmanifest">
+    <!-- TITLE -->
+    <title>Number Guessing Game</title>
+
+    <!-- TAILWIND CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style type="text/tailwindcss">
+        @layer base {
+            .section {
+                @apply h-screen w-screen;
+            }
+        }
+      </style>
+</head>
+
+<body>
+    <section class="section bg-[#000300] text-white flex justify-center items-center">
+        <div class="text-center px-2">
+            <div class="mb-4">
+                <h1 class="text-[#865dff] font-semibold text-2xl mb-4">Guess The Number</h1>
+                <p>
+                    We have randomly selected numbers between 1 - 33. Can you guess it?
+                </p>
+            </div>
+
+            <!-- :::INPUT GUESS -->
+            <div class="relative w-1/2 mx-auto">
+                <input type="number" id="guessInput" placeholder="" min="1" max="33"
+                    class="block rounded-md px-2.5 pb-2.5 pt-5 w-full text-sm text-white bg-gray-800 border-0 border-b-2 border-gray-700 appearance-none focus:border-aese-900 focus:outline-none focus:ring-0 peer">
+                <label for="guessInput"
+                    class="absolute text-sm text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5 peer-focus:text-aese-800 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-[.85] peer-focus:-translate-y-4">
+                    Enter a guess
+                </label>
+
+                <!-- :::SUBMIT -->
+                <button onclick="return guessSubmit()"
+                    class="mt-4 relative inline-flex items-center justify-center inline-block p-4 px-5 py-3 overflow-hidden font-medium text-indigo-600 rounded-lg shadow-2xl group">
+                    <span
+                        class="absolute top-0 left-0 w-40 h-40 -mt-10 -ml-3 transition-all duration-700 bg-red-500 rounded-full blur-md ease"></span>
+                    <span class="absolute inset-0 w-full h-full transition duration-700 group-hover:rotate-180 ease">
+                        <span
+                            class="absolute bottom-0 left-0 w-24 h-24 -ml-10 bg-purple-500 rounded-full blur-md"></span>
+                        <span
+                            class="absolute bottom-0 right-0 w-24 h-24 -mr-10 bg-pink-500 rounded-full blur-md"></span>
+                    </span>
+                    <span class="relative text-white">Submit</span>
+                </button>
+            </div>
+
+            <p id="feedback" class="mt-4 text-pink-500"></p>
+
+            <!-- :::SCRIPT -->
+            <script type="text/javascript">
+                // Generate a Random Number from min 1 to max 33
+                function randomIntFromInterval(min, max) {
+                    return Math.floor(Math.random() * (max - min + 1) + min);
+                }
+                let randomNumber = randomIntFromInterval(1, 33)
+
+                // Counting the number of guesses
+                // made for correct Guess
+                let guess = 1;
+
+                function guessSubmit() {
+                    // Get guess input
+                    let guessInput = document.getElementById("guessInput").value;
+                    if (!guessInput) return feedback.textContent = "Input a valid number"
+
+                    if (randomNumber == Number(guessInput)) {
+                        feedback.textContent = "You're right! You guessed right at " + guess + " attempts!"
+                    }
+                    // If the guess number is greater than the random number
+                    else if (Number(guessInput) > randomNumber) {
+                        feedback.textContent = "Your guess is " + guessInput + ". That's too high. Try a smaller number!"
+                        guess++;
+                    } else {
+                        feedback.textContent = "Your guess is " + guessInput + ". That's too low. Try a greater number!"
+                        guess++;
+                    }
+                }
+            </script>
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/README.md b/README.md
@@ -339,8 +339,7 @@ This repository also provides one such platforms where contributers come over an
 | [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)|
 | [Taash_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Taash_Game)|
-
-
+| [Number_Guessing_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Number_Guessing_Gam)|
  </center>
 
 <br>

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