kunjgit · kunjgit · Jul 24, 2024 · Jul 21, 2024 · Jul 21, 2024 · Jul 21, 2024
diff --git a/Games/Quick_Math/README.md b/Games/Quick_Math/README.md
@@ -0,0 +1,39 @@
+# **Quick Math**
+
+---
+
+<br>
+
+## **Description 📃**
+
+- Quick Math is a fun and educational browser-based game designed to test and improve your arithmetic skills. Players solve addition problems under a time limit, aiming to score as many points as possible.
+
+
+
+## **Functionalities 🎮**
+
+- Welcomes the player and offers a "Start Game" button to initiate the game.
+- Displays math problems for the player to solve.
+- Enter your answer in the input box and click the "Submit" button.
+- If the answer is correct, the screen flashes green, and your score increases by one.
+- If the answer is incorrect, the screen flashes red, and the next problem is presented.
+- The end screen displays your final score and provides a "Play Again" button.
+
+<br>
+
+## **How to play? 🕹️**
+
+1. Click the "Start Game" button to initiate the game.
+2. A math problem is displayed on the screen. Enter your answer in the input box. Click the "Submit" button to check your answer.
+3. The game timer starts at 30 seconds and ends at 0.
+4. When the game ends, your final score is displayed on the end screen. Click the "Play Again" button to restart the game.
+
+
+<br>
+
+## **Screenshots 📸**
+
+![image](https://github.com/AaryanManghnani/GameZone/blob/QuickMath/assets/images/Quick_Math.png)
+
+
+<br>
diff --git a/Games/Quick_Math/index.html b/Games/Quick_Math/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Math Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="main-menu">
+        <h1>Welcome to Math Game</h1>
+        <button id="startBtn" onclick="startGame()">Start Game</button>
+    </div>
+
+    <div class="container game-container" style="display: none;">
+        <h1>Math Game</h1>
+        <div id="problem"></div>
+        <input type="number" id="answer" placeholder="Enter your answer">
+        <button id="submitBtn" onclick="checkAnswer()">Submit</button>
+        <p>Score: <span id="score">0</span></p>
+        <p id="timerDisplay">Time Left: <span id="timer">30</span> seconds</p>
+    </div>
+
+    <div class="end-screen" style="display: none;">
+        <h1>Game Over!</h1>
+        <p>Your final score is: <span id="finalScore">0</span></p>
+        <button id="playAgainBtn" onclick="playAgain()">Play Again</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Quick_Math/script.js b/Games/Quick_Math/script.js
@@ -0,0 +1,83 @@
+let score = 0;
+let currentProblem = null;
+let timer;
+const GAME_DURATION = 30; // in seconds
+
+function startGame() {
+    score = 0;
+    document.getElementById('finalScore').textContent = score; // Reset end screen score
+    document.querySelector('.main-menu').style.display = 'none';
+    document.querySelector('.end-screen').style.display = 'none';
+    document.querySelector('.game-container').style.display = 'block';
+    document.getElementById('score').textContent = score;
+    document.getElementById('submitBtn').disabled = false;
+    document.getElementById('playAgainBtn').disabled = true;
+    document.getElementById('timerDisplay').style.display = 'block';
+    nextProblem();
+    startTimer();
+}
+
+function nextProblem() {
+    currentProblem = generateProblem();
+    document.getElementById('problem').textContent = currentProblem.question;
+}
+
+function generateProblem() {
+    let num1 = Math.floor(Math.random() * 10) + 1;
+    let num2 = Math.floor(Math.random() * 10) + 1;
+    return { question: `${num1} + ${num2}`, answer: num1 + num2 };
+}
+
+function checkAnswer() {
+    let userAnswer = parseInt(document.getElementById('answer').value);
+    if (userAnswer === currentProblem.answer) {
+        score++;
+        document.getElementById('score').textContent = score;
+        flashScreen('green');
+    } else {
+        flashScreen('red');
+    }
+    nextProblem();
+    document.getElementById('answer').value = '';
+}
+
+function flashScreen(color) {
+    document.body.style.backgroundColor = color;
+    setTimeout(() => {
+        document.body.style.backgroundColor = '#f8f9fa'; // Reset background color
+    }, 200);
+}
+
+function startTimer() {
+    let timeLeft = GAME_DURATION;
+    updateTimerDisplay(timeLeft);
+
+    timer = setInterval(() => {
+        timeLeft--;
+        updateTimerDisplay(timeLeft);
+
+        if (timeLeft === 0) {
+            endGame();
+        }
+    }, 1000);
+}
+
+function updateTimerDisplay(time) {
+    document.getElementById('timer').textContent = time;
+}
+
+function endGame() {
+    clearInterval(timer);
+    document.getElementById('submitBtn').disabled = true;
+    document.querySelector('.game-container').style.display = 'none';
+    document.getElementById('finalScore').textContent = score;
+    document.querySelector('.end-screen').style.display = 'flex';
+    document.getElementById('playAgainBtn').disabled = false;
+}
+
+function playAgain() {
+    score = 0;
+    document.getElementById('score').textContent = score;
+    document.querySelector('.end-screen').style.display = 'none';
+    document.querySelector('.main-menu').style.display = 'flex';
+}
diff --git a/Games/Quick_Math/style.css b/Games/Quick_Math/style.css
@@ -0,0 +1,114 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f8f9fa;
+}
+
+.main-menu, .game-container, .end-screen {
+    text-align: center;
+}
+
+.main-menu {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+}
+
+.main-menu h1 {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.main-menu button {
+    padding: 15px 30px;
+    font-size: 1.5rem;
+    background-color: #4CAF50;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.main-menu button:hover {
+    background-color: #45a049;
+}
+
+.container {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    color: #333;
+}
+
+.container h1 {
+    color: #4CAF50;
+}
+
+.container input[type="number"] {
+    padding: 10px;
+    width: 200px;
+    margin-top: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    color: #333;
+}
+
+.container button {
+    padding: 10px 20px;
+    margin-top: 10px;
+    cursor: pointer;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.container button:hover {
+    background-color: #45a049;
+}
+
+.end-screen {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+}
+
+.end-screen h1 {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.end-screen p {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.end-screen button {
+    padding: 15px 30px;
+    font-size: 1.5rem;
+    background-color: #4CAF50;
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.end-screen button:hover {
+    background-color: #45a049;
+}
diff --git a/README.md b/README.md
@@ -109,7 +109,7 @@ This repository also provides one such platforms where contributers come over an
 
 | Game                                                                                                             | Game                                                                                                    | Game                                                                                                         | Game                                                                                                               | Game                                                                                                  
 | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | --- |
-|[Block Dodger](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Dodger)                                  | [Master Typing](https://github.com/kunjgit/GameZone/tree/main/Games/Master_Typing)                               | [Treasure Hunt](https://github.com/Antiquely3059/GameZone/tree/main/Games/Treasure%20Hunt)              | [Virtual Pet](https://github.com/Antiquely3059/GameZone/tree/main/Games/Virtual_Pet)                         | [MazeRunner](https://github.com/kunjgit/GameZone/tree/main/Games/MazeRunner)                                       | [Ping_Pong_Singleplayer](https://github.com/kunjgit/GameZone/tree/main/Games/Ping_Pong_Singleplayer)        |     |
+|[Block Dodger](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Dodger)                                  | [Quick_Math](https://github.com/kunjgit/GameZone/tree/main/Games/Quick_Math)                                  |[Master Typing](https://github.com/kunjgit/GameZone/tree/main/Games/Master_Typing)                               | [Treasure Hunt](https://github.com/Antiquely3059/GameZone/tree/main/Games/Treasure%20Hunt)              | [Virtual Pet](https://github.com/Antiquely3059/GameZone/tree/main/Games/Virtual_Pet)                         | [MazeRunner](https://github.com/kunjgit/GameZone/tree/main/Games/MazeRunner)                                       | [Ping_Pong_Singleplayer](https://github.com/kunjgit/GameZone/tree/main/Games/Ping_Pong_Singleplayer)        |     |
 | [Tilting Maze](https://github.com/kunjgit/GameZone/tree/main/Games/Tilting_Maze)                                 | [Simon Game Challenge](https://github.com/kunjgit/GameZone/tree/main/Games/Simon_Game_Challenge)        | [Snake Game](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Game)                                 | [Dino Runner Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dino_Runner_Game)                           |
 | [Whack a Mole](https://github.com/kunjgit/GameZone/tree/main/Games/Whack_a_Mole)                                 | [Doraemon Jump](https://github.com/kunjgit/GameZone/tree/main/Games/Doraemon_Jump)                      | [Black Jack](https://github.com/kunjgit/GameZone/tree/main/Games/Black_Jack)                                 | [Memory Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Game)                                     | [Word Guessing Game](https://github.com/kunjgit/GameZone/tree/main/Games/Word_Guessing_Game)                |
 | [Ludo Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ludo_Game)                                       | [Piano Game](https://github.com/kunjgit/GameZone/tree/main/Games/Piano)                                 | [Atari Breakout](https://github.com/kunjgit/GameZone/tree/main/Games/Atari_Breakout)                         | [Dinosaur Game](https://github.com/kunjgit/GameZone/tree/main/Games/Chrome_Dinosaur_Game)                          | [Guess The Colour by RGB Game](https://github.com/kunjgit/GameZone/tree/main/Games/Colour_Guessing_Game)    |
@@ -607,4 +607,4 @@ Terms and conditions for use, reproduction and distribution are under the [Apach
 </center>
 <br>
 
-<p align="right"><a href="#top">Back to top</a></p>
+<p align="right"><a href="#top">Back to top</a></p>
diff --git a/assets/images/Quick_Math.png b/assets/images/Quick_Math.png