HTML and CSS Reference
Objective complete - mini debriefing
The level up is done by couning the current level and selecing the level from the
questLevels array. The nextLevel method is used to increase the currentLevel counter.
Moreover, this method is called once startButton is clicked from the menu. Therefore, it will
increase the currentLevel counter at the beginning. This is why we set the iniial value of
currentLevel to -1 . This will ensure that it selects the first level once the game starts that
is at index 0 of the level array. We reset currentLevel in the startOver method once the
game is over. On the other hand, we display the current level at the top of the game inside the
#stage element. Therefore, we also update that wording every ime the level is up.
Adding a countdown timer to the
In this task, we are going to give a inal touch to the game by adding a countdown imer.
With the imer, the players are not only challenged to select the correct sequence but also
restricted in terms of ime in order to make the game more exciing for the player.
Prepare for lift off
We will need a new ile for the imer. Let's create a new empty ile and name it timer.js .
With the new file, we also need to import it in the index.html file, which is done using the
The imer would be a horizontal bar at the top of the game. Its width decreases when you
count down the ime.
Let's count down the game with the following steps:
1. In the index.html file, we need to add a div method for the imer. Add the
following code to the HTML inside #game :