教你用HTML5製作Flappy Bird（二）

jobbole發表於2014-03-23
HTMLAPP

　　在上一篇HTML5教程中，我們做了一個簡化版的Flappy Bird。雖然可以“稱得上”是一款遊戲了，但卻是一款很無聊的遊戲。在這篇文章中我們來看一看如何給它新增動畫效果和音效。雖然並沒有改變遊戲的機制，但卻能夠使遊戲變得更加有趣。你可以點選這裡先體驗一下。

　設定

　　首先下載新的模板。其中包括了我們在上一個教程中完成的程式碼和一個新的音效檔案。

　　開啟main.js，開始敲吧。

　新增飛行動畫

　　小鳥上下飛行的方式太單調了，我們來加一些特效，讓它看起來有點兒遊戲的樣子。

　　1.下降時角度轉動速度放慢，直到特定值。

　　2.上升時翻轉角度。

　　第一個任務很簡單，我們只需要新增兩行程式碼到update()方法。

if (this.bird.angle < 20)  
    this.bird.angle += 1;

　　第二步我們有兩個選擇，簡單起見，我們可以只在jump()方法中新增

this.bird.angle = -20;

　　但是這中角度的驟變看起來有點兒彆扭。所以，我們還可以讓角度有個變化的過程。我們可以用如下程式碼替換掉上面的。

// create an animation on the bird
var animation = this.game.add.tween(this.bird);

// Set the animation to change the angle of the sprite to -20° in 100 milliseconds
animation.to({angle: -20}, 100);

// And start the animation
animation.start();

　　也可以揉成一行程式碼：

this.game.add.tween(this.bird).to({angle: -20}, 100).start();

　　這樣一來就差不多了，如果你現在測試一下游戲，你會發現小鳥的角度變化得並不自然。像左邊的圖，但是我們想要的是右圖的效果。

　　為了達到這個目的，我們要做的是改變小鳥的中心（anchor）。在create()方法中新增如下程式碼來改變中心（anchor）。

this.bird.anchor.setTo(-0.2, 0.5);

　　現在測試一下游戲你就會發現已經好得多了。

　新增失敗動畫

　　首先，更新update()方法：用hit_pipe()替換restart_rame()。

this.game.physics.overlap(this.bird, this.pipes, this.hit_pipe, null, this);

　　然後我們來寫一個hit_pipe()方法。

hit_pipe: function() {  
    // If the bird has already hit a pipe, we have nothing to do
    if (this.bird.alive == false)
        return;

    // Set the alive property of the bird to false
    this.bird.alive = false;

    // Prevent new pipes from appearing
    this.game.time.events.remove(this.timer);

    // Go through all the pipes, and stop their movement
    this.pipes.forEachAlive(function(p){
        p.body.velocity.x = 0;
    }, this);
},

　　最後，為了保證撞了管子的小鳥不詐屍，在jump()方法的最前面新增如下程式碼：

if (this.bird.alive == false)  
    return;

　　動畫效果新增完畢。

　新增音效

　　用Phaser新增音效非常容易。(作者提供的音效檔案貌似無法播放，大家可以找點兒別的代替。)

　　在preload()中新增

this.game.load.audio('jump', 'assets/jump.wav');

　　在create()中新增

this.jump_sound = this.game.add.audio('jump');

　　最後在jump()中新增

this.jump_sound.play();

　　來實現跳躍音效的呼叫。

　　最終效果的原始碼可以點選這裡下載

　　原文連結： lessmilk   翻譯： 伯樂線上 - 楊帥

相關文章