Buttons

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

var playing = false;
var startButton;

我们可以加载按钮 spritesheet 与我们加载球的摆动动画相同的方式。将以下内容添加到preload()函数底部：

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

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

你还需要从 Github 抓取按钮 spritesheet，并将其保存在你的/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;
  }
}

这样一来，在所有的装载和准备之后，但在实际游戏开始之前，桨是不可移动的。

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

在本系列文章中我们将做的最后一件事情是，通过添加一些随机化的方式，球从球上弹起来，使游戏更有趣。

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/content/files/en-us/games/workflows/2d_breakout_game_phaser/animations_and_tweens/index.md)