Home | Clases | Videojuego sencillo con Phaser | El propósito

El propósito


Es el momento de darlo un propósito a nuestro juego, que será recoger una serie de estrellas para conseguir puntos.

Las estrellas

Para crear las estrellas, crearemos un grupo y utilizaremos un bucle for() al final del método create() para que se genere una estrella cada 70px en todo el ancho del videojuego. Además, dichas estrellas empezarán en y = 0 e irán cayendo hacia abajo hasta chocarse o depositarse en una plataforma (viga o suelo).

Añade las siguiente variables al principio de script.js (en el área de declaración de variables) y modifica el método create() con el siguiente código:


//Declaración de variables
var estrellas, contador, textoContador; //Para las estrellas y el contador

/* Resto de código */

//Aquí iniciamos diferentes componentes del juego y lo arrancamos
function create() {

/* Resto de código */

//Creo un grupo para las estrellas
estrellas = juego.add.group();

//Habilito la física para cualquier elemento del grupo
estrellas.enableBody = true;

//Creo 12 estrellas desde el cielo (x = 0= separadas 70px entre ellas
for (var i = 0; i < 12; i++) {

//Estrella individual
var estrella = estrellas.create(i * 70, 0, 'estrella');

//Le doy gravedad para que caiga
estrella.body.gravity.y = 300;

//Le doy un rebote aleatorio para que no sean todas iguales
estrella.body.bounce.y = 0.3 + Math.random() * 0.2;
}

}


Si ahora ejecutamos el juego, deberían caer 12 estrellas desde "el cielo" que irán rebotando hasta depositarse en las plataformas:

Fuente: http://phaser.io


El contador

Como hemos dicho, la idea es recoger estrellas para obtener puntos. Para ello, necesitamos realizar 3 acciones:

  • Iniciar un contador y mostrarlo
  • Detectar que el jugador ha conseguido una estrella (pasando por encima de ella)
  • Actualizar el contador


Como ya declaramos antes las variables contador y textoContador al principio de script.js para conseguir la primera acción solo debemos iniciar y mostrar el contador añadiendo el siguiente código al final del método create():


///Aquí iniciamos diferentes componentes del juego y lo arrancamos
function create() {

/* Resto de código */

//Inicio el contador y lo muestro como texto
contador = 0;
textoContador = juego.add.text(16, 16, 'Puntos: 0', { fontSize: '32px', fill: '#000' });

}


La segunda y tercera acción la realizaremos añadiendo en el método update() la detección de solapamiento (overlap) entre la estrella y el jugador de modo que eso llame a una función que llamaremos cogerEstrella() que borrará dicha estrella del juego y actualizará el contador sumando 10 puntos cada vez que recoja una estrella:


//Aquí añadimos lo que debe ir actualizándose a medida que transcurre el videojuego
function update() {

/* Resto de código */

//Recoger estrella (comprobando el solapado entre la estrella y el jugador y llamando a la función recogerEstrella)
juego.physics.arcade.overlap(jugador, estrellas, recogerEstrella, null, this);

}

//Borrar estrella y actualizar contador
function recogerEstrella(jugador, estrella) {

//Borro la estrella de la panatalla
estrella.kill();

//Incremento el contador y actualizo la visualización
contador += 10;
textoContador.text = 'Puntos: ' + contador;

}


El resultado final del juego debería ser similar al siguiente:

Fuente: http://phaser.io

Fecha de publicación: 01/02/2018
Asignaturas: realización de proyectos multimedia interactivosmontaje y mantenimiento de equipos
Temas: phaser video sonido para videojuegos
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos