Para completar el juego es hora de agregar algunos enemigos. Esto le añadirá un componente de desafío, algo que anteriormente faltaba.

La idea es la siguiente: La primera vez que se recojan todas las estrellas se lanzará una bomba. La bomba rebotará aleatoriamente alrededor de la pantalla y si el personaje choca con ella, muere. Al recoger todas las estrellas, estas aparecerán de nuevo y, si se vuelven a recoger, se lanzará otra bomba. Esto le dará al jugador un desafío: obtener la mayor puntuación posible sin morir.

Lo primero que se necesita es un grupo para las bombas y un par de Colliders:

bombs = this.physics.add.group();

this.physics.add.collider(bombs, platforms);

this.physics.add.collider(player, bombs, hitBomb, null, this);

Las bombas, por supuesto, rebotarán en las plataformas, y cuando contacten con el personaje se ejecutará la función hitBomb. Todo lo que se hará en esta función es detener el juego y pintar al personaje en rojo:

function hitBomb (player, bomb)
{
    this.physics.pause();

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

Hasta ahora, todo bien, pero necesitamos lanzar una bomba. Para ello modificamos la funci├│n collectStar:

function collectStar (player, star)
{
    star.disableBody(true, true);

    score += 10;
    scoreText.setText('Score: ' + score);

    if (stars.countActive(true) === 0)
    {
        stars.children.iterate(function (child) {

            child.enableBody(true, child.x, 0, true, true);

        });

        var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);

        var bomb = bombs.create(x, 16, 'bomb');
        bomb.setBounce(1);
        bomb.setCollideWorldBounds(true);
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);

    }
}

Utilizamos un m├®todo de grupo llamado countActive para saber cu├íntas estrellas quedan. Si no hay ninguna es por que se han recolectado todas, as├¡ que usamos la funci├│n de iteraci├│n para volver a habilitar todas las estrellas y restablecer su posici├│n Y a cero. Esto har├í que todas las estrellas vuelvan a caer desde la parte superior de la pantalla.

La siguiente parte del c├│digo crea una bomba. Primero elegimos una coordenada X aleatoria, siempre en el lado opuesto a donde se encuentra el personaje para darle una oportunidad. Luego se crea la bomba, se indica que no se pueda salir del mundo, que rebota y que tiene una velocidad aleatoria.

El resultado final es un bonito y pequeño sprite bomba que rebota alrededor de la pantalla. ¡Lo suficientemente pequeño para que sea fácil de evitar al principio, pero tan pronto como los puntos se acumulan se vuelven mucho más difíciles!

image

Y nuestro juego está terminado :)

Conclusi├│n

Has aprendido c├│mo crear un sprite con propiedades f├¡sicas, controlar su movimiento y hacerlo interactuar con otros objetos en un mundo peque├▒o. Hay muchas m├ís cosas que puedes hacer para mejorarlo. ┬┐Por qu├® no ampliar el tama├▒o y permitir que la c├ímara se desplace? Tal vez a├▒adir diferentes peligros, o incluir otros elementos para recoger que den puntos diferentes o quiz├ís una barra de salud.

O bien, para un juego de estilo no violento, se podría plantear una carrera contra reloj y el desafío simplemente sería recolectar las estrellas lo más rápido posible.

Con ayuda de lo aprendido en este tutorial y los cientos de ejemplos disponibles, ahora cuentas con una base s├│lida para un proyecto futuro. Pero como siempre, si tienes preguntas, necesitas consejos o deseas compartir en qu├® has estado trabajando, no dudes en pedir ayuda en el foro de Phaser.

Juegos Instantáneos de Facebook

Phaser 3 tiene soporte completo para crear juegos instant├íneos de Facebook. Ahora que ya sabes c├│mo crear un juego en Phaser, ┬┐por qu├® no ver lo f├ícil que es convertirlo en un juego instant├íneo? Getting Started Guide.