diff --git a/Games/Quick_Math/README.md b/Games/Quick_Math/README.md new file mode 100644 index 0000000000..427e01b22c --- /dev/null +++ b/Games/Quick_Math/README.md @@ -0,0 +1,41 @@ +# **Quick Math** + +--- + + +## **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 🎮** + +- Begin at the main menu with a welcoming message and a "Start Game" button. +- A math problem(arithmetic) is displayed. +- 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 timer counts down from 30 seconds, displayed at the top of the game interface. +- The end screen displays your final score and provides a "Play Again" button. + +
+ +## **How to play? 🕹ī¸** + +1. Click the "Start Game" button to initiate the game. +2. A math problem (addition) is displayed on the screen. Enter your answer in the input box. +3. Click the "Submit" button to check your answer. +4. The game timer starts at 30 seconds. The game ends when the timer reaches zero. +5. When the game ends, your final score is displayed on the end screen. +6. Click the "Play Again" button to restart the game. + + +
+ +## **Screenshots 📸** + +![image](https://github.com/kunjgit/GameZone/blob/main/assets/images/Quick_Math.png) + + +
diff --git a/Games/Quick_Math/index.html b/Games/Quick_Math/index.html new file mode 100644 index 0000000000..a2038e5b41 --- /dev/null +++ b/Games/Quick_Math/index.html @@ -0,0 +1,32 @@ + + + + + + Math Game + + + +
+

Welcome to Math Game

+ +
+ + + + + + + + \ No newline at end of file diff --git a/Games/Quick_Math/script.js b/Games/Quick_Math/script.js new file mode 100644 index 0000000000..ac128f7c98 --- /dev/null +++ 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'; +} \ No newline at end of file diff --git a/Games/Quick_Math/style.css b/Games/Quick_Math/style.css new file mode 100644 index 0000000000..f1602409e1 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/README.md b/README.md index 5be3c89116..0365c30e94 100644 --- a/README.md +++ b/README.md @@ -110,7 +110,7 @@ This repository also provides one such platforms where contributers come over an | Game | Game | Game | Game | Game | -| [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) | [Madlibs](https://github.com/AaryanManghnani/GameZone/tree/main/Games/Madlibs) | +| [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) | [Madlibs](https://github.com/AaryanManghnani/GameZone/tree/main/Games/Madlibs) | [Quick_Math](https://github.com/kunjgit/GameZone/tree/main/Games/Quick_Math) | | [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) diff --git a/assets/images/Quick_Math.png b/assets/images/Quick_Math.png new file mode 100644 index 0000000000..a2d09255c7 Binary files /dev/null and b/assets/images/Quick_Math.png differ