在HTML5中，使用 Phaser 實現 Flappy Bird

前言

最近，不管是國內仍是國外，Flappy Bird 火得一踏糊塗，這是一個簡單的遊戲，新手應該比較容易上手，我爲了學習，專門找到了一篇在HTML5 中開發Flappy Bird 的文章。 先看看咱們今天用到的框架:Phaser
是一個快速、自由的遊戲開發框架。託管在github。能夠開發桌面或移動瀏覽器的Html5遊戲。

[warning] 1.你須要懂得一些基本的 javaScript 語言; 2.你若是瞭解更多，關於 Phaser 的文章。你能夠去看看這篇文章 phaser 起步 [/warning]

正文

先下載基本的項目結構basictemplate 你能夠看到如下文件

phaser.min.js, Phaser framework v1.1.5. index.html,遊戲顯示頁 main.js, 咱們須要寫代碼的地方 assets/, 裝了2個兩個圖片 (bird.png and pipe.png).

好了，如今能夠開啓你經常使用的編輯器，準備打代碼了。 打開 main.js 文件，看到：

// 初始化 Phaser, 建立 400x490px 的遊戲
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');  
var game_state = {};

// Creates a new 'main' state that will contain the game
game_state.main = function() { };  
game_state.main.prototype = {

    preload: function() { 
        // Function called first to load all the assets
    },

    create: function() { 
        // Fuction called after 'preload' to setup the game    
    },

    update: function() {
        // Function called 60 times per second
    },
};

// Add and start the 'main' state to start the game
game.state.add('main', game_state.main);  
game.state.start('main');

在那幾個對應方法(preload(), create() 和 update())中加入代碼。註釋說明了用途：

preload: function() {  
    // Change the background color of the game
    this.game.stage.backgroundColor = '#71c5cf';

    // Load the bird sprite
    this.game.load.image('bird', 'assets/bird.png'); 
},

create: function() {  
    // Display the bird on the screen
    this.bird = this.game.add.sprite(100, 245, 'bird');

    // Add gravity to the bird to make it fall
    this.bird.body.gravity.y = 1000;

    // Call the 'jump' function when the spacekey is hit
    var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    space_key.onDown.add(this.jump, this);     
},

update: function() {  
    // If the bird is out of the world (too high or too low), call the 'restart_game' function
    if (this.bird.inWorld == false)
        this.restart_game();
},

再添加兩個方法

// Make the bird jump 
jump: function() {  
    // Add a vertical velocity to the bird
    this.bird.body.velocity.y = -350;
},

// Restart the game
restart_game: function() {  
    // Start the 'main' state, which restarts the game
    this.game.state.start('main');
},

保存一下main.js這個文件，小鳥的部分差很少了。 下一個就是水管了： 在preload()先加入圖片素材：

this.game.load.image('pipe', 'assets/pipe.png');

create() 函數中加入 水管的初始化信息：

this.pipes = game.add.group();  
this.pipes.createMultiple(20, 'pipe');

如今咱們須要一個新的函數來把這個水管添加到遊戲中，咱們須要自動生成不一樣管水管結構。以及銷燬已經路過的水管結構：

add_one_pipe: function(x, y) {  
    // Get the first dead pipe of our group
    var pipe = this.pipes.getFirstDead();

    // Set the new position of the pipe
    pipe.reset(x, y);

    // Add velocity to the pipe to make it move left
    pipe.body.velocity.x = -200;

    // Kill the pipe when it's no longer visible 
    pipe.outOfBoundsKill = true;
},

每空一列生成一個水管

add_row_of_pipes: function() {  
    var hole = Math.floor(Math.random()*5)+1;

    for (var i = 0; i < 8; i++)
        if (i != hole && i != hole +1) 
            this.add_one_pipe(400, i*60+10);   
},

每1.5秒須要調用一次 add_row_of_pipes ,這裏咱們須要在 create 函數中 添加一個定時器。

this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

再在restart_game()這個函數中銷燬這個定時器：

this.game.time.events.remove(this.timer);

碰撞得分 //create()增長初始化信息

this.score = 0;  
var style = { font: "30px Arial", fill: "#ffffff" };  
this.label_score = this.game.add.text(20, 20, "0", style);

//add_row_of_pipes() ,每經過1個水管，增長1分

this.score += 1;  
this.label_score.content = this.score;

//在update 這個方法裏調用 restart_geam() 這個方法，每次掛了的時候
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);

好了，主要代碼就寫完了。恭喜你，學會了簡單的HTML5 Flappy Bird 的遊戲製做。 你也能夠在這裏下載 完整源碼;

結束語

還有一些好比音效，設置一類的東西還沒作。之後教程再更新