Phaser.js-開發憤怒的小鳥(上)

切入正題，想必你們以前都瞭解過Phaser.js，PS：不瞭解的能夠在官網進去http://www.bootcdn.cn/phaser/readme/看一下就能夠，在開發前要事先去官網把須要的框架組件下載下來，這個遊戲寫完的下載地址:http://git.oschina.net/8946a/bird_-jumping     好廢話少說下面看乾貨

 

首先咱們先要引用框架，沒錯就像這樣

<script type="text/javascript" src="phaser.min.js"></script>

就像你們所瞭解的那樣 接下來咱們建立一個DIV 用來放置動畫的 「場景」

<div id="game_div"></div>

好了，光作完這些還不行，這只是剛剛開始，咱們在加一些CSS的東西，讓他看起來更加的漂亮

#game_div, p {
      width: 400px;
      margin: auto;
      margin-top: 20px;
    }

OK，一塊兒準備工做都完成了就像如今這樣

是否是有些火燒眉毛的進行開發了，廢話少說，帶你們一塊兒開始進行JS部分的繪製

<!--遊戲JS部分-->

首先咱們要建立遊戲的寬高，沒錯就是這樣

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

這句話的意思是說，我建立的遊戲的寬高，引擎否自動適應，已經顯示的位置(也就是剛剛定義的盒子裏面)

第二段代碼建立一個容器(下文用來存儲遊戲內容)

接下來咱們開始添加遊戲主體的畫面

// 遊戲主體畫面
game_state.main = function() { };  
game_state.main.prototype = {


    preload: function() { 
        // 存儲遊戲加載背景資源
        this.game.stage.backgroundColor = '#71c5cf';

        // 精靈加載遊戲 鳥圖片
        this.game.load.image('bird', 'assets/bird.png');  

        // 加載管道 圖片
        this.game.load.image('pipe', 'assets/pipe.png');      
    },

到這裏咱們已經把遊戲預載入的資源先提取出來以後，在看代碼

// 建立遊戲實例
    create: function() { 
        // 給小鳥添加精靈   寬 高
        this.bird = this.game.add.sprite(100, 245, 'bird');
        
        // 添加劇力物理引擎
        this.bird.body.gravity.y = 1000;

在這裏咱們運用了一個類,，沒錯就是sprite精靈，這個sprite是引擎中核心的地方，它的實用性超乎你的想象，分別定義了對象小鳥的寬 高

以後是物理引擎，引擎在這裏簡單提一嘴，速度，加速度，角速度，重力 ，阻力，ps:這些都是物理引擎的部分(小夥伴們任重而道遠~)這裏所用的是重力，不讓小鳥掉下來

往下咱們接着看

// 鍵盤Input接受事件 當按下時候執行添加函數
        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');

這段代碼用到了input，這裏的跟html裏面的Input是有必定區別的，這裏能夠進行設置鼠標事件，仍是鍵盤事件，(用到的是鍵盤事件)，以後咱們開始添加組，組是個特別神奇的東西，既能夠存儲對象，進行檢測碰撞，又能夠囊括子集進行封裝使用，group！！！下文咱們還會提到(管道組，管道名稱)

// 調用時鐘事件循環進行添加管道1.5秒
        this.timer = this.game.time.events.loop(1500, this.add_row_of_pipes, this);           

        // 默認得分0，追加分數面板
        this.score = 0;
        var style = { font: "30px Arial", fill: "#ffffff" };
        this.label_score = this.game.add.text(20, 20, "0", style);  
    },

這裏所提到的時鐘對象在我看來不如說是setInterval()；哈哈哈 各位前端er是否是忽然有種熟悉的趕腳~ 沒錯定時器，這玩意到哪兒都這麼實用，經過時鐘事件咱們來進行循環，參數的大概意思就是說 1.5秒我讓管道添加一次，

咱們如今有了管道，有了資源，可是們有記錄分數的"得分版" 先定義得分默認爲0，隨後咱們開始設置得分的樣式 css.......太簡單不說了，以後進行得分的追加，這裏用的是add.text();參數大概實說 寬高20，從0開始，運用實現定義好的style樣式

少年，不要着急咱們慢慢來，慢慢說哈~

// 遊戲未開始
    update: function() {
        //若是小鳥超出窗口，重置遊戲
        if (this.bird.inWorld == false)
            this.restart_game(); 

        // 碰撞與接觸感應物理引擎，小鳥跟管道 ，重置遊戲
        this.game.physics.overlap(this.bird, this.pipes, this.restart_game, null, this);      
    },

咱們 開始訂製遊戲規則，你們能夠考慮一下，若是小鳥跳出了窗口會怎麼樣？咱們在這裏引用函數 word 這裏是世界的意思 ，這個東東能夠說很牛逼 ，只要在遊戲裏，都歸他管，牛逼吧 哈哈哈~

若是小鳥超出了世界。那麼從新開始遊戲,新知識就是這樣，一個函數接着另外一個函數，簡直讓人慾罷不能，關於Phaser.js裏面的觸碰感應也是一個核心的知識點，這裏面用的是overLap函數，這個函數很牛逼，通俗意思是檢測物體跟物體是否碰撞，碰撞後的效果，這裏是兩個意思，不明白的同窗能夠去手冊上看一下，哈哈 這裏就不墨跡了，隨後代碼被我放在了組裏 group 進行碰撞的檢測，

 

今天就說到這裏，第一部分先到這，第二部分明天更新(下班了！！！回家和喝酒0.0)