Hello everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a Math Game. To build this project, we need HTML, CSS and Javascript.
Math game is a beginner-friendly javascript tutorial. If you are looking for more tutorials to improve your javascript skills, you can check out this playlist here. This playlist consists of more than 100 javascript projects.
The difficulty level of these projects varies from easy to complex. Therefore it makes this playlist suitable for all kinds of javascript learners. So whether you are a javascript beginner or an expert, this playlist has something for you.
Let us take a look at how this project works. Initially, we display a start screen. When the user clicks the start button, we present them with the game screen. The game screen consists of a mathematical equation with a blank space.
The game goal is for the user to fill in the blank with the appropriate number or operator to complete the equation. Once the user fills in their answer, they click on submit.
On clicking the submit button, we display a result screen. We include the result along with a restart button on the result screen.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post you can watch the video down below. Also if you like the video, subscribe to my youtube channel where I post new tips, tricks and tutorials related to web development every alternate day.
Project Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Math Game’. Within this folder, we have three files. These files are index.html, style.css and script.js.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Math Game</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h3>Fill In The Blank With Correct Number Or Operator</h3>
<div id="question"></div>
<button id="submit-btn">Submit</button>
<p id="error-msg">Some Demo Error Message</p>
</div>
<div class="controls-container">
<p id="result"></p>
<button id="start-btn">Start Game</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our project with CSS. For this once again copy the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f4c531;
}
.container {
background-color: #ffffff;
width: 90%;
max-width: 31.25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 5em 3em;
border-radius: 0.5em;
}
.container h3 {
font-size: 1.2em;
color: #23234c;
text-align: center;
font-weight: 500;
line-height: 1.8em;
}
.container #submit-btn {
font-size: 1.2em;
font-weight: 500;
display: block;
margin: 0 auto;
background-color: #f4c531;
border-radius: 0.3em;
border: none;
outline: none;
cursor: pointer;
color: #23234c;
padding: 0.6em 2em;
}
#error-msg {
text-align: center;
margin-top: 1em;
background-color: #ffdde0;
color: #d62f2f;
padding: 0.2em 0;
}
.container #question {
background-color: #eeedf1;
font-size: 2em;
font-weight: 600;
color: #23234c;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: 1.4em 0 1em 0;
padding: 1em 0;
}
.container input {
font-size: 1em;
font-weight: 600;
width: 2.35em;
color: #23234c;
text-align: center;
padding: 0 0.2em;
border: none;
background-color: transparent;
border-bottom: 0.12em solid #23234c;
margin: 0 0.25em;
}
.container input:focus {
border-color: #f4c531;
outline: none;
}
/*Hide Number Arrows*/
.container input[type="number"] {
-moz-appearance: textfield;
}
.container input[type="number"]::-webkit-outer-spin-button,
.container input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.controls-container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #f4c531;
height: 100%;
width: 100%;
top: 0;
}
#start-btn {
font-size: 1.2em;
font-weight: 500;
background-color: #ffffff;
color: #23234c;
border: none;
outline: none;
cursor: pointer;
padding: 0.8em 1.8em;
border-radius: 0.3em;
}
#result {
margin-bottom: 1em;
font-size: 1.5em;
color: #23234c;
}
#result span {
font-weight: 600;
}
.hide {
display: none;
}
Javascript:
Finally, we implement the functionality of our project. For this we use Javascript. Copy the code below and paste it into your script file.
let operators = ["+", "-", "*"];
const startBtn = document.getElementById("start-btn");
const question = document.getElementById("question");
const controls = document.querySelector(".controls-container");
const result = document.getElementById("result");
const submitBtn = document.getElementById("submit-btn");
const errorMessage = document.getElementById("error-msg");
let answerValue;
let operatorQuestion;
//Random Value Generator
const randomValue = (min, max) => Math.floor(Math.random() * (max - min)) + min;
const questionGenerator = () => {
//Two random values between 1 and 20
let [num1, num2] = [randomValue(1, 20), randomValue(1, 20)];
//For getting random operator
let randomOperator = operators[Math.floor(Math.random() * operators.length)];
if (randomOperator == "-" && num2 > num1) {
[num1, num2] = [num2, num1];
}
//Solve equation
let solution = eval(`${num1}${randomOperator}${num2}`);
//For placing the input at random position
//(1 for num1, 2 for num2, 3 for operator, anything else(4) for solution)
let randomVar = randomValue(1, 5);
if (randomVar == 1) {
answerValue = num1;
question.innerHTML = `<input type="number" id="inputValue" placeholder="?"\> ${randomOperator} ${num2} = ${solution}`;
} else if (randomVar == 2) {
answerValue = num2;
question.innerHTML = `${num1} ${randomOperator}<input type="number" id="inputValue" placeholder="?"\> = ${solution}`;
} else if (randomVar == 3) {
answerValue = randomOperator;
operatorQuestion = true;
question.innerHTML = `${num1} <input type="text" id="inputValue" placeholder="?"\> ${num2} = ${solution}`;
} else {
answerValue = solution;
question.innerHTML = `${num1} ${randomOperator} ${num2} = <input type="number" id="inputValue" placeholder="?"\>`;
}
//User Input Check
submitBtn.addEventListener("click", () => {
errorMessage.classList.add("hide");
let userInput = document.getElementById("inputValue").value;
//If user input is not empty
if (userInput) {
//If the user guessed correct answer
if (userInput == answerValue) {
stopGame(`Yippie!! <span>Correct</span> Answer`);
}
//If user inputs operator other than +,-,*
else if (operatorQuestion && !operators.includes(userInput)) {
errorMessage.classList.remove("hide");
errorMessage.innerHTML = "Please enter a valid operator";
}
//If user guessed wrong answer
else {
stopGame(`Opps!! <span>Wrong</span> Answer`);
}
}
//If user input is empty
else {
errorMessage.classList.remove("hide");
errorMessage.innerHTML = "Input Cannot Be Empty";
}
});
};
//Start Game
startBtn.addEventListener("click", () => {
operatorQuestion = false;
answerValue = "";
errorMessage.innerHTML = "";
errorMessage.classList.add("hide");
//Controls and buttons visibility
controls.classList.add("hide");
startBtn.classList.add("hide");
questionGenerator();
});
//Stop Game
const stopGame = (resultText) => {
result.innerHTML = resultText;
startBtn.innerText = "Restart";
controls.classList.remove("hide");
startBtn.classList.remove("hide");
};
That’s it for this tutorial. If you face any issues, you can download the source code by clicking on the ‘Download Code’ button below. You can post your queries and suggestions in the comments below.
Happy Coding!
