Este es el paso 15 de 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson15.html.

En lugar de comenzar el juego de inmediato, podemos dejar la decisión en el jugador añadiendo un botón de Inicio que pueda pulsar. Vamos a investigar cómo hacerlo.

Variables nuevas

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;

Cargando el botón de spritesheet

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.

Añadiendo el botón al juego

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.

Nota: El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.

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.

Mantener la paleta inmóvil antes de que comience el juego

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.

Compara tu código

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

Siguientes pasos

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.

Etiquetas y colaboradores del documento

Colaboradores en esta página: carlosgocereceda, serarroy
Última actualización por: carlosgocereceda,