Unos retoques para finalizar el juego… ¡canvas tercera parte!

Vamos a rematar nuestro R-Type de Hacendado en el canvas de html. Nos quedamos aquí:

Y, como siempre, el repo ya con el juego finalizado, con las cositas que veremos a continuación:

https://github.com/entorno5/canvas-game/

Vamos a hacer estas cositas para dar por finalizado el juego:

  • Colisiones entre los enemigos y la nave: hasta ahora solo mirábamos si nuestros disparos mataban enemigos, pero eramos inmortales.
  • Gestionaremos el número de vidas, apoyándonos en ese control de colisiones del punto anterior.
  • Como último punto, para rematar este proceso, reiniciaremos el juego cuando se nos acaben las vidas, el GAME OVER de toda la vida.

Primero, las colisiones. En la función draw, creamos un bucle similar al que teníamos, donde reutilizamos la función colision, pero pasándole la nave y cada uno de los enemigos. Si hay colisión, el enemigo muere y restamos una vida:

    function draw() {
      // Verificar colisiones entre enemigos y nave
      for (let j = 0; j < enemigos.length; j++) {
        if (colision(nave, enemigos[j])) {
          // Eliminar el enemigo
          enemigos.splice(j, 1);
          // Restar una vida
          vidas--;
          break;
        }
      }

      // Verificar colisiones entre balas y enemigos

¿Fácil, no? No hemos tenido que pensar mucho, es la misma lógica que teníamos antes, pero aplicada a la nave. Pero aún somos inmortales, porque aunque ya estamos restando vidas… no pasa nada si llegamos a quedarnos sin ellas. ¿Qué hacemos? Pues vamos a comprobar si vidas llega a cero:

    function dibujarInfo() {
      if (vidas === 0) {
        gameStarted = false;
        startContainer.style.display = 'flex';
        sound.pause();
        sound.currentTime = 0;
        vidas = 3;
        puntuacion = 0;
        balas = [];
        enemigos = [];
        nave.x = 50;
        nave.y = 50;
        gameOverContainer.style.display = 'flex';
      }
      infoVidas.textContent = vidas;
      infoPuntuacion.textContent = puntuacion;
    }

Como podéis ver, básicamente reseteo todos los valores que han ido cambiando según avanzaba la partida. He creado una div específica para el Game Over, que es la que gestiono aquí para que, además de volver a tener el botón de Start, me salga el temido mensaje que indica el fracaso de nuestra misión.

    <div id="start-container">
      <div id="gameOver-container" style="display: none; color: white; font-size: 24px;">
        Game Over
      </div>
      <button id="startButton">START</button>
    </div>

Y ya está. Lo más básico del mundo, sí, pero la base para que te flipes y metas lo que quieras para ampliar las funcionalidades del juego. He aquí unas ideas:

  • Nivel de dificultad: haz que se pueda seleccionar un nivel de dificultad al empezar la partida, y cambia las velocidades y número de enemigos en función del nivel seleccionado.
  • Más enemigos: píllate unos sprites de R-Type por internet y mete nuevas clases de enemigos, con nuevas capacidades (por ejemplo, cambiar su tipo de movimiento y disparo). Ya sabes gestionar colisiones, así que no tienes disculpa.
  • Fondo en movimiento: pon un fondo que se desplace de derecha a izquierda, para aumentar la sensación de avance.
  • Enemigo final: haz un enemigo especialmente difícil, y ponlo al final del juego. Puedes hacerlo por tiempo (con un setTimeOut), cuando se llegue a una determinada puntuación…
  • Nuevas armas: si has jugado a este tipo de juegos, sabes que siempre existe la posibilidad de mejorar tu armamento. Fácil: mete un sprite que salga en un determinado momento (al igual que el enemigo final), gestiona su colisión, y mejora el disparo de tu nave si hay contacto (que pueda matar varios enemigos, que dispare en varias direcciones,…).
  • Puntuación máxima: mete en el localstorage la puntuación obtenida, y vete guardándola si supera la anterior. Muéstrala en pantalla, pícate un poco 😉

Aquí está el juego actualizado, ya con gestión de vidas:

Y se pueden hacer muuuchas más cosas, pero como no vamos a vender el juego, pues ya estaría. La idea de esta serie de publicaciones era mostrar el potencial del canvas, y creo que lo hemos conseguido.

¡Hasta la semana que viene!

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *