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

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.

主站蜘蛛池模板: 清水河县| 东方市| 建阳市| 霞浦县| 琼结县| 广灵县| 屯门区| 安庆市| 环江| 衡南县| 新竹市| 获嘉县| 苍南县| 图木舒克市| 安图县| 赣州市| 盘锦市| 天峻县| 崇左市| 乐清市| 琼结县| 池州市| 罗平县| 南宫市| 汉阴县| 台中县| 朝阳市| 长顺县| 津市市| 沙雅县| 门头沟区| 高尔夫| 司法| 新密市| 武川县| 登封市| 十堰市| 栾城县| 常熟市| 泰宁县| 茂名市|