Published on May 14 2024
Welcome to our YouTube tutorial on creating a simple math game using HTML, CSS, and JavaScript. In this video, we’ll guide you through the process, step by step, enabling you to build your own interactive math game.
Let’s dive into the HTML code, which lays the foundation for our math game.
In the <head> section, we have the meta viewport tag to ensure proper scaling on different devices. The title of our webpage is set as “Math Game”. We’ve also linked an external stylesheet named “style.css” to handle the visual presentation of our game.
Moving on to the body of our HTML document, we have two main sections contained within div elements: the game container and the controls container.
Within the game container, we have a heading <h3> prompting players to fill in the blank with the correct number or operator. Beneath the heading, we have a div with the id “question”, which will display the math question dynamically generated by our JavaScript code. Next, we have a submit button with the id “submit-btn” for players to submit their answers. Lastly, there’s a paragraph element with the id “error-msg” reserved for displaying error messages.
In the controls container, we have a paragraph element with the id “result” where the game result will be displayed. Below that, we have a start button with the id “start-btn”, which players will click to begin the game.
To bring our math game to life, we’ve included an external JavaScript file named “script.js” at the end of the body tag.
CSS
We’ll break down each line of CSS code and illustrate how it contributes to the appearance of our math game.
Starting with the universal selector, we’re resetting default padding and margin to zero and setting the box-sizing property to border-box to include padding and borders in the element’s total width. Additionally, we’re specifying the font family to be Arial, Helvetica, or sans-serif as a fallback.
The body selector sets the background colour of our webpage to a vibrant green shade to create a visually appealing backdrop for our game.
Moving on to the .container class, this styles the main container for our game. It has a light peach background colour, a width of 90% of the viewport width with a maximum width of 31.25em, ensuring it remains responsive. The container is positioned absolutely in the centre of the viewport using transform and top/left properties. It has padding, rounded corners, and contains the main content of our game.
Within the container, the h3 selector styles the heading “Fill In The Blank With Correct Number Or Operator”. It has a slightly larger font size, bold weight, and is centred with a dark blue colour for contrast.
The #submit-btn selector styles the submit button. It has a moderate font size, bold weight, rounded corners, and a vibrant green background colour to match the theme of our game. It’s centred horizontally within the container and has white text colour for contrast.
The #error-msg selector styles the paragraph element reserved for displaying error messages. It has a centred text alignment, a light pink background colour, red text colour for emphasis, padding, and rounded corners for a visually appealing display of error messages.
The #question selector styles the div element where the math question will be displayed. It has a light orange background colour, large font size, bold weight, and is centred both horizontally and vertically within the container for prominence.
The input selector styles the input fields where players will input their answers. It has a moderate font size, bold weight, and is centred horizontally. The input fields have a transparent background, a bottom border for a subtle separator effect, and become highlighted when focused.
Moving to the .controls-container selector, this styles the container for game controls. It spans the entire viewport height and width and is positioned absolutely. The background colour is a vibrant green to match the theme.
The #start-btn selector styles the start button for initiating the game. It has a moderate font size, bold weight, rounded corners, and a white background with dark text for contrast. When hovered over, it may change its appearance to indicate interactivity.
Lastly, the #result selector styles the paragraph element where the game result will be displayed. It has a moderate font size, bold weight for emphasis, and dark text colour. Inside the paragraph, certain spans may have increased font weight for emphasis.
The .hide class is used to hide elements by setting their display property to none. This can be useful for hiding elements until they are needed in the game interface.
JAVASCRIPT
Let’s move on to the JavaScript part to give functionality to our math game.
In this video, we’ll go through each line of JavaScript code and explain how it adds interactivity to our math game.
We start by declaring an array named “operators” containing the basic arithmetic operators: addition (+), subtraction (-), and multiplication (*).
Next, we have variable declarations for various elements of our game: startBtn, question, controls, result, submitBtn, and errorMessage. These variables are used to access corresponding elements in the HTML document.
The randomValue function generates a random integer within a specified range. It takes two parameters: min and max, and uses Math.random() to generate a random decimal between 0 and 1, which is then scaled and rounded to produce a random integer between min and max.
The questionGenerator function dynamically generates math questions for the game. It selects two random numbers between 1 and 20 and a random operator from the operators array. Depending on a random variable, it constructs different types of questions: number-number, number-operator, operator-number, or number-operator-number. The user’s answer is stored in the answerValue variable for comparison later.
The event listener for the submit button triggers when the user clicks the submit button. It checks the user’s input against the correct answer and handles different scenarios: correct answer, incorrect answer, and invalid input. It also handles operator-specific questions by verifying the user’s input against the available operators.
The event listener for the start button initialises the game when clicked. It resets necessary variables, hides unnecessary elements, clears any error messages, and calls the questionGenerator function to generate the first question.
The stopGame function handles the end of the game. It displays the result text, changes the start button text to “Restart,” and reveals the controls for restarting the game.
And that’s the JavaScript code for adding functionality to our math game. With these scripts in place, our game is ready to challenge players with dynamic math questions. In the next part of this tutorial series, we’ll explore how to enhance our game further with additional features. So, stay tuned for that!