教你用HTML5製作Flappy Bird（一）

　　大概在兩個月前，我給自己定了一個目標：每週在製作一個HTML5新遊戲。截至目前，我已經有了9款遊戲。現在很多人希望我能寫一下如何製作這些遊戲，在這篇文章中，讓我們來一起用HTML5製作Flappy Bird。

　　Flappy Bird是一款非常優秀且容易上手的遊戲，可以作為一個很好的HTML5遊戲的教程。在這片教程中，我們使用Phaser框架寫一個只有65行js程式碼的簡化版Flappy Bird。

　　點選此處可以先體驗一下我們即將要製作的遊戲。

　　提示1：你得會JavaScript

　　提示2：想學習更多關於Phaser框架的知識可以看這篇文章getting started tutorial

　設定

　　先下載我為教程製作的模板,裡面包括:

• phaser.min.js, 簡化了的Phaser框架v1.1.5
• index.html, 用來展示遊戲的檔案
• main.js, 我們寫程式碼的地方
• asset/, 用來儲存小鳥和管子的圖片的資料夾（bird.png和pipe.png）

　　用瀏覽器開啟index.html，用文字編輯器開啟main.js

　　在main.js中可以看到我們之前提到的Phaser工程的基本結構

// Initialize Phaser, and creates a 400x490px game
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');

// Creates a new 'main' state that will contain the game
var main_state = {

    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', main_state);  
game.state.start('main');

　　接下來我們一次完成preload(),create()和update()方法，並增加一些新的方法。

　小鳥的製作

　　我們先來看如何新增一個用空格鍵來控制的小鳥。

　　首先我們來更新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並重新整理index.html後你就可以得到一個用空格鍵來控制的小鳥了。

　管子的製作

　　在preload()中新增管子的載入

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

　　然後再在create()中新增畫一組管子的方法。因為我們在遊戲中要用到許多管子，所以我們先做一個包含20段管子的組。

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;
},

　　之前的方法只顯示了一段管子，但是我們在一條垂直的線上要顯示6段，並保證中間有一個能讓小鳥通過的缺口。下面的方法實現了此功能。

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()用來實現分數的增加。

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

　　下面的程式碼放入update()方法來實現每次碰到管子時呼叫restart_game()。

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

　　大功告成！恭喜你獲得了一個Flappy bird的HTML5版。點選這裡獲得全部資源。

　　遊戲的功能已實現，但實在是太簡陋了。下面我們來新增音效、動畫、選單等。

　　教你用HTML5製作Flappy Bird（二）

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