Botones

Necesitamos una variable para almacenar un valor booleano que represente si el juego se está jugando actualmente o no, y otra para representar a nuestro botón. Añade las siguientes lineas a tu declaración de variables:

var playing = false;
var startButton;

Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función preload():

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

El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.

También se debe tomar el botón de spritesheet de Github, y guardarlo en el directorio /img.

Para añadir el botón al juego usaremos el método add.button. Añade las siguientes lineas del botón a la función 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);

Los parámetros del método button() son los siguientes:

• Las coordenadas x e y del botón.
• El nombre del elemento gráfico que se mostrará en el botón.
• Una función de callback que se ejecutará cuando se presione el botón.
• Una referencia a this para especificar el contexto de ejecución.
• Los marcos que usaremos para los eventos over, out and down.

Ahora necesitamos definir la función startGame() referenciada en el siguiente código:

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

Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable playing a true.

Para terminar con esta sección, vuelve a la función create(), encuentra la linea ball.body.velocity.set(150, -150);, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.

Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aún no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable playing y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función update() así:

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

De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.

Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:

La última cosa que haremos en esta serie de artículos es hacer el juego más interesante añadiendo algo de aleatorización a la forma en la que la pelota rebota con la paleta.

• Anterior
• Siguiente