Adding a countdown timer to the game

In this task, we are going to give a final touch to the game by adding a countdown timer. With the timer, the players are not only challenged to select the correct sequence but also restricted in terms of time in order to make the game more exciting for the player.

Prepare for lift off

We will need a new file for the timer. Let's create a new empty file 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 timer would be a horizontal bar at the top of the game. Its width decreases when you count down the time.

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 timer. Add the following code to the HTML inside #game:

   <div id="timer"></div>

2. Let's move to the game.js file to add the timer control to the game flow:

   gameWin: function() {
     ...
     game.timer.stop();
   },
   gameOver: function() {
     ...
     game.timer.stop();
   },
   startLevel: function() {
     ...
     game.timer.restart();
   },

3. We remove the following code from the init method in order to prevent the timer from starting during the menu scene:

   var init = function() {
     game.flow.startLevel();   <<<<< Delete this line.
   }

4. The timer is something that can be reused in other games, so it is worth creating a dedicated file named timer.js. Let's put the following timer code into the newly created timer.js file:

   (function(){
     var game = this.colorQuestGame = this.colorQuestGame || {};
   
     game.timer = {
       interval: undefined,
       countFrom: 60, // second
       count: this.countFrom,
       progressView: document.getElementById('timer'),
       restart: function() {
         if (this.interval) {
           clearInterval(this.interval);
         }
         this.count = this.countFrom;
         this.interval = setInterval((this.tick).bind(this), 1000);
       },
       stop: function() {        
         clearInterval(this.interval);       
       },
       tick: function() {
         this.count -= 1;
         if (this.count<= 0) {
           this.count = 0;
           clearInterval(this.interval);
           game.flow.gameOver();
          }        
         // update the view
         var progress = this.count / this.countFrom * 100;    
         this.progressView.style.width = progress + "%";
       }
     }
   })();

5. Now, it is time for styling. Let's append the following CSS rules to the game.css file:

   #timer {
     position: absolute;
     top: 0;
     left: 0;
     height: 30px;
     width: 100%;
     background: #7ADAF6 url(images/timer_symbol.png) no-  repeat 5px 50%;  
     border-bottom: 1px solid #4F8EA1;
     transition: all .3s ease-out;
   }

Objective complete – mini debriefing

A simple way to count down is to use the setInterval or setTimeout methods. However, for games, we usually want a global timer to act as the world clock. This way, all the elements will listen for the tick of the timer. When the world clock pauses, all game elements stop, when it resumes, all resume. That's why we have a separate timer object.

The timer has its own interval managed. All we need to do is start and stop the timer and it will run the setInterval and clearInterval methods for us.

By default, the tick function checks whether the time is up and also updates the visual timer DOM node with a width that reflects the countdown.