资源描述：
《HTML5制作Flappy-Bird详细教程.docx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、在这篇文章中，让我们来一起用HTML5制作FlappyBird。FlappyBird是一款非常优秀且容易上手的游戏，可以作为一个很好的HTML5游戏的教程。在这片教程中，我们使用Phaser框架写一个只有65行js代码的简化版FlappyBird。提示：你得会JavaScript设置先下载我为教程制作的模板,里面包括:·phaser.min.js,简化了的Phaser框架v1.1.5·index.html,用来展示游戏的文件·main.js,我们写代码的地方·asset/,用来保存小鸟和管子的图片的文件夹（bir
2、d.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={ prelo
3、ad:function(){ //Functioncalledfirsttoloadalltheassets },10111213141516171819202122 create:function(){ //Fuctioncalledafter'preload'tosetupthegame }, update:function(){ //Functioncalled60timespersecond },}; //Addandsta
4、rtthe'main'statetostartthegamegame.state.add('main',main_state); game.state.start('main');接下来我们一次完成preload(),create()和update()方法，并增加一些新的方法。小鸟的制作我们先来看如何添加一个用空格键来控制的小鸟。首先我们来更新preload(),create()和update()方法。12345678910111213141516171819202122preload:function(){
5、 //Changethebackgroundcolorofthegame this.game.stage.backgroundColor='#71c5cf'; //Loadthebirdsprite this.game.load.image('bird','assets/bird.png');}, create:function(){ //Displaythebirdonthescreen this.bird=this.game.add.sprite(100,245,'bir
6、d'); //Addgravitytothebirdtomakeitfall this.bird.body.gravity.y=1000; //Callthe'jump'functionwhenthespacekeyishit varspace_key=this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); space_key.onDown.add(this.jump,this); }, update:func
7、tion(){ //Ifthebirdisoutoftheworld(toohighortoolow),call232425the'restart_game'function if(this.bird.inWorld==false) this.restart_game();},在这三个方法下面，我们再添加两个新的方法。1234567891011//Makethebirdjumpjump:function(){ //Addaverticalvelocitytothebird
8、 this.bird.body.velocity.y=-350;}, //Restartthegamerestart_game:function(){ //Startthe'main'state,whichrestartsthegame this.game.state.start('main');},保存main.js并刷新index.html后你就可以得到
