教你用 HTML5 制作Flappy Bird

时间:14-03-25 栏目:html5/css3 作者:zongyan86 评论:0 点击: 4,200 次

web前端开发分享

大概在两个月前,我给自己定了一个目标:每周在制作一个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();

来实现跳跃音效的调用。

最终效果的源码可以点击这里下载

原文链接: lessmilk   翻译: 伯乐在线 杨帅

译文链接: http://blog.jobbole.com/62203/

                  http://blog.jobbole.com/62832/



声明: 本文由( zongyan86 )原创编译,转载请保留链接: 教你用 HTML5 制作Flappy Bird

关注我们