大概在两个月前，我给自己定了一个目标：每周在制作一个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 60timesper 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 thescreen
this.bird = this.game.add.sprite(100, 245,'bird');
//Add gravity to the bird tomakeit fall
this.bird.body.gravity.y = 1000;
//Call the'jump'functionwhen 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,whichrestarts 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 tomakeit 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。虽然可以“称得上”是一款游戏了，但却是一款很无聊的游戏。在这篇文章中我们来看一看如何给它添加动画效果和音效。虽然并没有改变游戏的机制，但却能够使游戏变得更加有趣。你可以点击这里先体验一下。
设置
首先下载新的模板。其中包括了我们在上一个教程中完成的代码和一个新的音效文件。
打开main.js，开始敲吧。
添加飞行动画
小鸟上下飞行的方式太单调了，我们来加一些特效，让它看起来有点儿游戏的样子。
1.下降时角度转动速度放慢，直到特定值。
2.上升时翻转角度。
第一个任务很简单，我们只需要添加两行代码到update()方法。
|
1
2
|
if(this.bird.angle < 20)
this.bird.angle += 1;
|
第二步我们有两个选择，
简单起见，我们可以只在jump()方法中添加
|
1
|
this.bird.angle = -20;
|
但是这中角度的骤变看起来有点儿别扭。所以，我们还可以让角度有个变化的过程。我们可以用如下代码替换掉上面的。
|
1
2
3
4
5
6
7
8
|
//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°in100 milliseconds
animation.to({angle: -20}, 100);
//And start the animation
animation.start();
|
也可以揉成一行代码：
|
1
|
this.game.add.tween(this.bird).to({angle: -20}, 100).start();
|
这样一来就差不多了，如果你现在测试一下游戏，你会发现小鸟的角度变化得并不自然。像左边的图，但是我们想要的是右图的效果。
为了达到这个目的，我们要做的是改变小鸟的中心（anchor）。在create()方法中添加如下代码来改变中心（anchor）。
|
1
|
this.bird.anchor.setTo(-0.2, 0.5);
|
现在测试一下游戏你就会发现已经好得多了。
添加失败动画
首先，更新update()方法：用hit_pipe()替换restart_rame()。
|
1
|
this.game.physics.overlap(this.bird, this.pipes, this.hit_pipe, null, this);
|
然后我们来写一个hit_pipe()方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
hit_pipe:function() {
//If the bird has already hit a pipe, we have nothing todo
if(this.bird.alive ==false)
return;
//Set the alive property of the bird tofalse
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);
},
|
最后，为了保证撞了管子的小鸟不诈尸，在jump()方法的最前面添加如下代码：
|
1
2
|
if(this.bird.alive ==false)
return;
|
动画效果添加完毕。
添加音效
用Phaser添加音效非常容易。
(作者提供的音效文件貌似无法播放，大家可以找点儿别的代替。)
在preload()中添加
|
1
|
this.game.load.audio('jump','assets/jump.wav');
|
在create()中添加
|
1
|
this.jump_sound = this.game.add.audio('jump');
|
最后在jump()中添加
|
1
|
this.jump_sound.play();
|
来实现跳跃音效的调用。
最终效果的源码可以点击这里下载
译文链接： http://blog.jobbole.com/62203/
http://blog.jobbole.com/62832/
声明: 本文由( zongyan86 )原创编译，转载请保留链接: 教你用 HTML5 制作Flappy Bird
- 上一篇：程序员的职业规划
- 下一篇：关于代码内外部质量提升的一些看法
