大概在兩個月前，我給自己定了一個目標：每周在制作一個HTML5新游戲。截至目前，我已經有了9款游戲?，F(xiàn)在很多人希望我能寫一下如何制作這些游戲，在這篇文章中，讓我們來一起用HTML5制作Flappy Bird。
Flappy Bird是一款非常優(yōu)秀且容易上手的游戲，可以作為一個很好的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');
現(xiàn)在我們需要一個新的方法來把管子添加到游戲中，默認情況下，所有的管子都沒有被激活也沒有顯示。我們選一個管子激活他并顯示他，保證他在不在顯示的情況下移除他的激活狀態(tài)，這樣我們就有用不盡的管子了。
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段，并保證中間有一個能讓小鳥通過的缺口。下面的方法實現(xiàn)了此功能。
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()方法來實現(xiàn)管子的添加。為了達到這個目的，我們在create()方法中添加一個計時器。
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);
最后在restart_game()方法的最前面添加下面這行代碼來實現(xiàn)游戲重新開始時停止計時器。
this.game.time.events.remove(this.timer);
現(xiàn)在可以測試一下了，已經有點兒游戲的樣子了。
實現(xiàn)得分和碰撞
最后一步我們來實現(xiàn)得分和碰撞，這很簡單。
在create()中添加下面的代碼來實現(xiàn)分數(shù)的顯示。
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()用來實現(xiàn)分數(shù)的增加。
this.score += 1; this.label_score.content = this.score;
下面的代碼放入update()方法來實現(xiàn)每次碰到管子時調用restart_game()。
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);
大功告成！恭喜你獲得了一個Flappy bird的HTML5版。點擊這里獲得全部資源。
游戲的功能已實現(xiàn)，但實在是太簡陋了。下面我們來添加音效、動畫、菜單等。
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網站，并且能夠搭建符合百度排名規(guī)范的網站基底，使您的網站無需額外費用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網站建設。