大概在兩個月前，我給自己定了一個目標：每週在製作一個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工程的基本結構
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// 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()方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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(); }, |
在這三個方法下面，我們再新增兩個新的方法。
|
1 2 3 4 5 6 7 8 9 10 11 |
// 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()中新增管子的載入
|
1 |
this.game.load.image('pipe', 'assets/pipe.png'); |
然後再在create()中新增畫一組管子的方法。因為我們在遊戲中要用到許多管子，所以我們先做一個包含20段管子的組。
|
1 2 |
this.pipes = game.add.group(); this.pipes.createMultiple(20, 'pipe'); |
現在我們需要一個新的方法來把管子新增到遊戲中，預設情況下，所有的管子都沒有被啟用也沒有顯示。我們選一個管子啟用他並顯示他，保證他在不在顯示的情況下移除他的啟用狀態，這樣我們就有用不盡的管子了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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段，並保證中間有一個能讓小鳥通過的缺口。下面的方法實現了此功能。
|
1 2 3 4 5 6 7 |
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()方法中新增一個計時器。
|
1 |
this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this); |
最後在restart_game()方法的最前面新增下面這行程式碼來實現遊戲重新開始時停止計時器。
|
1 |
this.game.time.events.remove(this.timer); |
現在可以測試一下了，已經有點兒遊戲的樣子了。
實現得分和碰撞
最後一步我們來實現得分和碰撞，這很簡單。
在create()中新增下面的程式碼來實現分數的顯示。
|
1 2 3 |
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 2 |
this.score += 1; this.label_score.content = this.score; |
下面的程式碼放入update()方法來實現每次碰到管子時呼叫restart_game()。
|
1 |
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this); |
大功告成！恭喜你獲得了一個Flappy bird的HTML5版。點選這裡獲得全部資源。
遊戲的功能已實現，但實在是太簡陋了。下面的教程我們來新增音效、動畫、選單等。
教你用 HTML5 製作Flappy Bird（下）
原文作者twitter:@lessmilk