HTML5制作FlappyBird详细教程.docxVIP

在这篇文章中，让我们来一起用HTML5制作Flappy Bird。 Flappy Bird是一款非常优秀且容易上手的游戏，可以作为一个很好的HTML5游戏的教程。在这片教程中，我们使用Phaser框架写一个只有65行js代码的简化版Flappy Bird。 提示：你得会JavaScript 设置 先下载我为教程制作的 模板,里面包括: 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 newmainstate that will contain the game var main_state = { ? ????preload:function() { ????????//Function called first to load all the assets ????}, ? ????create:function() { ????????//Fuction called afterpreloadto setup the game??? ????}, ? ????update:function() { ????????//Function called 60timesper second ????}, }; ? //Add and start themainstate 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 thejumpfunctionwhen 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 therestart_gamefunction ????if(this.bird.inWorld ==false) ????????this.restart_game(); }