建造磚塊區域
這是 第 9 步，共 16 步，來自 Gamedev Phaser 教程。讓我們來探索如何使用迴圈建立一個磚塊組並將其顯示在螢幕上。建造磚塊區域比在螢幕上新增單個物件要複雜一些，儘管與純 JavaScript 相比，在 Phaser 中仍然更容易。
新屬性
首先，在您之前的屬性定義下方新增新的 bricks 屬性。
class ExampleScene extends Phaser.Scene {
// ... previous property definitions ...
bricks;
// ... rest of the class ...
}
bricks 屬性將用於建立一個磚塊組，這樣可以方便地一次管理多個磚塊。
渲染磚塊影像
接下來，讓我們載入磚塊的影像—在其他 load.image() 呼叫下方新增以下呼叫。
class ExampleScene extends Phaser.Scene {
// ...
preload() {
// ...
this.load.image("brick", "img/brick.png");
}
// ...
}
您還需要 獲取磚塊影像 並將其儲存在您的 /img 目錄中。
繪製磚塊
我們將把繪製磚塊的所有程式碼放在一個名為 initBricks 的方法中，以將其與其餘程式碼分開。在 create() 方法的末尾呼叫 initBricks。
class ExampleScene extends Phaser.Scene {
// ...
create() {
// ...
this.initBricks();
}
// ...
}
現在來處理方法本身。在 ExampleScene 類的末尾，也就是在閉合花括號 } 之前，新增 initBricks 方法，如下所示。首先，我們新增 bricksLayout 物件，因為它很快就會派上用場。
class ExampleScene extends Phaser.Scene {
// ...
initBricks() {
const bricksLayout = {
width: 50,
height: 20,
count: {
row: 3,
col: 7,
},
offset: {
top: 50,
left: 60,
},
padding: 10,
};
}
}
這個 bricksLayout 包含了我們所需的所有資訊：單個磚塊的寬度和高度、螢幕上顯示的磚塊的行數和列數、頂部和左側的偏移量（開始繪製磚塊的畫布位置）以及每行和每列磚塊之間的間距。
現在，讓我們開始建立磚塊本身—首先，新增一個空的組來容納磚塊，方法是在 initBricks() 方法的底部新增以下行。
this.bricks = this.add.group();
我們可以迴圈遍歷行和列，在每次迭代中建立一個新的磚塊—在上一行程式碼下方新增以下巢狀迴圈。
for (let c = 0; c < bricksLayout.count.col; c++) {
for (let r = 0; r < bricksLayout.count.row; r++) {
// create new brick and add it to the group
}
}
這樣，我們將建立所需數量的磚塊，並將它們全部包含在一個組中。現在我們需要在巢狀迴圈結構中新增一些程式碼來繪製每個磚塊。將內容填充如下。
for (let c = 0; c < bricksLayout.count.col; c++) {
for (let r = 0; r < bricksLayout.count.row; r++) {
const brickX = 0;
const brickY = 0;
const newBrick = this.add.sprite(brickX, brickY, "brick");
this.physics.add.existing(newBrick);
newBrick.body.setImmovable(true);
this.bricks.add(newBrick);
}
}
這裡我們透過迴圈遍歷行和列來建立新的磚塊並將它們放置在螢幕上。新建立的磚塊已啟用 Arcade 物理引擎，其身體被設定為不可移動（因此在被球擊中時不會移動），然後被新增到組中。
目前的問題是我們把所有磚塊都畫在了一個地方，座標是 (0,0)。我們需要做的是在每個磚塊自己的 x 和 y 位置繪製它。如下更新 brickX 和 brickY 行。
const brickX =
c * (bricksLayout.width + bricksLayout.padding) + bricksLayout.offset.left;
const brickY =
r * (bricksLayout.height + bricksLayout.padding) + bricksLayout.offset.top;
每個 brickX 位置的計算方式是 bricksLayout.width 加上 bricksLayout.padding，乘以列號 c，再加上 bricksLayout.offset.left；brickY 的邏輯是相同的，只是它使用了行號 r、bricksLayout.height 和 bricksLayout.offset.top 的值。現在每個磚塊都可以放置在其正確的位置，磚塊之間有間距，並從畫布的左邊緣和頂邊緣偏移繪製。
此時如果重新載入 index.html，您應該會看到磚塊已在螢幕上打印出來，並且彼此之間的距離均勻。
Compare your code
這是您到目前為止應該看到的效果，即時執行。要檢視其原始碼，請單擊“播放”按鈕。
後續步驟
但還有些東西缺失。球會穿過磚塊而不會停止—我們需要 proper 碰撞檢測。