官术网_书友最值得收藏!

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.

主站蜘蛛池模板: 广西| 衡水市| 天长市| 龙川县| 册亨县| 宁远县| 博罗县| 泽库县| 灌云县| 剑河县| 定西市| 钦州市| 仙桃市| 汶川县| 六安市| 灵武市| 博兴县| 青田县| 镇江市| 会宁县| 林州市| 邳州市| 禹城市| 金溪县| 昌邑市| 宁安市| 蒙自县| 青海省| 交口县| 突泉县| 台中市| 合阳县| 郸城县| 高尔夫| 新建县| 太原市| 湘潭县| 玛多县| 岳池县| 江华| 清远市|