HTML5制作Flappy-Bird详细教程

在这篇文章中，让我们来一起用HTML5制作FlappyBird。FlappyBird是一款非常优秀且容易上手的游戏，可以作为一个很好的HTML5游戏的教程。在这片教程中，我们使用Phaser框架写一个只有65行js代码的简化版FlappyBird。提示：你得会JavaScript设置先下载我为教程制作的模板,里面包括:phaser.min.js,简化了的Phaser框架v1.1.5index.html,用来展示游戏的文件main.js,我们写代码的地方asset/,用来保存小鸟和管子的图片的文件夹（bird.png和pipe.png）用浏览器打开index.html，用文本编辑器打开main.js在main.js中可以看到我们之前提到的Phaser工程的基本结构123456789//InitializePhaser,andcreatesa400x490pxgamevargame=newPhaser.Game(400,490,Phaser.AUTO,'game_div');//Createsanew'main'statethatwillcontainthegamevarmain_state={preload:function(){//Functioncalledfirsttoloadalltheassets},10111213141516171819202122create:function(){//Fuctioncalledafter'preload'tosetupthegame},update:function(){//Functioncalled60timespersecond},};//Addandstartthe'main'statetostartthegamegame.state.add('main',main_state);game.state.start('main');接下来我们一次完成preload(),create()和update()方法，并增加一些新的方法。小鸟的制作我们先来看如何添加一个用空格键来控制的小鸟。首先我们来更新preload(),create()和update()方法。12345678910111213141516171819202122preload:function(){//Changethebackgroundcolorofthegamethis.game.stage.backgroundColor='#71c5cf';//Loadthebirdspritethis.game.load.image('bird','assets/bird.png');},create:function(){//Displaythebirdonthescreenthis.bird=this.game.add.sprite(100,245,'bird');//Addgravitytothebirdtomakeitfallthis.bird.body.gravity.y=1000;//Callthe'jump'functionwhenthespacekeyishitvarspace_key=this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);space_key.onDown.add(this.jump,this);},update:function(){//Ifthebirdisoutoftheworld(toohighortoolow),call232425the'restart_game'functionif(this.bird.inWorld==false)this.restart_game();},在这三个方法下面，我们再添加两个新的方法。1234567891011//Makethebirdjumpjump:function(){//Addaverticalvelocitytothebirdthis.bird.body.velocity.y=-350;},//Restartthegamerestart_game:function(){//Startthe'main'state,whichrestartsthegamethis.game.state.start('main');},保存main.js并刷新index.html后你就可以得到一个用空格键来控制的小鸟了。管子的制作在preload()中添加管子的载入1this.game.load.image('pipe','assets/pipe.png');然后再在create()中添加画一组管子的方法。因为我们在游戏中要用到许多管子，所以我们先做一个包含20段管子的组。12this.pipes=game.add.group();this.pipes.createMultiple(20,'pipe');现在我们需要一个新的方法来把管子添加到游戏中，默认情况下，所有的管子都没有被激活也没有显示。我们选一个管子激活他并显示他，保证他在不在显示的情况下移除他的激活状态，这样我们就有用不尽的管子了。1234567add_one_pipe:function(x,y){//Getthefirstdeadpipeofourgroupvarpipe=this.pipes.getFirstDead();//Setthenewpositionofthepipepipe.reset(x,y);8910111213//Addvelocitytothepipetomakeitmoveleftpipe.body.velocity.x=-200;//Killthepipewhenit'snolongervisiblepipe.outOfBoundsKill=true;},之前的方法只显示了一段管子，但是我们在一条垂直的线上要显示6段，并保证中间有一个能让小鸟通过的缺口。下面的方法实现了此功能。1234567add_row_of_pipes:function(){varhole=Math.floor(Math.random()*5)+1;for(vari=0;i8;i++)if(i!=hole&&i!=hole+1)this.add_one_pipe(400,i*60+10);},我们需要每1.5秒调用一次add_row_of_pipes()方法来实现管子的添加。为了达到这个目的，我们在create()方法中添加一个计时器。1this.timer=this.game.time.events.loop(1500,this.add_row_of_pipes,this);最后在restart_game()方法的最前面添加下面这行代码来实现游戏重新开始时停止计时器。1this.game.time.events.remove(this.timer);现在可以测试一下了，已经有点儿游戏的样子了。实现得分和碰撞最后一步我们来实现得分和碰撞，这很简单。在create()中添加下面的代码来实现分数的显示。123this.score=0;varstyle={font:30pxArial,fill:#ffffff};this.label_score=this.game.add.text(20,20,0,style);下面的代码放入add_row_of_pipes()用来实现分数的增加。12this.score+=1;this.label_score.content=this.score;下面的代码放入update()方法来实现每次碰到管子时调用restart_game()。1this.game.physics.overlap(this.bird,this.pipes,this.restart_game,null,this);大功告成！恭喜你获得了一个Flappybird的HTML5版。游戏的功能已实现，但实在是太简陋了。下面的教程我们来添加音效、动画、菜单等。设置首先下载新的模板。其中包括了我们在上一个教程中完成的代码和一个新的音效文件。打开main.js，开始敲吧。添加飞行动画小鸟上下飞行的方式太单调了，我们来加一些特效，让它看起来有点儿游戏的样子。1.下降时角度转动速度放慢，直到特定值。2.上升时翻转角度。第一个任务很简单，我们只需要添加两行代码到update()方法。12if(this.bird.angle20)this.bird.angle+=1;第二步我们有两个选择，简单起见，我们可以只在jump()方法中添加1this.bird.angle=-20;但是这中角度的骤变看起来有点儿别扭。所以，我们还可以让角度有个变化的过程。我们可以用如下代码替换掉上面的。12345678//createananimationonthebirdvaranimation=this.game.add.tween(this.bird);//Settheanimationtochangetheangleofthespriteto-20°in100millisecondsanimation.to({angle:-20},100);//Andstarttheanimationanimation.start();也可以揉成一行代码：1this.game.add.tween(this.bird).to({angle:-20},100).start();这样一来就差不多了，如果你现在测试一下游戏，你会发现小鸟的角度变化得并不自然。像左边的图，但是我们想要的是右图的效果。为了达到这个目的，我们要做的是改变小鸟的中心（anchor）。在create()方法中添加如下代码来改变中心（anchor）。1this.bird.anchor.setTo(-0.2,0.5);现在测试一下游戏你就会发现已经好得多了。添加失败动画首先，更新update()方法：用hit_pipe()替换restart_rame()。1this.game.physics.overlap(this.bird,this.pipes,this.hit_pipe,null,this);然后我们来写一个hit_pipe()方法。123456789101112131415hit_pipe:function(){//Ifthebirdhasalreadyhitapipe,wehavenothingtodoif(this.bird.alive==false)return;//Setthealivepropertyofthebirdtofalsethis.bird.alive=false;//Preventnewpipesfromappearingthis.game.time.events.remove(this.timer);//Gothroughallthepipes,andstoptheirmovementthis.pipes.forEachAlive(function(p){p.body.velocity.x=0;},this);16},最后，为了保证撞了管子的小鸟不诈尸，在jump()方法的最前面添加如下代码：12if(this.bird.alive==false)return;动画效果添加完毕。添加音效用Phaser添加音效非常容易。(作者提供的音效文件貌似无法播放，大家可以找点儿别的代替。)在preload()中添加1this.game.load.audio('jump','assets/jump.wav');在create()中添加1this.jump_sound=this.game.add.audio('jump');最后在jump()中添加1this.jump_sound.play();来实现跳跃音效的调用。最终效果的源码可以点击这里下载