Build the brick field

这是Gamedev Phaser 教程 (en-US) 16 的第 9 步。在Gamedev-Phaser-Content-Kit / demos / lesson09.html完成本课后，你可以找到源代码。

建立砖块比将单个对象添加到屏幕要复杂一点，尽管使用 Phaser 还是比纯 JavaScript 更容易。我们来探讨如何创建一组砖块，并使用循环在屏幕上打印。

定义新变量

首先，我们定义所需的变量 - 在以前的变量定义中添加以下内容：

var bricks;
var newBrick;
var brickInfo;

该bricks变量将用于创建一个组，newBrick将在循环的每次迭代中添加到组中的新对象，brickInfo并将存储我们需要的所有数据。

画砖

我们将将所有用于绘制砖块的代码放在一个initBricks函数中，以使其与其余代码分离。initBricks在create()函数末尾添加一个调用：

function create() {
  // ...
  initBricks();
}

现在到函数本身。initBricks()在我们的游戏代码末尾添加功能，就在关闭</ script>标签之前，如下所示。首先我们已经包括了这个 brickInfo对象，因为这很快就会派上用场：

function initBricks() {
  brickInfo = {
    width: 50,
    height: 20,
    count: {
      row: 7,
      col: 3,
    },
    offset: {
      top: 50,
      left: 60,
    },
    padding: 10,
  };
}

这个brickInfo对象将包含我们需要的所有信息：单个砖的宽度和高度，我们将在屏幕上看到的砖的行数和列数，顶部和左边的偏移量（画布上我们将开始绘制的位置）砖块）和每一列和砖块之间的填充。

现在，让我们开始创建砖块 - 首先添加一个空组来包含砖块，在initBricks()函数底部添加以下行：

bricks = game.add.group();

我们可以循环遍历行和列，以便在每次迭代中创建新的砖块 - 在上一行代码下面添加以下嵌套循环：

for (c = 0; c < brickInfo.count.col; c++) {
  for (r = 0; r < brickInfo.count.row; r++) {
    // create new brick and add it to the group
  }
}

这样我们将创建我们需要的确切数量的砖，并将它们全部包含在一个组中。现在我们需要在嵌套循环结构中添加一些代码来绘制每个砖块。填写内容如下图所示：

for (c = 0; c < brickInfo.count.col; c++) {
  for (r = 0; r < brickInfo.count.row; r++) {
    var brickX = 0;
    var brickY = 0;
    newBrick = game.add.sprite(brickX, brickY, "brick");
    game.physics.enable(newBrick, Phaser.Physics.ARCADE);
    newBrick.body.immovable = true;
    newBrick.anchor.set(0.5);
    bricks.add(newBrick);
  }
}

在这里，我们循环遍历行和列，创建新的砖块并将其放在屏幕上。新创建的砖块为 Arcade 物理引擎启用，它的身体被设置为不可移动（所以当球被击中时它不会移动），我们还将锚点放在中间并添加砖到集团。

目前的问题是，我们在一个地方绘制所有的砖，坐标（0,0）。我们需要做的是将每个砖块绘制在自己的 x 和 y 位置。更新brickX和brickY行如下：

var brickX = r * (brickInfo.width + brickInfo.padding) + brickInfo.offset.left;
var brickY = c * (brickInfo.height + brickInfo.padding) + brickInfo.offset.top;

每个brickX位置都是brickInfo.width加brickInfo.padding号乘以行号r，加上brickInfo.offset.left; 用于所述逻辑brickY是不同之处在于它使用的值列号相同c，brickInfo.height和brickInfo.offset.top。现在每个砖都可以放置在正确的位置，每个砖块之间填充，并从左侧和顶部画布边缘偏移绘制。

检查 initBricks() 代码

这是功能的完整代码initBricks()：

function initBricks() {
  brickInfo = {
    width: 50,
    height: 20,
    count: {
      row: 7,
      col: 3,
    },
    offset: {
      top: 50,
      left: 60,
    },
    padding: 10,
  };
  bricks = game.add.group();
  for (c = 0; c < brickInfo.count.col; c++) {
    for (r = 0; r < brickInfo.count.row; r++) {
      var brickX =
        r * (brickInfo.width + brickInfo.padding) + brickInfo.offset.left;
      var brickY =
        c * (brickInfo.height + brickInfo.padding) + brickInfo.offset.top;
      newBrick = game.add.sprite(brickX, brickY, "brick");
      game.physics.enable(newBrick, Phaser.Physics.ARCADE);
      newBrick.body.immovable = true;
      newBrick.anchor.set(0.5);
      bricks.add(newBrick);
    }
  }
}

如果你现在重新加载index.html，你应该看到在屏幕上打印的砖块彼此相距甚远。

比较你的代码

你可以在下面的现场演示中查看本课程的完成代码，并使用它来更好地了解它的工作原理：

下一步

有些东西丢失了球不经停，经过砖块 - 我们需要适当的碰撞检测 (en-US)。

定义新变量

渲染砖图像

画砖

检查 initBricks() 代码

比较你的代码

下一步