Home | Clases | Videojuego avanzado con Phaser | Las gemas

Las gemas


Como adelantábamos antes, el objetivo del juego iba a ser recoger una serie de gemas que nos fueran dando potencia para llegar a las plataformas más altas y recoger todas las gemas.

Para ello realizaremos las siguientes acciones:

  • Detectaremos que el jugador pasa por encima de una gema (overlap) en el método update y llamaremos al método recogerGema
  • Contabilizar las gemas recogidas mediante el contador this.gemasRecogidas que incializaremos en el método preload y modificando el método recogerGema para que actualice dicho contador.
  • Convertiremos la potencia de salto en una variable llamada this.potencia que inicializaremos en create e incrementaremos cuando se recoja una gema en el método recogerGema.
  • Modificaremos el método movimientoBlue para que use la variable this.potencia.
  • Crearemos el método ganar para que se ejecute al recoger todas las gemas.
  • Modificaremos el archivo index.html para que nos muestre el valor de la variable potencia y la cantidad de gemas restantes 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>Potencia <span id="potencia">150</span></h2>
<h2>Gemas <span id="gemas">15</span></h2>
<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

//Potencia
this.potencia = -150;

//Cantidad
this.gemasRecogidas = 0;

},

update: function () {

//Resto de código

//Gemas
juego.physics.arcade.overlap(this.blueKnight, this.gemas, this.recogerGema, null, this);

//Ganar
if (this.gemasRecogidas == 15) {
this.ganar();
}

},

movimientoBlue: function () {

//Resto de código

//Saltar
if (this.cursoresBlue.up.isDown && this.colisionSuelo && !this.colisionParedes){

this.blueKnight.animations.play('saltar'+this.direccionBlue);
this.blueKnight.body.velocity.y = this.potencia;

}

//Resto de código

},

recogerGema: function (knight, gema) {

gema.kill();
this.potencia -= 25;
this.gemasRecogidas++;
var texto = document.getElementById('potencia');
texto.innerHTML = -this.potencia;
var texto = document.getElementById('gemas');
texto.innerHTML = 15 - this.gemasRecogidas;

},

ganar: function () {

//Le obligo a pararse
this.movimiento = 0;
this.blueKnight.body.velocity.x = 0;
//Animación de ganar
this.blueKnight.animations.play('ganar' + this.direccionBlue);

},

};


Si ahora actualizas el juego, verás que cada vez que recoges una gema, se actualiza el contador de potencia y además saltas más alto. Intenta capturar todas antes de continuar :-)


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