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(); }, 在这三个方法下面，我们再添加两个新的方法。 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() {? ?/