按钮

我们需要一个变量来存储一个布尔值，表示游戏当前是否正在进行，另一个变量来表示我们的按钮。在其他变量定义下方添加以下代码行

let playing = false;
let startButton;

我们可以像加载球的摆动动画一样加载按钮精灵表。在 preload() 函数的底部添加以下代码

game.load.spritesheet("button", "img/button.png", 120, 40);

单个按钮帧宽 120 像素，高 40 像素。

您还需要从 GitHub 获取按钮精灵表，并将其保存在 /img 目录中。

使用 add.button 方法可以将新按钮添加到游戏中。在 create() 函数的底部添加以下代码行

startButton = game.add.button(
  game.world.width * 0.5,
  game.world.height * 0.5,
  "button",
  startGame,
  this,
  1,
  0,
  2,
);
startButton.anchor.set(0.5);

button() 方法的参数如下

• 按钮的 x 和 y 坐标
• 要显示的按钮图形资产的名称
• 按下按钮时将执行的回调函数
• this 的引用，用于指定执行上下文
• 用于悬停、离开和按下事件的帧。

现在我们需要定义上面代码中引用的 startGame() 函数

function startGame() {
  startButton.destroy();
  ball.body.velocity.set(150, -150);
  playing = true;
}

按下按钮后，我们将移除按钮，设置球的初始速度，并将 playing 变量设置为 true。

最后，返回到 create() 函数，找到 ball.body.velocity.set(150, -150); 代码行，并将其删除。您只希望在按下按钮后球才会移动，而不是之前！

它按预期工作，但我们仍然可以在游戏尚未开始时移动球拍，这看起来有点滑稽。为了阻止这种情况，我们可以利用 playing 变量，使球拍只有在游戏开始后才能移动。为此，请像这样调整 update() 函数

function update() {
  game.physics.arcade.collide(ball, paddle, ballHitPaddle);
  game.physics.arcade.collide(ball, bricks, ballHitBrick);
  if (playing) {
    paddle.x = game.input.x || game.world.width * 0.5;
  }
}

这样，在加载和准备所有内容后，但实际游戏开始之前，球拍将不可移动。

您可以在下面的实时演示中查看本课的完成代码，并与之互动以更好地了解它的工作原理

在本系列文章的最后，我们将通过添加一些 随机性 到球从球拍反弹的方式，使游戏玩法更有趣。

• « 上一步
• 下一步 »