HTML and CSS Reference
In-Depth Information
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
game
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
following code:
<script src='js/timer.js'></script>
The imer would be a horizontal bar at the top of the game. Its width decreases when you
count down the ime.
Engage thrusters
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
:
<div id="timer"></div>
