大家都是程式設計師，Time和Timer之間的不同肯定是知道的，不過我還是要再重複一遍，在Phaserjs中，Time（Phaser.Time）是時間物件，而Timer（Phaser.Timer）則是定時器物件。

       在Phaserjs中，Time物件雖然都是用來表示時間，可是卻可以細分為三類用途：

       遊戲時間（Game time）：與現實時間執行速度相同的時間，和壁鐘時間不同的是，當遊戲停止時，時間也會停止。遊戲時間被應用在定時器Phaser.Timer中；

       物理時間（Physics time）：代表了物理引擎計算的時間，比如使用慢鏡頭等操作時就是這類時間。物理時間經常被物理引擎計算和tween動畫中。

       壁鐘時間（Wall-clock time）：代表了兩個事件在現實時間中持續時間，獨立於遊戲並且持續執行，無論遊戲是否停止。

       我們這節主要講的其實是第一類：遊戲時間，也就是timer定時器，為什麼要用到定時器，大家想象一下雷電這個遊戲：遊戲視窗上方一直在向下掉隕石等物體，那麼它們的出現時間是怎麼控制的？如果有了定時器，是不是就感覺簡單多了，檢視下面的程式碼：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });

function preload() {
    game.load.image('bisley', 'assets/pics/alex-bisleys_horsy_5.png');
}

var picture;
var counter = 0;
var text = 0;
function create() {
    game.stage.backgroundColor = '#6688ee';

    picture = game.add.sprite(100, 150, 'bisley');
    picture.scale.set(0.5);
    picture.anchor.setTo(0.5, 0.5);

	//延時執行
    game.time.events.add(Phaser.Timer.SECOND * 4, fadePicture, this);
    game.time.events.add(Phaser.Timer.SECOND * 8, fadePicture2, this);
    //重複執行（重複十次）
    game.time.events.repeat(Phaser.Timer.SECOND * 2, 10, createBall, this);
    
    //新增一行文字，顯示和
    text = game.add.text(32, 360, 'Counter: 0', { font: "64px Arial", fill: "#ffffff", align: "center" });
    text.anchor.setTo(0, 0.5);
    //迴圈執行
    game.time.events.loop(Phaser.Timer.SECOND, updateCounter, this);
}
function createBall() {
    //隨機位置新增新的物件
    var bisley2 = game.add.sprite(game.rnd.integerInRange(300, 800), game.world.randomY, 'bisley');
    bisley2.scale.set(0.2);
}
function fadePicture() {
    game.add.tween(picture).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
}
function fadePicture2() {
    game.add.tween(picture).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true);
}
function updateCounter() {
    counter++;
    text.setText('Counter: ' + counter);
}
function render() {
    game.debug.text("Time until event: " + game.time.events.duration, 32, 32);
    game.debug.text("Time until event: " + game.time.events.duration.toFixed(0), 32, 432);
    game.debug.text("Next tick: " + game.time.events.next.toFixed(0), 32, 464);
}
 

       這個例子中，包含了定時器的三種方式：add（執行一次）、repeat（重複一定次數）、loop（迴圈執行），雖然三種方式的操作沒有互相影響，但是game.time.events.duration這個物件確實以最後一次定義的一秒為單位的，而實際上，如果不加迴圈執行的話，它應該是以2秒為單位，如果也沒有重複，那麼單位就會變成4秒。也就是說，game.time.events.duration總是以最新的定時器為準。

       當我們用定時器定時了一個任務，在等待執行的過程中可能會碰到各種問題或需求要暫停執行或者銷燬，這些，就需要相對應的其他方法了，檢視程式碼：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });

function preload() {
    game.load.image('bisley', 'assets/pics/alex-bisleys_horsy_5.png');
}

var timer;
var counter = 0;
var text = 0;
function create() {
    game.stage.backgroundColor = '#6688ee';

    //新增一行文字，顯示和
    text = game.add.text(32, 132, 'Counter: 0', { font: "64px Arial", fill: "#ffffff", align: "center" });
    text.anchor.setTo(0, 0.5);
    //建立一個定時器，迴圈執行
    timer = game.time.create(true);
    timer.loop(2000, updateCounter, this);
    timer.start();
    console.log(timer);
    
    //暫停/繼續
    key_pause = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    key_pause.onDown.add(funcPause, this);
	//停止
    keyStop = game.input.keyboard.addKey(Phaser.Keyboard.ESC);
    keyStop.onDown.add(funcStop, this);
    //開始
    keyStart = game.input.keyboard.addKey(Phaser.Keyboard.ENTER);
    keyStart.onDown.add(funcStart, this);
}
function updateCounter() {
    counter++;
    text.setText('Counter: ' + counter); 
    if(counter > 20){
    	timer.destroy();
    }
}
function funcPause(){
	if(timer.paused){
		timer.resume();
	}
	else{
		timer.pause();
	}
}
function funcStop(){
	timer.stop();
}
function funcStart(){
	timer.start();
}
function render() {
    game.debug.text("Time until event: " + timer.duration, 32, 32);
    game.debug.text("Next tick: " + timer.next.toFixed(0), 32, 64);
}
 

       這段程式碼中，實現了定時器的啟動、暫停、繼續、停止、銷燬等操作，和之前的動畫音訊視訊不一樣，當timer停止之後，就不能再次啟動了，也就是，start()方法就無效了，不信你可以試一下。