在上一篇HTML5教程中，我們做了一個(gè)簡(jiǎn)化版的Flappy Bird。雖然可以“稱得上”是一款游戲了，但卻是一款很無(wú)聊的游戲。在這篇文章中我們來(lái)看一看如何給它添加動(dòng)畫(huà)效果和音效。雖然并沒(méi)有改變游戲的機(jī)制，但卻能夠使游戲變得更加有趣。你可以點(diǎn)擊這里先體驗(yàn)一下。

　設(shè)置

　　首先下載新的模板。其中包括了我們?cè)谏弦粋€(gè)教程中完成的代碼和一個(gè)新的音效文件。

　　打開(kāi)main.js，開(kāi)始敲吧。

　添加飛行動(dòng)畫(huà)

　　小鳥(niǎo)上下飛行的方式太單調(diào)了，我們來(lái)加一些特效，讓它看起來(lái)有點(diǎn)兒游戲的樣子。

　　1.下降時(shí)角度轉(zhuǎn)動(dòng)速度放慢，直到特定值。

　　2.上升時(shí)翻轉(zhuǎn)角度。

　　第一個(gè)任務(wù)很簡(jiǎn)單，我們只需要添加兩行代碼到update()方法。

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

　　第二步我們有兩個(gè)選擇，簡(jiǎn)單起見(jiàn)，我們可以只在jump()方法中添加

this.bird.angle = -20;

　　但是這中角度的驟變看起來(lái)有點(diǎn)兒別扭。所以，我們還可以讓角度有個(gè)變化的過(guò)程。我們可以用如下代碼替換掉上面的。

// 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();

　　這樣一來(lái)就差不多了，如果你現(xiàn)在測(cè)試一下游戲，你會(huì)發(fā)現(xiàn)小鳥(niǎo)的角度變化得并不自然。像左邊的圖，但是我們想要的是右圖的效果。

　　為了達(dá)到這個(gè)目的，我們要做的是改變小鳥(niǎo)的中心（anchor）。在create()方法中添加如下代碼來(lái)改變中心（anchor）。

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

　　現(xiàn)在測(cè)試一下游戲你就會(huì)發(fā)現(xiàn)已經(jīng)好得多了。

　添加失敗動(dòng)畫(huà)

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

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

　　然后我們來(lái)寫一個(gè)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);
},

　　最后，為了保證撞了管子的小鳥(niǎo)不詐尸，在jump()方法的最前面添加如下代碼：

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

　　動(dòng)畫(huà)效果添加完畢。

　添加音效

　　用Phaser添加音效非常容易。(作者提供的音效文件貌似無(wú)法播放，大家可以找點(diǎn)兒別的代替。)

　　在preload()中添加

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

　　在create()中添加

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

　　最后在jump()中添加

this.jump_sound.play();

　　來(lái)實(shí)現(xiàn)跳躍音效的調(diào)用。

　　最終效果的源碼可以點(diǎn)擊這里下載

　　原文鏈接： lessmilk   翻譯： 伯樂(lè)在線 - 楊帥

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。