phaser3入門教程-從零開始開發一個打磚塊游戲-有解無憂

專案代碼

體驗一下

空格開始，左右箭頭控制移動

體驗一下

Phaser簡介

Phaser是一個HTML5游戲框架，它使用了許多HTML5 API，例如Canvas，WebGL，Audio，Gamepad等，并添加了一些有用的邏輯，例如管理游戲回圈并為我們提供了物理引擎，

使用Phaser，我們可以只用HTML，CSS和JavaScript來構建2D游戲，

專案需求

在使用Phaser構建Breakout克隆之前，讓我們首先定義游戲的范圍：

這款單人游戲具有30個積木，一個球拍和一個球的一個關卡
目標是讓球摧毀所有積木，同時確保其不離開游戲畫面的底部，
玩家將控制一個可左右移動的槳
該游戲是為桌面版網路用戶打造的，因此將使用鍵盤進行輸入

設定Phaser

Phaser是一個JavaScript庫，要開發和玩我們的游戲，我們需要一些基本的HTML來加載JS，在一個作業區中創建一個名為breakout的目錄，

在目錄中創建以下檔案和檔案夾：

一個index.html檔案
一個breakout.js檔案
名為的檔案夾 assets
在您的assets檔案夾中，創建一個images檔案夾
游戲資產是游戲使用的藝術品，聲音，視頻和其他資料，對于這個簡單的Breakout克隆，沒有多少資產需要使用檔案夾進行組織，但是，優良作法是將資產與代碼分開，并按型別將資產分開，

將以下代碼添加到您的index.html檔案中：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>Breakout</title>
  <style>
    html,
    body {
      margin: 0 auto;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    #game {
      margin: 10px auto;
      padding: 0;
      width: 800px;
      height: 640px;
    }
  </style>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="game"></div>
  <script src="https://www.cnblogs.com//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
  <script src="https://www.cnblogs.com/neuedu/archive/2020/12/28/breakout.js"></script>
</body>

</html>

此基本HTML代碼執行以下操作：

洗掉HTML和body標簽中的瀏覽器邊距和填充
添加一個gamediv元素，其中將包含我們的Breakout克隆
通過其CDN加載Phaser v3.17
加載breakout.js當前不執行任何操作但包含游戲邏輯的檔案

為了使用Phaser有效開發游戲，我們需要將這些檔案放到web服務器中運行，如果web服務器，出于安全原因，我們的瀏覽器將不允許我們的游戲腳本加載資產，

幸運的是，無需設定Apache或Nginx即可獲得運行中的Web服務器，如果使用VisualStudio Code，則可以安裝Live Server擴展，大多數IDE和文本編輯器都具有功能類似的插件，

如果您安裝了Python版本3，則可以通過終端進入作業區并輸入python3 -m http.server，還有其他CLI工具可提供簡單的Web服務器，請選擇一種可以為您提供最快時間開發游戲的工具，

最后，下載我們為此游戲創建的影像資產，將PNG檔案復制并粘貼到images檔案夾中，

創造我們的游戲世界

通過設定HTML和CSS，讓我們編輯breakout.js檔案以設定游戲世界，

開始Phaser

首先，我們需要配置Phaser并創建我們的Game實體，該游戲的實體是Phaser游戲的中央控制器，它進行所有的設定和開始游戲回圈，

讓我們配置和創建Game實體：

// This object contains all the Phaser configurations to load our game
const config = {
  type: Phaser.AUTO,
  parent: 'game',
  width: 800,
  heigth: 640,
  scale: {
    mode: Phaser.Scale.RESIZE,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  scene: {
    preload,
    create,
    update,
  },
  physics: {
    default: 'arcade',
    arcade: {
      gravity: false
    },
  }
};

// Create the game instance
const game = new Phaser.Game(config);

該type屬性告訴Phaser使用什么渲染器，Phaser可以使用HTML5的WebGL或Canvas元素來渲染我們的游戲，通過將型別設定為Phaser.AUTO，我們告訴Phaser首先嘗試使用WebGL進行渲染，如果失敗，則使用Canvas進行渲染，

該parent屬性表示將要玩我們的游戲的HTML元素的ID，我們使用width和定義游戲尺寸（以像素為單位）height，該scale物件為我們做兩件事：

mode 告訴Phaser如何使用父元素的空間，在這種情況下，我們確保游戲適合父元素的大小 div
autoCenter告訴Phaserdiv如果需要的話，如何在我們的父級中居中游戲，在這種情況下，我們將游戲在父div內垂直和水平居中，當游戲不占據父物件的整個空間時，此屬性會更有用，

在Phaser中，我們的游戲邏輯在中定義Scenes，將場景視為游戲中的各種狀態：標題螢屏是一個場景，游戲的每個級別將是它們自己的場景，剪切場景將是它自己的場景，等等，Phaser提供了Scene物件，但它也可以與含有常規的JavaScript物件preload()，create()和update()定義的函式，

最后一個配置告訴Phaser要使用哪個物理引擎，Phaser可以使用3種不同的物理引擎：Arcade，Impact和Matter，Arcade是最簡單的入門游戲，足以滿足我們的游戲需求，

Breakout 不需要重力即可作業，因此我們在物理引擎中禁用了該屬性，如果我們要構建Platform游戲，則可能會啟用重力，這樣當我們的玩家跳躍時，他們會自然地掉回地面，

為了確保我們的游戲設定作業，我們需要添加preload()，create()和update()功能，創建游戲實體后，向其中添加以下空白函式：

function preload() { }

function create() { }

function update() { }

在Web服務器運行的情況下，導航到運行游戲的頁面，您應該看到一個空白螢屏，如下所示：

游戲設定

加載資產

該游戲中的資產包括5張圖片，在您可能創建的其他游戲中，您的資產可能非常龐大，高清晰影像，音頻和視頻檔案可能會占用兆位元組的空間，資產越大，負擔越長，因此，Phaser具有一項preload()功能，我們可以在開始運行游戲之前加載所有資產，

將preload()函式更改為以下內容，以便我們可以在游戲回圈開始之前加載影像：

function preload() {
  this.load.image('ball', 'assets/images/ball_32_32.png');
  this.load.image('paddle', 'assets/images/paddle_128_32.png');
  this.load.image('brick1', 'assets/images/brick1_64_32.png');
  this.load.image('brick2', 'assets/images/brick2_64_32.png');
  this.load.image('brick3', 'assets/images/brick3_64_32.png');
}

第一個引數是稍后將用來參考影像的鍵，第二個引數是影像的位置，

注： -當我們用this我們的preload()，create()和update()功能，我們指的是由之前創建的游戲實體game，

加載影像后，我們想在螢屏上放置精靈，在的頂部breakout.js，添加以下將包含我們的精靈資料的變數：

let player, ball, violetBricks, yellowBricks, redBricks, cursors;

一旦全域定義它們，我們所有的函式都可以使用它們，

添加精靈

sprite 是游戲場景中任何2D影像，在Phaser中，sprite 會封裝影像以及其位置，速度，物理屬性和其他屬性，首先，通過create()函式創建player精靈：

player = this.physics.add.sprite(
  400, // x position
  600, // y position
  'paddle', // key of image for the sprite
);

您現在應該可以在螢屏上看到一個槳：

螢屏播放器

該sprite()方法的第一個引數是X放置精靈的坐標，第二個引數是Y坐標，最后一個引數是preload()函式中添加的影像資產的鍵，

了解phaser和大多數2D游戲框架如何使用坐標很重要，我們在學校學到的圖形通常將原點即點（0，0）置于中心，在Phaser中，原點位于螢屏的左上方，隨著x增長，我們實際上正在向右移動，隨著y增加，我們正在向下移動，

我們的游戲的寬度為800像素，高度為640像素，因此我們的游戲坐標如下所示：

游戲坐標

讓我們將球添加到Player上方，將以下代碼添加到該create()函式：

ball = this.physics.add.sprite(
  400, // x position
  565, // y position
  'ball' // key of image for the sprite
);

由于球上面我們的Player，在坐標y的值是低比玩家的Y坐標，

添加精靈組

雖然Phaser可以輕松添加sprite，但如果必須分別定義每個sprite，將很快變得乏味，Breakout中的磚塊幾乎相同，位置不同，但是它們的屬性（例如顏色以及它們與球的互動方式）是相同的，我們可以創建精靈組來更好地管理它們，而不是創建30個磚精靈物件，

讓我們通過create()函式添加第一排紫色磚：

// Add violet bricks
violetBricks = this.physics.add.group({
  key: 'brick1',
  repeat: 9,
  setXY: {
    x: 80,
    y: 140,
    stepX: 70
  }
});

代替this.physics.add.sprite()我們使用this.physics.add.group()并傳遞一個JavaScript物件，key屬性參考sprite組中所有sprite將使用的影像鍵，該repeat屬性告訴Phaser再創建多少個精靈，每個精靈組都創建一個精靈，隨著repeat設定為9，Phaser將創建一個精靈組10個精靈，該setXY物件具有三個有趣的屬性：

x 是第一個精靈的X坐標
y 是第二個精靈的Y坐標
stepX 是x軸上重復的精靈之間的像素長度，

也有一個stepY屬性，但是我們不需要在游戲中使用它，讓我們為磚添加另外兩個剩余的精靈組：

// Add yellow bricks
yellowBricks = this.physics.add.group({
  key: 'brick2',
  repeat: 9,
  setXY: {
    x: 80,
    y: 90,
    stepX: 70
  }
});

// Add red bricks
redBricks = this.physics.add.group({
  key: 'brick3',
  repeat: 9,
  setXY: {
    x: 80,
    y: 40,
    stepX: 70
  }
});

我們的游戲已經整合在一起，您的螢屏應如下所示：

添加所有精靈

游戲勝利與結束

如果我們的球落到螢屏底部，我們可能會輸掉一場比賽，在“phaser”中，要使球位于螢屏下方，則球的Y坐標大于游戲世界的高度，讓我們創建一個檢查此功能的函式，在底部breakout.js添加以下內容：

function isGameOver(world) {
  return ball.body.y > world.bounds.height;
}

我們的功能從場景的物理屬性中獲取世界物件，該物件將在update()功能中可用，它檢查球精靈的Y坐標是否大于游戲世界邊界的高度，

為了贏得比賽，我們需要打掉所有磚塊，Phaser中的精靈都具有活動屬性，我們可以使用該屬性來確定我們是否獲勝，精靈組可以計算其中包含的活動精靈的數量，如果每個積木精靈組中都沒有活動的積木，即活動積木有0個，則玩家贏得了游戲，

讓我們breakout.js通過在底部添加一個檢查來更新檔案：

function isWon() {
  return violetBricks.countActive() + yellowBricks.countActive() + redBricks.countActive() === 0;
}

我們接受每個精靈組作為引數，在其中添加活動精靈的數量，并檢查其是否等于0，

既然我們已經定義了輸贏條件，我們希望Phaser在游戲回圈開始時檢查它們，一旦玩家獲勝或失敗，游戲便應停止，

讓我們更新update()函式：

function update() {
  // Check if the ball left the scene i.e. game over
  if (isGameOver(this.physics.world)) {
    // TODO: Show "Game over" message to the player
  } else if (isWon()) {
    // TODO: Show "You won!" message to the player
  } else {
    // TODO: Logic for regular game time
  }
}

使用鍵盤輸入移動播放器

演奏者的動作取決于鍵盤輸入，為了能夠跟蹤鍵盤輸入，現在該使用cursors變數了，

并且在我們create()功能的底部：

cursors = this.input.keyboard.createCursorKeys();
Phaser中的游標鍵可跟蹤6個鍵盤鍵的用法：上，右，下，左，Shift和空格鍵，

現在我們需要對cursors物件的狀態做出反應以更新播放器的位置，在函式的else子句中update()添加以下內容：

// Put this in so that the player stays still if no key is being pressed
player.body.setVelocityX(0);

if (cursors.left.isDown) {
  player.body.setVelocityX(-350);
} else if (cursors.right.isDown) {
  player.body.setVelocityX(350);
}

現在我們可以將播放器從左向右移動！

您會注意到，玩家精靈可以離開游戲螢屏，理想情況下，它不能離開游戲螢屏，我們稍后將在處理沖突時解決該問題，

等待開始

在我們添加邏輯來移動球之前，如果游戲在移動之前等待用戶輸入，這將有所幫助，加載游戲并立即被強制啟動并不是一種好的體驗，玩家沒有時間做出反應！

玩家按下空格鍵后，讓我們向上移動球，如果用戶向左或向右移動球拍，則球也將被移動，因此它始終位于球拍的中心，

首先，我們需要自己的變數來跟蹤游戲是否啟動，在breakout.js宣告游戲變數之后，在的頂部，添加：

let gameStarted = false;

現在，在else我們的更新函式的子句中：

if (!gameStarted) {
  ball.setX(player.x);

  if (cursors.space.isDown) {
    gameStarted = true;
    ball.setVelocityY(-200);
  }
}

如果游戲尚未開始，請將我們球的X坐標設定為玩家的中心，游戲物件的坐標基于其中心，因此sprite的x和y屬性將點指向我們sprite的中心，

請注意，雖然可以x通過在設定屬性時直接參考屬性值來獲取屬性值，但我們總是嘗試使用適當的setter函式，設定器功能可以包括驗證我們的輸入，更新另一個屬性或觸發事件的邏輯，它使我們的代碼更具可預測性，

就像之前移動player一樣，我們檢查是否按下了空格鍵，如果按下該按鈕，我們會將gameStarted標志切換到，true以便球不再跟隨玩家的水平位置，并將球的Y速度設定為-200，負y速度將物體向上發送，對于正速度，較大的值可以更快地向下移動物件，對于負速度，較小的值可以更快地向上移動物件，

現在，當我們移動玩家時，球跟隨著，如果我們按下空格鍵，球就會向上射擊：

到目前為止，您將觀察到我們游戲的一些行為：

球在磚塊后面渲染
玩家可以離開螢屏的邊界
球可以離開螢屏的邊界

球是在積木后面渲染的，因為它是在積木精靈組之前的創建函式中添加到游戲中的，在Phaser中，通常使用HTML5 canvas元素，最近添加的影像繪制在先前影像的頂部，

通過添加一些世界碰撞可以解決最后兩個問題，

處理碰撞

世界碰撞

我們所有的精靈互動都在create函式中定義，使用Phaser輕松與世界場景碰撞，在create函式末尾添加以下內容：

player.setCollideWorldBounds(true);
ball.setCollideWorldBounds(true);

它應該給我們這樣的輸出：

當球員運動正常時，球似乎卡在頂部，為了解決這個問題，我們需要設定bounce球形精靈的屬性，該bounce屬性將告訴Phaser與物件碰撞后要維持多少速度，

將此添加到create()函式的末尾：

ball.setBounce(1, 1);

這告訴Phaser，球應保持其所有X和Y速度，如果我們用空格鍵釋放球，則球應該在游戲世界中上下彈跳，我們需要從游戲世界的底部禁用碰撞檢測，

如果我們不這樣做，我們將永遠不知道比賽何時結束，通過在create函式末尾添加以下行來禁用與游戲世界底部的碰撞：

this.physics.world.checkCollision.down = false;

我們現在應該有一個像這樣的游戲：

撞磚

現在我們的運動精靈已正確地與我們的游戲世界碰撞，讓我們開始研究球與磚塊之間以及球與球員之間的碰撞，

在我們的create()函式中，將以下代碼行添加到末尾：

this.physics.add.collider(ball, violetBricks, hitBrick, null, this);
this.physics.add.collider(ball, yellowBricks, hitBrick, null, this);
this.physics.add.collider(ball, redBricks, hitBrick, null, this);

hitBrick()當ball與各種磚精靈組發生碰撞時，碰撞器方法會告訴Phaser的物理系統執行該功能，

每次按下空格鍵，球就會向上射擊，沒有X速度，所以球會直接回到槳上，那將是一個無聊的游戲，因此，當我們第一次碰到一塊磚時，我們將設定一個隨機的X速度，

在以下breakout.js定義的底部hitBrick：

function hitBrick(ball, brick) {
  brick.disableBody(true, true);

  if (ball.body.velocity.x === 0) {
    randNum = Math.random();
    if (randNum >= 0.5) {
      ball.body.setVelocityX(150);
    } else {
      ball.body.setVelocityX(-150);
    }
  }
}

該hitBrick()函式接受collider()方法中使用的前兩個引數，例如ball和violetBricks，該disableBody(true, true)磚上呼叫告訴Phaser，以使之失去活性，并從螢屏隱藏它，如果球的X速度為0，則根據亂數的值為球賦予速度，

如果一個小球以緩慢的速度向您的腳滾動，則在碰撞時它將停止，默認情況下，Arcade Physics引擎會模擬碰撞對速度的影響，對于我們的游戲，我們不希望球撞到磚頭時失去速度，我們需要將immovable屬性設定為sprite組true，

更新的定義violetBricks，yellowBricks并redBricks于以下內容：

// Add violet bricks
violetBricks = this.physics.add.group({
  key: 'brick1',
  repeat: 9,
  immovable: true,
  setXY: {
    x: 80,
    y: 140,
    stepX: 70
  }
});

// Add yellow bricks
yellowBricks = this.physics.add.group({
  key: 'brick2',
  repeat: 9,
  immovable: true,
  setXY: {
    x: 80,
    y: 90,
    stepX: 70
  }
});

// Add red bricks
redBricks = this.physics.add.group({
  key: 'brick3',
  repeat: 9,
  immovable: true,
  setXY: {
    x: 80,
    y: 40,
    stepX: 70
  }
});

我們的磚塊碰撞現在已經完成，我們的游戲應該像這樣作業：

開發技巧-開發游戲的物理原理時，您可能需要啟用除錯模式，以查看精靈的邊界框以及它們如何相互碰撞，在您的游戲config物件中，在arcade我們定義的屬性中gravity，您可以通過將其添加到物件中來啟用除錯功能：

debug: true

玩家沖突

處理球與player之間的碰撞是類似的，首先，確保播放器為immovable，在create()函式的末尾添加以下內容：

player.setImmovable(true);

然后我們在球和player之間添加一個對撞機：

this.physics.add.collider(ball, player, hitPlayer, null, this);

當球擊中球員時，我們希望發生兩件事：

球應該移動得更快一些，以逐漸增加比賽難度
球的水平方向取決于擊中球員的哪一側-如果球擊中球員的左側，那么它應該向左走，如果球擊中球員的右側，那么它應該向右走，
為了適應這些情況，讓我們更新breakout.js以下hitPlayer()功能：

function hitPlayer(ball, player) {
  // Increase the velocity of the ball after it bounces
  ball.setVelocityY(ball.body.velocity.y - 5);

  let newXVelocity = Math.abs(ball.body.velocity.x) + 5;
  // If the ball is to the left of the player, ensure the X-velocity is negative
  if (ball.x < player.x) {
    ball.setVelocityX(-newXVelocity);
  } else {
    ball.setVelocityX(newXVelocity);
  }
}

注意：一個精靈可以與另一個精靈碰撞，一個精靈可以與精靈組碰撞，并且精靈組可以相互碰撞，phaser足夠聰明，可以使用我們在背景關系中定義的碰撞函式，

現在我們的游戲既有玩家沖突又有磚塊沖突：

添加文字

盡管我們的游??戲可以完全正常運行，但是玩此游戲的人卻不知道如何開始或不知道游戲何時結束，

讓我們在gameStarted宣告的頂部添加三個新的全域變數，這些變數將存盤我們的文本資料breakout.js：

let openingText, gameOverText, playerWonText;

開始界面

讓我們在加載游戲時添加一些文本，告訴玩家按下空格，在create()函式中添加以下代碼：

openingText = this.add.text(
  this.physics.world.bounds.width / 2,
  this.physics.world.bounds.height / 2,
  'Press SPACE to Start',
  {
    fontFamily: 'Monaco, Courier, monospace',
    fontSize: '50px',
    fill: '#fff'
  }
);

openingText.setOrigin(0.5);

該text方法的前兩個引數是文本框的X和Y坐標，我們使用游戲場景的寬度和高度來確定其放置位置-居中，第三個引數是要顯示的文本，第四個引數是包含字體相關資料的JS物件，

與精靈不同，文本物件的X和Y坐標是指物件最左上角的點，而不是其中心，這就是為什么我們使用該setOrigin()方法使坐標系像sprites一樣作業，在這種情況下，它使定位在中心更加容易，

在玩游戲時，我們不再希望看到開頭文字，在update()函式中，將if檢查是否按下空格鍵的陳述句更改為以下內容：

if (cursors.space.isDown) {
  gameStarted = true;
  ball.setVelocityY(-200);
  openingText.setVisible(false);
}

文本物件不是精靈，我們不能禁用它們的主體，當我們不需要看到它們時，可以使它們不可見，我們的游戲現在開始如下：

游戲結束和贏得比賽

像之前一樣，我們需要在create()函式中添加文本物件，并使它們不可見，以便在游戲開始時不會看到它們：

// Create game over text
gameOverText = this.add.text(
  this.physics.world.bounds.width / 2,
  this.physics.world.bounds.height / 2,
  'Game Over',
  {
    fontFamily: 'Monaco, Courier, monospace',
    fontSize: '50px',
    fill: '#fff'
  }
);

gameOverText.setOrigin(0.5);

// Make it invisible until the player loses
gameOverText.setVisible(false);

// Create the game won text
playerWonText = this.add.text(
  this.physics.world.bounds.width / 2,
  this.physics.world.bounds.height / 2,
  'You won!',
  {
    fontFamily: 'Monaco, Courier, monospace',
    fontSize: '50px',
    fill: '#fff'
  }
);

playerWonText.setOrigin(0.5);

// Make it invisible until the player wins
playerWonText.setVisible(false);

現在已定義它們，我們必須在update()函式中更改其可見性：

// Check if the ball left the scene i.e. game over
if (isGameOver(this.physics.world)) {
  gameOverText.setVisible(true);
  ball.disableBody(true, true);
} else if (isWon()) {
  playerWonText.setVisible(true);
  ball.disableBody(true, true);
} else {
  ...
}

我們禁用了球體，因此不再需要更新并顯示該球，

如果我們輸了比賽，我們將看到：

游戲結束

如果我們贏了比賽，我們將看到以下內容：

游戲勝利

我們的打磚塊游戲已完成！

結論

Phaser是一個HTML5游戲開發框架，可讓我們在網路上快速構建視頻游戲，除了通過HTML5 API進行抽象之外，它還為我們提供了有用的實用程式，例如物理引擎，并管理了游戲回圈-所有游戲的執行生命周期，

完整代碼

// Game objects are global variables so that many functions can access them
let player, ball, violetBricks, yellowBricks, redBricks, cursors;
// Variable to determine if we started playing
let gameStarted = false;
// Add global text objects
let openingText, gameOverText, playerWonText;

// This object contains all the Phaser configurations to load our game
const config = {
  /**
   * The type can be Phaser.CANVAS, Phaser.WEBGL or Phaser.AUTO. AUTO means that
   * Phaser will try to render with WebGL, and fall back to Canvas if it fails
   */
  type: Phaser.AUTO,
  // Parent element to inject the Canvas/WebGL element with the game
  parent: 'game',
  width: 800,
  heigth: 640,
  scale: {
    // Ensure the canvas is resized to fit the parent div's dimensions
    mode: Phaser.Scale.RESIZE,
    // Center the game canvas both horizontally and vertically within the parent
    autoCenter: Phaser.Scale.CENTER_BOTH
  },
  /**
   * A scene is "self-contained" game world - all the logic and state of a game
   * component. For e.g. it's common to a game menu to be one scene, whereas the
   * first level is another scene. Phaser has a Scene object, but we can provide
   * a regular JS object with these function names:
   */
  scene: {
    preload,
    create,
    update,
  },
  /**
   * The physics engine determines how objects interact with the world. Phaser
   * supports three physics engines out of the box: arcade, impact and matter.
   * Arcade is understood to be the simplest one to implement
   */
  physics: {
    default: 'arcade',
    arcade: {
      gravity: false
    },
  }
};

// Create the game instance
const game = new Phaser.Game(config);

/**
 * The function loads assets as Phaser begins to run the scene. The images are
 * loaded as key value pairs, we reference the assets by their keys of course
 */
function preload() {
  this.load.image('ball', 'assets/images/ball_32_32.png');
  this.load.image('paddle', 'assets/images/paddle_128_32.png');
  this.load.image('brick1', 'assets/images/brick1_64_32.png');
  this.load.image('brick2', 'assets/images/brick2_64_32.png');
  this.load.image('brick3', 'assets/images/brick3_64_32.png');
}

/**
 * We create our game world in this function. The initial state of our game is
 * defined here. We also set up our physics rules here
 */
function create() {
  /**
   * Coordinates start at 0,0 from the top left
   * As we move rightward, the x value increases
   * As we move downward, the y value increases.
   */
  player = this.physics.add.sprite(
    400, // x position
    600, // y position
    'paddle', // key of image for the sprite
  );

  // Let's add the ball
  ball = this.physics.add.sprite(
    400, // x position
    565, // y position
    'ball' // key of image for the sprite
  );

  // Add violet bricks
  violetBricks = this.physics.add.group({
    key: 'brick1',
    repeat: 9,
    immovable: true,
    setXY: {
      x: 80,
      y: 140,
      stepX: 70
    }
  });

  // Add yellow bricks
  yellowBricks = this.physics.add.group({
    key: 'brick2',
    repeat: 9,
    immovable: true,
    setXY: {
      x: 80,
      y: 90,
      stepX: 70
    }
  });

  // Add red bricks
  redBricks = this.physics.add.group({
    key: 'brick3',
    repeat: 9,
    immovable: true,
    setXY: {
      x: 80,
      y: 40,
      stepX: 70
    }
  });

  // Manage key presses
  cursors = this.input.keyboard.createCursorKeys();

  // Ensure that the player and ball can't leave the screen
  player.setCollideWorldBounds(true);
  ball.setCollideWorldBounds(true);
  /**
   * The bounce ensures that the ball retains its velocity after colliding with
   * an object.
   */
  ball.setBounce(1, 1);

  /**
   * Disable collision with the bottom of the game world. This needs to be added
   * so the ball falls to the bottom, which means that the game is over
   */
  this.physics.world.checkCollision.down = false;

  // Add collision for the bricks
  this.physics.add.collider(ball, violetBricks, hitBrick, null, this);
  this.physics.add.collider(ball, yellowBricks, hitBrick, null, this);
  this.physics.add.collider(ball, redBricks, hitBrick, null, this);

  // Make the player immovable
  player.setImmovable(true);
  // Add collision for the player
  this.physics.add.collider(ball, player, hitPlayer, null, this);

  // Create opening text
  openingText = this.add.text(
    this.physics.world.bounds.width / 2,
    this.physics.world.bounds.height / 2,
    'Press SPACE to Start',
    {
      fontFamily: 'Monaco, Courier, monospace',
      fontSize: '50px',
      fill: '#fff'
    },
  );

  /**
   * The origin of the text object is at the top left, change the origin to the
   * center so it can be properly aligned
   */
  openingText.setOrigin(0.5);

  // Create game over text
  gameOverText = this.add.text(
    this.physics.world.bounds.width / 2,
    this.physics.world.bounds.height / 2,
    'Game Over',
    {
      fontFamily: 'Monaco, Courier, monospace',
      fontSize: '50px',
      fill: '#fff'
    },
  );

  gameOverText.setOrigin(0.5);

  // Make it invisible until the player loses
  gameOverText.setVisible(false);

  // Create the game won text
  playerWonText = this.add.text(
    this.physics.world.bounds.width / 2,
    this.physics.world.bounds.height / 2,
    'You won!',
    {
      fontFamily: 'Monaco, Courier, monospace',
      fontSize: '50px',
      fill: '#fff'
    },
  );

  playerWonText.setOrigin(0.5);

  // Make it invisible until the player wins
  playerWonText.setVisible(false);
}

/**
 * Our game state is updated in this function. This corresponds exactly to the
 * update process of the game loop
 */
function update() {
  // Check if the ball left the scene i.e. game over
  if (isGameOver(this.physics.world)) {
    gameOverText.setVisible(true);
    ball.disableBody(true, true);
  } else if (isWon()) {
    playerWonText.setVisible(true);
    ball.disableBody(true, true);
  } else {
    // Put this in so that the player doesn't move if no key is being pressed
    player.body.setVelocityX(0);

    /**
     * Check the cursor and move the velocity accordingly. With Arcade Physics we
     * adjust velocity for movement as opposed to manipulating xy values directly
     */
    if (cursors.left.isDown) {
      player.body.setVelocityX(-350);
    } else if (cursors.right.isDown) {
      player.body.setVelocityX(350);
    }

    // The game only begins when the user presses Spacebar to release the paddle
    if (!gameStarted) {
      // The ball should follow the paddle while the user selects where to start
      ball.setX(player.x);

      if (cursors.space.isDown) {
        gameStarted = true;
        ball.setVelocityY(-200);
        openingText.setVisible(false);
      }
    }
  }
}

/**
 * Checks if the user lost the game
 * @param world - the physics world
 * @return {boolean}
 */
function isGameOver(world) {
  return ball.body.y > world.bounds.height;
}

/**
 * Checks if the user won the game
 * @return {boolean}
 */
function isWon() {
  return violetBricks.countActive() + yellowBricks.countActive() + redBricks.countActive() == 0;
}

/**
 * This function handles the collision between a ball and a brick sprite
 * In the create function, ball is a sprite and violetBricks, yellowBricks and
 * redBricks are sprite groups. Phaser is smart enough to handle the collisions
 * for each individual sprite.
 * @param ball - the ball sprite
 * @param brick - the brick sprite
 */
function hitBrick(ball, brick) {
  brick.disableBody(true, true);

  if (ball.body.velocity.x == 0) {
    randNum = Math.random();
    if (randNum >= 0.5) {
      ball.body.setVelocityX(150);
    } else {
      ball.body.setVelocityX(-150);
    }
  }
}

/**
 * The function handles the collision between the ball and the player. We want
 * to ensure that the ball's direction after bouncing off the player is based
 * on which side of the player was hit. Also, to make things more difficult, we
 * want to increase the ball's velocity when it's hit.
 * @param ball - the ball sprite
 * @param player - the player/paddle sprite
 */
function hitPlayer(ball, player) {
  // Increase the velocity of the ball after it bounces
  ball.setVelocityY(ball.body.velocity.y - 5);

  let newXVelocity = Math.abs(ball.body.velocity.x) + 5;
  // If the ball is to the left of the player, ensure the x velocity is negative
  if (ball.x < player.x) {
    ball.setVelocityX(-newXVelocity);
  } else {
    ball.setVelocityX(newXVelocity);
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/241787.html

標籤：其他

上一篇：元旦了，送給程式員的祝福禮！！

下一篇：快遞柜也能攻擊？——論API的安全性