基于Phaser架構完成FlappyBird

Phaser沒什麼好說的，不是很清楚的，網上自己去搜吧~

注：該部落格大部分參考了網上的資源

各檔案作用：

Index.html----不多說了，網頁

Phaser.min.js----遊戲所需架構

load.js----預加載遊戲中用到的資源檔案

Menu.js----遊戲的主界面，提示遊戲的操作方法，其實沒什麼功能，但又必不可少

Ready.js----是一個準備開始遊戲的界面，按下空格鍵即開始遊戲，防止還沒準備好就開始遊戲，并且以圖示意因操作而使Bird産生的變化

Play.js----開始玩遊戲所加載的State，用來展示遊戲進行界面及分數改變

Gameover.js----》遊戲結束，進行分數結算和展示

Game.js----初始化Phaser并且定義所需States

index.html遊戲主界面

<html>   
<head>
  <meta charset="UTF-8" />
  <title>Flappy Bird</title>
  <style>
    #game_div {
      width: 400px;
      margin: auto;
      margin-top: 50px;
    }
    body{
        background-image:url(assets/birdbg.png);
    }
    .style1{
        text-align:center;
        color:#FFFFFF;
        font-size:24pt;
        font-weight:bold;
    }
  </style>
<!--導入遊戲所需js檔案-->
  <script type="text/javascript" src="phaser.min.js"></script>
  <script type="text/javascript" src="load.js"></script>
  <script type="text/javascript" src="menu.js"></script>
  <script type="text/javascript" src="ready.js"></script>
  <script type="text/javascript" src="play.js"></script>
  <script type="text/javascript" src="gameover.js"></script>
  <script type="text/javascript" src="game.js"></script> 
</head>
<body>
  <div align="center" class="style1">Flappy Bird</div>
<table width="100%"  align="center">
    <tr>
        <td width="40%">
        </td>
          <td width="400"><!--遊戲域--><div id="game_div"></div></td>
        <td width="40%"></td>
    </tr>
</table>
</body>
</html>

加載遊戲資源檔案load.js

var load_state = {  
//預加載遊戲資源
    preload: function() { 
        this.game.load.image('bg','assets/bg.png');
        this.game.load.image('bo','assets/back.png');
        this.game.load.image('menu','assets/menu.png');
        this.game.load.image('ready','assets/ready.png');
        this.game.load.image('bird', 'assets/bird.png');  
        this.game.load.image('pipe', 'assets/pipe.png');  
        this.game.load.audio('jump', 'assets/jump.wav');
        this.game.load.audio('dead','assets/dead.wav');
        this.game.load.image('gameover','assets/gameover.png');
    },
 
    create: function() {
         
        // 所有資源加載完成後，進入'menu'state
        this.game.state.start('menu');   
    }
};

載入menu界面

var menu_state={
    create: function(){
         
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);        //定義接受按鍵消息變量
        space_key.onDown.add(this.start,this);        //按鍵按下時調用start()函數
         
        var style = {font: "30px Arial",fill: "#FFFFFF"};        //定義遊戲操作說明文字風格
        var x = game.world.width/2,y = game.world.height/2;        //定義坐标變量x,y，(x,y)為game.world中心
         
        this.bg = this.game.add.sprite(0,0,'bg');        //在game.world中坐标(0,0)處畫出預加載遊戲資源，背景圖檔
        this.bo = this.game.add.sprite(0,0,'bo');        //也是背景圖檔，我的背景由兩個背景透明的圖檔組合而成，其實可以合二為一
        this.menu = this.game.add.sprite(0,0,'menu');        //加載menu圖檔
        this.bird = this.game.add.sprite(x-30,y-60,'bird');        //載入即将闖蕩管子世界的Bird
         
        var text = this.game.add.text(x,y-118,"Press space to start!",style);        //定義顯示文本變量,并在game.world顯示，參數(坐标,顯示文本,文本風格)
        text.anchor.setTo(0.5,0.5);        //
           
    },
    start:function(){
        this.game.state.start('ready');        //調用start()函數後進入'ready'state
    }
};

載入遊戲準備界面ready.js

var ready_state = {
    create:function(){
        //載入遊戲準備界面
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        space_key.onDown.add(this.start,this);
         
        this.bg = this.game.add.sprite(0,0,'bg');
        this.bo = this.game.add.sprite(0,0,'bo');
        this.ready = this.game.add.sprite(0,0,'ready');
        this.bird = this.game.add.sprite(100,245,'bird');
    },
    start:function(){
        this.game.state.start('play');   
    },
};

play.js，遊戲核心

var play_state = {
    create: function() { 
        //載入所需資源
        this.bg = this.game.add.sprite(0,0,'bg');
        this.bo = this.game.add.sprite(0,0,'bo');
         
         
        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;         //設定Bird重力屬性,gravity
        this.bird.anchor.setTo(-0.2, 0.5);        //設定Bird重心
         
        // Not 'this.score', but just 'score'
        score = 0; 
        var style = { font: "30px Arial", fill: "#ffffff" };
        this.label_score = this.game.add.text(20, 20, "0", style); 
 
        this.jump_sound = this.game.add.audio('jump');        //加載音效
        this.dead_sound = this.game.add.audio('dead');        //||
    },
 
    update: function() {
        if (this.bird.inWorld == false)
            this.restart_game(); 
 
        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 (this.bird.alive == false)
            return; 
 
        this.bird.body.velocity.y = -350;
        this.game.add.tween(this.bird).to({angle: -20}, 50).start();
        this.jump_sound.play();
    },
    //撞管子
    hit_pipe: function() {
        if (this.bird.alive == false)
            return;
 
        this.bird.alive = false;
        this.game.time.events.remove(this.timer);
 
        this.pipes.forEachAlive(function(p){
            p.body.velocity.x = 0;
        }, this);
        this.dead_sound.play();
    },
    //重新開始函數
    restart_game: function() {
        this.game.time.events.remove(this.timer);
         
        this.game.state.start('gameover');
    },
 
    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);   
        score += 1; 
        this.label_score.content = score;  
    },
};

gameover.js，遊戲結束界面，并将分數顯示在相應的位置

var gameover_state = {
    create:function(){
         
        var space_key = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        space_key.onDown.add(this.start,this);   
         
        var style = {font: "20px Arial",fill: "#F00"};
        var style1 = {font: "30px Arial",fill: "F00"};
        var x = game.world.width/2,y = game.world.height/2;
         
        this.bg = this.game.add.sprite(0,0,'bg');
        this.bo = this.game.add.sprite(0,0,'bo');
        this.gameover = this.game.add.sprite(0,0,'gameover');
         
        if(score > 0){
            var score_label = this.game.add.text(x+90,y-40,score,style1);
            score_label.anchor.setTo(0.5,0.5);
            var score_label1 = this.game.add.text(x+90,y+20,"Unknown!",style);
            score_label1.anchor.setTo(0.5,0.5);
            }
        else if(score == 0){
            var score_label = this.game.add.text(x+90,y-40,"0",style1);
            score_label.anchor.setTo(0.5,0.5);
            var score_label1 = this.game.add.text(x+90,y+20,"Unknown!",style);
            score_label1.anchor.setTo(0.5,0.5);
            }
    },
    start:function(){
        this.game.state.start('menu');   
    }
};

最後，初始化Phaser并且定義所需States：(1)load_state,(2)menu_state,(3)ready_state,(4)play_state,(5)gameover_state

var game = new Phaser.Game(400,490,Phaser.AUTO,'game_div');
 
var score = 0;
 
game.state.add('load',load_state);
game.state.add('menu',menu_state);
game.state.add('ready',ready_state);
game.state.add('play',play_state);
game.state.add('gameover',gameover_state);
 
game.state.start('load');

源檔案及資源檔案： http://pan.baidu.com/s/1hqC97hy

示範位址：http://www.sunnylinner.com/Games/FlappyBird/

基于Phaser架構完成FlappyBird

繼續閱讀

phaser3學習筆記：視訊播放

【cocos2dx-3.0beta-制作flappybird】跟随時代的潮流，關于引擎更新

Java并發程式設計-同步輔助類之Phaser

H5遊戲開發之phaser學習筆記（一）

【cocos2dx-3.0beta-制作flappybird】——背景介紹

【cocos2dx-3.0beta-制作flappybird】英雄都是孤獨的？--小鳥單例類的設計以及小鳥類的設計

【cocos2dx-3.0beta-制作flappybird】未雨綢缪—Loading界面的寫法

FlappyBird開發總結（五）——背景延伸

GameBuilder開發遊戲應用系列之60行代碼實作FlappyBird

手寫經典遊戲 - FlappyBird一、FlappyBird簡介二、技術鋪墊三、代碼實作總結

Qt之FlappyBird遊戲開發

iOS SpriteKit 小遊戲開發執行個體 - Flappy Bird1.準備工作 2.布置場景和遊戲狀态3.讓内容動起來 4.随機創造水管5.實體世界6.補充提示7.還有什麼可以完善的？

Phaser.js做紅包雨遊戲遇到的問題

phaser入門例子

Phaser-學習記錄

FlappyBird開發總結（一）—— 開發前所必備