jairogarcíarincón

Las gemas

3.22K

15/03/2018

Contenidos

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 :-)

Publicado el 29 de Junio de 2025

phasertiled map editor