网页版Flappy Bird源代码（用Phaser引擎开发）

内容摘要

Phaser是一个开源的HTML5 2D引擎，使用这个游戏开发框架可以轻松地开发一些桌面和移动的小游戏。Flappy Bird也是时下火爆的虐人小游戏，我们就来使用Ph

文章正文

Phaser是一个开源的HTML5 2D引擎，使用这个游戏开发框架可以轻松地开发一些桌面和移动的小游戏。

Flappy Bird也是时下火爆的虐人小游戏，我们就来使用Phaser来编写一段简单的仿Flappy Bird小游戏，实现整个游戏功能代码不超过100行代码！

代码结构：

phaser.min.js：就是Phaser框架，版本为v1.1.5。
index.html：游戏现实的页面。
main.js：代码实现js文件。
assets：图片和声音素材目录。

1、下载Phaser框架，使用的文件只需phaser.min.js

2、index.html页面代码

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Flappy Bird Clone</title>

<body>

<p>Press the spacebar to jump</p>

<p>Learn how to make this game with a tutorial <a href="http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/">here</a></p>

</body>

</html>

3、main.js代码

var game = new Phaser.Game(400, 490, Phaser.AUTO, 'game_div');

var main_state = {

    preload: function() {
        this.game.stage.backgroundColor = '#71c5cf';
        this.game.load.image('bird', 'assets/bird.png');
        this.game.load.image('pipe', 'assets/pipe.png');

        // Load jump sound
        this.game.load.audio('jump', 'assets/jump.wav');
    },

    create: function() {
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        space_key.onDown.add(this.jump, this);

        this.pipes = game.add.group();
        this.pipes.createMultiple(20, 'pipe');
        this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);

        this.bird = this.game.add.sprite(100, 245, 'bird');
        this.bird.body.gravity.y = 1000;
         // Change the anchor point of the bird
        this.bird.anchor.setTo(-0.2, 0.5);

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

        // Add sounds to the game
        this.jump_sound = this.game.add.audio('jump');
        this.hit_sound = this.game.add.audio('hit');
    },

    update: function() {
        if (this.bird.inWorld == false)
            this.restart_game();

        // Make the bird slowly rotate downward
        if (this.bird.angle < 20)
            this.bird.angle += 1;

this.game.physics.overlap(this.bird, this.pipes, this.hit_pipe, null, this);
},

    jump: function() {
        // if the bird hit a pipe, no jump
        if (this.bird.alive == false)
            return;

this.bird.body.velocity.y = -350;

// Animation to rotate the bird
this.game.add.tween(this.bird).to({angle: -20}, 100).start();

        // Play a jump sound
        this.jump_sound.play();
    },

    // Dead animation when the bird hit a pipe
    hit_pipe: function() {
        // Set the alive flag to false
        this.bird.alive = false;

// Prevent new pipes from apearing
this.game.time.events.remove(this.timer);

        // Go trough all the pipes, and stop their movement
        this.pipes.forEachAlive(function(p){
            p.body.velocity.x = 0;
        }, this);
    },

    restart_game: function() {
        this.game.time.events.remove(this.timer);
        this.game.state.start('main');
    },

    add_one_pipe: function(x, y) {
        var pipe = this.pipes.getFirstDead();
        pipe.reset(x, y);
        pipe.body.velocity.x = -200;
        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);

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

game.state.add('main', main_state);
game.state.start('main');

代码注释

上一篇代码高亮插件工具介绍 15款任你挑选下一篇 jQuery实现无刷新切换主题皮肤功能

作者：喵哥笔记

学的不仅是技术，更是梦想！