在HTML5中，使用 Phaser 实现 Flappy Bird

2019独角兽企业重金招聘Python工程师标准>>>

前言

最近，无论是国内还是国外，Flappy Bird 火得一踏糊涂，这是一个简单的游戏，新手应该比较容易上手，我为了学习，专门找到了一篇在HTML5 中开发Flappy Bird 的文章。 先看看我们今天用到的框架:Phaser
是一个快速、自由的游戏开发框架。托管在github。可以开发桌面或移动浏览器的Html5游戏。

[warning] 1.你需要懂得一些基本的 javaScript 语言; 2.你如果了解更多，关于 Phaser 的文章。你可以去看看这篇文章 phaser 起步 [/warning]

正文

先下载基本的项目结构basictemplate 你可以看到以下文件

phaser.min.js, Phaser framework v1.1.5. index.html,游戏显示页 main.js, 我们需要写代码的地方 assets/, 装了2个两个图片 (bird.png and pipe.png).

好了，现在可以开启你常用的编辑器，准备打代码了。 打开 main.js 文件，看到：

// 初始化 Phaser, 创建 400x490px 的游戏
var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');  
var game_state = {};

// Creates a new 'main' state that will contain the game
game_state.main = function() { };  
game_state.main.prototype = {

    preload: function() { 
        // Function called first to load all the assets
    },

    create: function() { 
        // Fuction called after 'preload' to setup the game    
    },

    update: function() {
        // Function called 60 times per second
    },
};

// Add and start the 'main' state to start the game
game.state.add('main', game_state.main);  
game.state.start('main');

在那几个对应方法(preload(), create() 和 update())中加入代码。注释说明了用途：

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 the screen
    this.bird = this.game.add.sprite(100, 245, 'bird');

    // Add gravity to the bird to make it fall
    this.bird.body.gravity.y = 1000;

    // Call the 'jump' function when 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 the 'restart_game' function
    if (this.bird.inWorld == false)
        this.restart_game();
},

再添加两个方法

// 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, which restarts the game
    this.game.state.start('main');
},

保存一下main.js这个文件，小鸟的部分差不多了。 下一个就是水管了： 在preload()先加入图片素材：

this.game.load.image('pipe', 'assets/pipe.png');

create() 函数中加入 水管的初始化信息：

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

现在我们需要一个新的函数来把这个水管添加到游戏中，我们需要自动生成不同管水管结构。以及销毁已经路过的水管结构：

add_one_pipe: function(x, y) {  
    // Get the first dead pipe of our group
    var pipe = this.pipes.getFirstDead();

    // Set the new position of the pipe
    pipe.reset(x, y);

    // Add velocity to the pipe to make it move left
    pipe.body.velocity.x = -200;

    // Kill the pipe when it's no longer visible 
    pipe.outOfBoundsKill = true;
},

每空一列生成一个水管

add_row_of_pipes: function() {  
    var hole = Math.floor(Math.random()*5)+1;

    for (var i = 0; i < 8; i++)
        if (i != hole && i != hole +1) 
            this.add_one_pipe(400, i*60+10);   
},

每1.5秒需要调用一次 add_row_of_pipes ,这里我们需要在 create 函数中 添加一个定时器。

this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

再在restart_game()这个函数中销毁这个定时器：

this.game.time.events.remove(this.timer);

碰撞得分 //create()增加初始化信息

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

//add_row_of_pipes() ,每通过1个水管，增加1分

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

//在update 这个方法里调用 restart_geam() 这个方法，每次挂了的时候
this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);

好了，主要代码就写完了。恭喜你，学会了简单的HTML5 Flappy Bird 的游戏制作。 你也可以在这里下载 完整源码;

结束语

还有一些比如音效，设置一类的东西还没做。以后教程再更新

转载于:https://my.oschina.net/u/265943/blog/292865