Cómo crear tu primer juego con Phaser

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!

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.

← Previous