jairogarcíarincón

Las trampas

3.08K
Las trampas
15/03/2018

Contenidos

  1. El entorno y la plantilla
  2. Dibujar el mapa
  3. Los estados
  4. Programar el mapa
  5. El jugador
  6. Las trampas
  7. Las gemas
  8. La plataforma móvil
  9. Los sonidos
  10. Últimos retoques y código completo

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.

Publicado el 05 de Febrero de 2025

phasertiled map editor

Anterior
Siguiente