使用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...