使用Phaser開發你的第乙個H5遊戲（一）

2021-09-07 20:10:04 字數 3383 閱讀 2749

不知你是否還記得當年風靡一時的2048這個遊戲，乙個簡單而又不簡單的遊戲，總會讓你在空閒時間玩上一會兒。

在這篇文章裡，我們將使用開源的h5框架——phaser來重現這個遊戲。這裡你可以了解到遊戲內的狀態管理、sprite元件物件等，以及如何使用preload、create等方法。

h5遊戲框架眾多，為何選擇它？

由於近幾年h5的火熱，h5遊戲框架如雨後春筍般出現，甚至有很多定位不是遊戲開發的框架都被歸到這個範疇中。那麼為什麼選擇phaser？以下是我選擇它的原因：

2048遊戲的最終呈現效果如下

專案檔案結構如下：

在index.html中引入相關js檔案，定義乙個div作為phaser生成canvas的父容器

"game">
在html檔案中我們已經引入了phaser庫，這使我們擁有了乙個名為phaser的全域性物件，通過這個物件，我們可以訪問phaser庫中哪些用於構建遊戲的方法和函式。

現在我們使用phaser物件來建立乙個遊戲例項，這個物件用來代表整個遊戲，我們會為他新增不同的狀態。

index.js，在其中建立遊戲例項，註冊各個遊戲狀態以及啟動遊戲。

//例項化遊戲物件，引數為寬、高、渲染方式，父容器


window.game = new phaser.game(240, 400, phaser.canvas, 'game');


//新增狀態，引數為狀態應用的key值，狀態所包含的物件


game.state.add('menu', menu);


game.state.add('game', game);


//狀態切換 開始遊戲


game.state.start('menu');
phaser中的「狀態（state）」管理使遊戲的場景切換變得非常容易，此處的「狀態」可以看理解為不同的遊戲介面，2048這個遊戲比較簡單，只需要首頁和遊戲內兩個介面即可。

接下來初始化選單狀態物件（menu），在menu.js中定義乙個新物件menu並為它新增函式。狀態啟動時，首先會呼叫物件內的preload函式，通常載入遊戲所需資源會在這一步進行；載入完成後，呼叫create函式，初始化遊戲介面以及邏輯物件等等。

var menu = ,


create: function () ,


startgame: function () 


};
至此，啟動介面已經完成了，開啟本地web伺服器後，在瀏覽器中開啟index.html，就可以看到遊戲的啟動介面了。

接著在game.js開始處理遊戲的介面以及邏輯

var game = ;


var scorestyle = ;


var scoresprite = game.add.sprite(10, 10);


//使用graphics繪製圖形作為介面ui


var scoregraphics = game.add.graphics(0, 0);


scoregraphics.linestyle(5, 0xa1c5c5);


scoregraphics.beginfill(0x308c8c);


//繪製乙個帶圓角的矩形


scoregraphics.drawroundedrect(0, 0, 70, 50, 10);


scoregraphics.endfill();


//把圖形新增到父容器上，便於整體調整位置等


scoresprite.addchild(scoregraphics);


//新增文字 引數為x,y，文字內容,文字樣式


var scoretitle = game.add.text(0, 5, "score", titlestyle);


scoretitle.settextbounds(0, 0, 70, 50);


//把文字新增到父容器上，便於整體調整位置等


scoresprite.addchild(scoretitle);


this.scoretext = game.add.text(0, 20, this.score, scorestyle);


this.scoretext.settextbounds(0, 0, 70, 50);


scoresprite.addchild(this.scoretext);


......


//新增鍵盤方向件的監聽以及監聽事件


var up = this.game.input.keyboard.addkey(phaser.keyboard.up);


up.ondown.add(function () );


var down = this.game.input.keyboard.addkey(phaser.keyboard.down);


down.ondown.add(function () );


var left = this.game.input.keyboard.addkey(phaser.keyboard.left);


left.ondown.add(function () );


var right = this.game.input.keyboard.addkey(phaser.keyboard.right);


right.ondown.add(function () );


......


//獲取手勢滑動的x軸差值和y軸差值 用於計算滑動方向


var deltax = this.game.input.activepointer.position.x - this.game.input.activepointer.positiondown.x;


var deltay = this.game.input.activepointer.position.y - this.game.input.activepointer.positiondown.y;


......
2048這個遊戲的規則非常簡單，開發的思路也非常明確，維護乙個4*4的陣列，每次觸發移動事件時遍歷陣列，進行方向上的疊加判斷，然後在陣列中尋找空格，隨機生成新的數字，如果沒有則遊戲結束。相關的一些開發思路以及演算法優化在此也就不詳述了，大家可以自行查閱。

雖然這個遊戲非常簡單，但通過這個專案，可以了解到phaser的多個方面。如果對此感興趣，可以再深入接觸以下資料：

網易雲免費體驗館，0成本體驗20+款雲產品！

使用Phaser開發你的第乙個H5遊戲（一）

不知你是否還記得當年風靡一時的2048這個遊戲，乙個簡單而又不簡單的遊戲，總會讓你在空閒時間玩上一會兒。在這篇文章裡，我們將使用開源的h5框架 phaser來重現這個遊戲。這裡你可以了解到遊戲內的狀態管理 sprite元件物件等，以及如何使用preload create等方法。h5遊戲框架眾多，為何...

使用Docker構建你的第乙個服務

1.感受一下docker的便捷 專案原始碼 clone下來以後執行,cd到專案目錄下，執行 docker build t api sample docker run p 8080 8080 api sample latest 複製 就可以訪問localhost 8080看到效果了.2.具體步驟 在c...

使用Docker構建你的第乙個服務

1.感受一下docker的便捷 專案原始碼 clone下來以後執行,cd到專案目錄下，執行 docker build t api sample docker run p 8080 8080 api sample latest 複製 就可以訪問localhost 8080看到效果了.2.具體步驟 在c...