開始遊戲開發階段

想辦法開始編寫自己的遊戲嗎？Phaser可能是您正在尋找的遊戲開發框架。...

Phaser是一個建立2D影片遊戲的框架。它使用html5canvas來顯示遊戲，JavaScript來運行遊戲。使用Phaser而不是vanilla JavaScript的好處是，它有一個廣泛的庫，可以完成影片遊戲的大部分物理特性，使您能夠集中精力設計遊戲本身。

Phaser縮短了開發時間，簡化了工作流程。讓我們學習如何用Phaser建立一個基本遊戲。

為什麼要用phaser開發？

Phaser與其他視覺化程式語言類似，因為程式基於迴圈更新。Phaser有三個主要階段：預載入、建立和更新。

在preload中，遊戲的資產被上傳並提供給遊戲。

建立初始化遊戲和所有開始遊戲元素。每一個功能在遊戲開始時執行一次。

另一方面，更新在整個遊戲中迴圈執行。它是更新遊戲元素以使其具有互動性的主力軍。

使用phaser設定開發遊戲的系統

儘管Phaser在HTML和JavaScript上執行，但遊戲實際上是在伺服器端執行的，而不是客戶端。這意味著您需要在本地主機上運行遊戲。運行遊戲伺服器端允許您的遊戲訪問程式外的其他檔案和資產。如果您還沒有設定本地主機，我建議您使用XAMPP來設定本地主機。

下面的程式碼將幫助您啟動並執行。它建立了一個基本的遊戲環境。

<html> <head> <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script> </head> <body> <script> var config = { type: Phaser.AUTO, backgroundColor: 0xCCFFFF, width: 600, height: 600, physics: { default: 'arcade' }, scene: { preload: preload, create: create } }; var gamePiece; var game = new Phaser.Game(config); function preload(){ this.load.image('gamePiece', 'img/gamePiece.png'); } function create(){ gamePiece = this.physics.add.sprite(270, 450, 'gamePiece'); } </script> </body></html>

要運行遊戲，需要將名為“gamePiece”的PNG影象儲存到本地主機上的“img”資料夾中。為簡單起見，本例使用60xgame de60px橙色正方形。你的遊戲應該是這樣的：

如果遇到問題，請使用瀏覽器的偵錯程式找出問題所在。即使缺少一個字元也會造成嚴重的破壞，但通常情況下，偵錯程式會捕獲這些小錯誤。

解釋設定程式碼

到目前為止，遊戲什麼都沒做。但我們已經覆蓋了很多領域！讓我們更深入地看看程式碼。

要執行Phaser遊戲，需要匯入Phaser庫。我們在3號線上做這個。在本例中，我們連結到原始碼，但您可以將其下載到本地主機並引用該檔案。

到目前為止，大部分程式碼都配置了遊戲環境，變數config儲存了這些環境。在我們的示例中，我們正在設定一個背景為600px×600px的藍色（十六進位制色碼中的CCFFFF）的移相器遊戲。目前，遊戲物理設定為arcade，但Phaser提供了不同的物理。

最後，scene告訴程式在遊戲開始前執行preload函式和create函式來啟動遊戲。所有這些資訊都會傳遞給名為game的遊戲物件。

相關：6款最適合程式設計和編碼的膝上型電腦

程式碼的下一部分是遊戲真正形成的地方。預載入功能是你想要初始化任何你需要運行遊戲的東西。在我們的例子中，我們已經預裝了遊戲的圖片。image的第一個引數命名我們的影象，第二個引數告訴程式在哪裡找到影象。

在create函式中，gamePiece影象被新增到遊戲中。第29行說，我們正在新增的影象遊戲件作為一個精靈270px左和450px從左上角下來，我們的遊戲區。

讓我們的棋子動起來

到目前為止，這還不能稱為遊戲。首先，我們不能移動我們的棋子。為了能夠改變我們遊戲中的東西，我們將不得不新增一個更新功能。我們還必須調整config變數中的場景，以告訴遊戲更新遊戲時要執行哪個函式。

新增更新函式

配置中的新場景：

scene: { preload: preload, create: create, update: update}

接下來，在create函式下面新增一個update函式：

function update(){}

獲取關鍵輸入

為了讓玩家用箭頭鍵控制遊戲，我們必須新增一個變數來跟蹤玩家按下的鍵。在下面宣告gamePieces的地方宣告一個名為keyInputs的變數。在那裡宣告它將允許所有函式訪問新變數。

var gamePiece;var keyInputs;

在create函式中建立遊戲時，應該初始化keyInput變數。

function create(){ gamePiece = this.physics.add.sprite(270, 450, 'gamePiece'); keyInputs = this.input.keyboard.createCursorKeys();}

現在在更新功能中，我們可以檢查玩家是否正在按箭頭鍵，如果是，則相應地移動遊戲塊。在下面的例子中，遊戲塊被移動了2倍，但是你可以使這個數字變大或變小。一次移動1px似乎有點慢。

遊戲現在有了一個可移動的角色！但要真正成為一場比賽，我們需要一個目標。讓我們新增一些障礙。躲避障礙是8位時代很多遊戲的基礎。

為遊戲新增障礙

這個程式碼示例使用了兩個障礙精靈，分別稱為obstacle1和obstacle2。obstacle1是藍色的正方形，obstacle2是綠色的。每個影象都需要像遊戲精靈一樣預載入。

function preload(){ this.load.image('gamePiece', 'img/gamePiece.png'); this.load.image('obstacle1', 'img/obstacle1.png'); this.load.image('obstacle2', 'img/obstacle2.png');}

然後每個障礙精靈都需要在create函式中初始化，就像遊戲一樣。

function create(){ gamePiece = this.physics.add.sprite(270, 450, 'gamePiece'); keyInputs = this.input.keyboard.createCursorKeys(); obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1'); obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');}

使障礙物移動

這次要移動棋子，我們不想使用玩家輸入。相反，讓我們讓一個從上到下移動，另一個從左到右移動。為此，請向update函式新增以下程式碼：

obstacle1.y = obstacle1.y + 4;if(obstacle1.y > 600){ obstacle1.y = 0; obstacle1.x = Phaser.Math.Between(0, 600);} obstacle2.x = obstacle2.x + 4;if(obstacle2.x > 600){ obstacle2.x = 0; obstacle2.y = Phaser.Math.Between(0, 600);}

上面的程式碼將把障礙物1移到螢幕下方，障礙物2移到遊戲區域，每幀4px。一旦一個正方形離開螢幕，它就會在一個新的隨機點被移回對面。這將確保玩家總是有一個新的障礙。

檢測碰撞

但我們還沒有完成。你可能已經注意到我們的球員可以透過障礙。我們需要讓遊戲檢測玩家何時碰到障礙物並結束遊戲。

Phaser物理庫有一個對撞機探測器。我們只需要在create函式中初始化它。

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){ gamePiece.destroy(); obstacle.destroy(); obstacle2.destroy();});this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){ gamePiece.destroy(); obstacle.destroy(); obstacle2.destroy();});

對撞機方法需要三個引數。前兩個引數標識哪些物件正在碰撞。上面，我們有兩個對撞機。第一個碰撞器檢測遊戲件何時與障礙物1發生碰撞，第二個碰撞器查詢遊戲件與障礙物2之間的碰撞。

第三個引數告訴碰撞器在檢測到碰撞後要做什麼。在這個例子中，有一個函式。如果發生碰撞，所有遊戲元素都會被破壞；這會停止遊戲。現在，如果玩家碰到障礙物，他們將結束遊戲。