After this learning unit, you will be able to:
- Build your own Ten Seconds Math game, using HTML, CSS, JavaScript and jQuery
- Create the logic of the game using JavaScript classes
- Separate the logic of the game from the JavaScript DOM operations
- Original idea: http://www.mental-math-trainer.com/
Ten Seconds Math is a game created by Michael Jakob to challenge a person's mathematical skills against the clock.
- At the beginning, the user has 10 seconds to answer the math dare
- The user chooses what type/s of math operations will face: addition, substraction, multiplication or division
- The clock will start running once the first question is correctly answer
- The time left when the user answers a question will be added to further dares
- Every correct answer will add 10 seconds more to the clock
- The user loses the game when the time is up! Don't let the clock run out!
- Fork this repo
- Clone this repo into your
~/code/labs - The repository have io.sound included. You don't need to add anything to make it work
- The images are also included in the repository
Remember to separate the game logic from the DOM operations and user interactions in your JavaScript code. In this project, you'll find two JavaScript files: tenSecondsMath.js, which holds the game logic and application.js,which will contain the DOM manipulation.
The goal is to be able to play the game without the interface, using the browser's console. So the first code we will build is the tenSecondsMathGame class.
:::info We will provide a possible solution but feel free to find a better one on your own and share it with the class :)
// Happy coding :::
:::success The HTML and CSS code are created and the JavaScript file is already linked in the HTML. :::
We will create the constructor of tenSecondsMathGame. This function will:
- Receive the operation selected by the user and the top limit of the operation's numbers.
- Set the operation the user selected to play with.
- Set the top limit number for the operations.
We also need a function that generates a random number between 1 and the limit number the user indicated. This will be usefull every time we start a new question.
We will create a function to generate the questions itself. It will get two random numbers and will operate with them, depending of the kind of operation the user selected before. If the user selected more than one kind of operation, choose one randomly.
The function will be in charge of:
- Generate the Math question.
- Generate the solution.
- Print the Math question in the console.
:::danger :warning: There are some logic rules you must be aware of:
- The result will never be negative
- The difference between the generated operators can't be less than 3 (except for the division)
- The generated numbers will never be equal (except for the division) :::
Finally, we will create a function that receives the user answer and compares it with the solution, returning if the answer was right or not.
Now, you should be able to play with this in your browser's console:
Now that we are able to generate questions and answer them, we need to integrate the logic to the DOM. We will write all the code related to the DOM into the application.js file to separate logic from DOM manipulation.
In application.js create a click event for the start button.
When you click the button, the application should hide the section game-options and show the section game-board. Also, it will show a new question.
On the other hand, when pressing the start button we will generate a new tenSecondsMathGame. This new object will receive the options chosen by the user and create a new question.
After the question is created, we have to show the question in the DOM for the user.
To answer the question, the user should write in the input field. If the answer is wrong, the border of the input should turn red.
If the user answers correctly, the question is replaced with a new one keeping the user options as before. So, if the user marked adding and substracting, the game will keep providing adding or substracting operations.
We will add a clock to the game so the user has to keep answering questions until the time is up. We need to add an attribute to the game to set how many seconds the user has to answer the questions.
We will start the game setting 10 seconds.
We are going to create the function _startTimer inside the tenSecondsMathGame object. This function will call another function to check recurrently if the time is over.
Create a function _checkTimer in the tenSecondsMathGame object to check the time left in the clock. If it's greater than 0, the game continue and substract a second. When the clock reaches 0, we will stop the execution of the clock.
First, try to print in the console this timer once application starts. It will be shown in the console every second. Lastly, it will print "Time is over!" when zero is reached.
:::success The clock will start when the user answers correctly the first question. :::
We will create a function to add 10 seconds when the user gets a correct answer. Every time this happens, we will add ten seconds to the actual number of seconds left.
Once we start a new game, we will print the clock in the DOM. This clock will be updated every second so the user can see how many seconds he has to answer the questions.
The clock will be updated every time the user answers a question correctly with the additional 10 seconds.
Now we have our game almost complete, but what happens if the clock reaches to zero? What if I want to play again? Let's answer those questions.
When the clock reaches zero, we need to indicate that the game is over and the user can't play anymore. We need to build three actions in order to finish the game:
- Disable the posibility to write anything in the input filed
- Hide the clock
- Show an image to indicate the game is over
We will implement a button to restart the game from the beginning. This button will:
- Hide the game-board section, the restart button and the Game over image
- Show the game-options section and the clock
- Enable the input field to be writtable
The app shows the user when the answer is wrong but what about congrat him when the answer is right?
We are going to create a function that will pop up a coin image and play a sound when the answer is right
:::success Since you have the coin image already downloaded, we just need to use it. :::
We already have the coin image hided in the HTML inside the img tag with id #btc-reward.
We will create a function that will show the image in a random position inside the #game-container element. A second later, it will hide the image again.
To be able to use sound, we will use a library called ion.sound. This JavaScript library has an impressive amount of sounds we can use as examples if you want to try it later. For now, we will use a sound already downloaded for you in this project.
You need to include this piece of code at the beginning of the JavaScript file:
ion.sound({
sounds: [
{
name: "cash-register"
}
],
volume: 1,
path: "audios/",
preload: true
});Once the library and the sounds are loaded, we just need to call a function to make the sound.
ion.sound.play("cash-register");We learnt how to solve a big problem, like a game, splitting it up into small steps. In this example, we had the HTML and CSS already prepared for you, and we learnt how to separate the Javascript in two different parts:
- The JavaScript logic that belongs to the game. This will manage all the operations and will store the necesary data.
- The JavaScript logic that operates with the DOM. This will manage the data to be shown in the HTML and will interact with the user through events.