Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a new game: Quick math #4885

Closed
wants to merge 13 commits into from
41 changes: 41 additions & 0 deletions Games/Quick_Math/README.md
Original file line number Diff line number Diff line change
@@ -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.

<br>

## **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.


<br>

## **Screenshots 📸**

![image](https://github.com/kunjgit/GameZone/blob/main/assets/images/Quick_Math.png)


<br>
32 changes: 32 additions & 0 deletions Games/Quick_Math/index.html
Original file line number Diff line number Diff line change
@@ -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>
83 changes: 83 additions & 0 deletions Games/Quick_Math/script.js
Original file line number Diff line number Diff line change
@@ -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';
}
114 changes: 114 additions & 0 deletions Games/Quick_Math/style.css
Original file line number Diff line number Diff line change
@@ -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;
}
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change the your repository name with the kunjgit name and end it with your game folder name instead

| [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)
Expand Down
Binary file added assets/images/Quick_Math.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading