网页版Flappy Bird源代码(用Phaser引擎开发)

2014-03-05 12:35:31来源:西部e网作者:icech

Phaser是一个开源的HTML5 2D引擎,使用这个游戏开发框架可以轻松地开发一些桌面和移动的小游戏。Flappy Bird也是时下火爆的虐人小游戏,我们就来使用Phaser来编写一段简单的仿Flappy Bird小游戏,实现整个游戏功能代码不超过100行代码!

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

Phaser框架Git地址:https://github.com/photonstorm/phaser

2、index.html页面代码

<!DOCTYPE html>
<html>
   
<head>
  <meta charset="utf-8" />
  <title>Flappy Bird Clone</title>
  <style>
    #game_div, p {
      width: 400px;
      margin: auto;
      margin-top: 20px;
    }
  </style>
  <script type="text/javascript" src="phaser.min.js"></script>
  <script type="text/javascript" src="main.js"></script>
</head>
<body>
  <p>Press the spacebar to jump</p>
  <div id="game_div"> </div>
  <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');

4、Flappy Bird Demo地址:http://lessmilk.com/flappy_bird/02/

5、源码下载地址:http://pan.baidu.com/s/1mgjt1bU

教程原文地址:http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/

赞助商链接: