HTML5制作Flappy Bird详细教程

微盘下载地址

在这篇文章中，让我们来一起用Flappy Bird。

HTML5游戏的教程。在这片教程中，我们使用65行Flappy Bird。JavaScript

设置

先下载我为教程制作的:

Phaser 框架 index.html,  用来展示游戏的文件 main.js,  我们写代码的地方 asset/,  用来保存小鸟和管子的图片的文件夹（ pipe.png ） index.html ，用文本编辑器打开 main.js 中可以看到我们之前提到的  

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');

接下来我们一次完成update()方法，并增加一些新的方法。 

首先我们来更新update()方法。 

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

保存index.html后你就可以得到一个用空格键来控制的小鸟了。preload()中添加管子的载入create()中添加画一组管子的方法。因为我们在游戏中要用到许多管子，所以我们先做一个包含 

1    2

this.pipes = game.add.group();      this.pipes.createMultiple(20,'pipe');

现在我们需要一个新的方法来把管子添加到游戏中，默认情况下，所有的管子都没有被激活也没有显示。我们选一个管子激活他并显示他，保证他在不在显示的情况下移除他的激活状态，这样我们就有用不尽的管子了。6段，并保证中间有一个能让小鸟通过的缺口。下面的方法实现了此功能。1.5秒调用一次create()方法中添加一个计时器。restart_game()方法的最前面添加下面这行代码来实现游戏重新开始时停止计时器。 

实现得分和碰撞

最后一步我们来实现得分和碰撞，这很简单。
在 

1    2    3

this.score = 0;      var style = { font:"30px Arial",  fill:"#ffffff"};      this.label_score = this.game.add.text(20,  20,"0", style);

下面的代码放入 

1    2

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

下面的代码放入restart_game()。Flappy bird的 

设置

首先下载新的模板。其中包括了我们在上一个教程中完成的代码和一个新的音效文件。main.js，开始敲吧。 

2.上升时翻转角度。update()方法。jump()方法中添加 

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();

也可以揉成一行代码： 

为了达到这个目的，我们要做的是改变小鸟的中心（create()方法中添加如下代码来改变中心（ 

1	this.bird.anchor.setTo(-0.2, 0.5);

现在测试一下游戏你就会发现已经好得多了。update()方法：用restart_rame()。hit_pipe()方法。jump()方法的最前面添加如下代码： 

添加音效

用
(作者提供的音效文件貌似无法播放，大家可以找点儿别的代替。preload()中添加create()中添加jump()中添加 

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

  1391866807_index.jpg  (7.69 KB)

2014-5-15 11:43