Buttons

We will need a variable to store a boolean value representing whether the game is currently being played or not, and another one to represent our button. Add these lines below your other variable definitions:

let playing = false;
let startButton;

We can load the button spritesheet the same way we loaded the ball's wobble animation. Add the following to the bottom of the preload() function:

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

A single button frame is 120 pixels wide and 40 pixels high.

You also need to grab the button spritesheet from GitHub, and save it in your /img directory.

Adding the new button to the game is done by using the add.button method. Add the following lines to the bottom of your create() function:

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);

The button() method's parameters are as follows:

• The button's x and y coordinates
• The name of the graphic asset to be displayed for the button
• A callback function that will be executed when the button is pressed
• A reference to this to specify the execution context
• The frames that will be used for the over, out and down events.

Now we need to define the startGame() function referenced in the code above:

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

When the button is pressed, we remove the button, sets the ball's initial velocity and set the playing variable to true.

Finally for this section, go back into your create() function, find the ball.body.velocity.set(150, -150); line, and remove it. You only want the ball to move when the button is pressed, not before!

It works as expected, but we can still move the paddle when the game hasn't started yet, which looks a bit silly. To stop this, we can take advantage of the playing variable and make the paddle movable only when the game has started. To do that, adjust the update() function like so:

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;
  }
}

That way the paddle is immovable after everything is loaded and prepared, but before the start of the actual game.

You can check the finished code for this lesson in the live demo below, and play with it to understand better how it works:

The last thing we will do in this article series is make the gameplay even more interesting by adding some randomization to the way the ball bounces off the paddle.

• « Previous
• Next »