Home | Clases | Videojuego avanzado con Phaser | Las trampas

Las trampas


En este capítulo nos centraremos en darle algo de dificultad al juego.

Para ello, utilizaremos la capa de objetos de trampas que habíamos creado de modo que si el jugador las pisa, pierda una vida, y si pierde 3 vidas, se acabe el juego:

  • Detectaremos que el jugador pasa por encima de una trampa (overlap) en el método update y llamaremos al método caidaEnTrampa
  • Declararemos las variable this.vidas y this.movimiento que inicializaremos en create y actualizaremos cuando se pise una trampa en el método caidaEnTrampa.
  • Reproduciremos las animaciones perder o morir y desactivaremos los controles de teclado durante un tiempo o indefinidamente , según el número de vidas que le queden tras llamar al método quitarVida.
  • Modificaremos el archivo index.html para que nos muestre la cantidad de vidas en cada momento.

Empezando por el archivo index.html, su código quedaría como sigue:


<!DOCTYPE html>
<html>
<head>
<title>Juego Phaser</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/phaser.min.js"></script>
<script type="text/javascript" src="js/estadoInicio.js"></script>
<script type="text/javascript" src="js/estadoOpciones.js"></script>
<script type="text/javascript" src="js/estadoJugar.js"></script>
<script type="text/javascript" src="js/estadoSalir.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>Juego Knights</h1>
<h2>Vidas <span id="vidas">2</span></h2>
</body>
</html>


Mientras que en estadoJugar.js debemos realizar las siguientes modificaciones:


preload: function () {

//Resto de código

//Vidas
this.vidas = 2;

//Movimiento
this.movimiento = 1;

},

update: function () {

//Resto de código

//Trampas
juego.physics.arcade.overlap(this.blueKnight, this.trampas, this.caidaEnTrampa, null, this);

//Movimiento (Solo si no está en una trampa)
if (this.movimiento == 1){
this.movimientoBlue();
}

},

caidaEnTrampa: function (knight, trampa) {

//Le obligo a pararse
this.movimiento = 0;
this.blueKnight.body.velocity.x = 0;
//Animación de quitar vida
this.blueKnight.animations.play('vida' + this.direccionBlue);
//Elimino trampa
trampa.kill();
//Quito vida (después de 1 segundo de animación)
juego.time.events.add(Phaser.Timer.SECOND * 1, this.quitarVida, this);

},

quitarVida: function () {

var texto = document.getElementById('vidas');
this.vidas --;
texto.innerHTML = this.vidas;
if (this.vidas >= 0){
//Continuar con una vida menos
this.movimiento = 1;
}
else{
//Morir
this.blueKnight.animations.play('morir' + this.direccionBlue);
}

},
};



Si ahora actualizas el juego, verás que cada vez que caes en una trampa, se reproduce la animación y se te quita una vida.
Fecha de publicación: 15/03/2018
Asignaturas: realización de proyectos multimedia interactivosaplicaciones webmontaje y mantenimiento de equipos
Temas: phaser tiled map editor
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