Barra de salud en videojuegos

En este artículo vamos a explicar cómo crear una barra de salud para tus videojuegos con Vanilla JS o JavaScript puro. En los videojuegos, la barra de salud es un elemento visual importante para indicar cuánta vida le queda a un personaje o enemigo. Son esenciales para la retroalimentación visual del jugador y permiten evaluar rápidamente la situación durante la partida.

En este artículo voy a mostrar cómo construir una barra de salud sencilla y funcional con JavaScript, ideal para integrarla en tus videojuegos, con las metodologías explicadas en mis libros. El objetivo es que cada objeto del videojuego (enemigo, jugador, jefe, etc.) tenga encima una barra de salud compuesta por dos partes:

Un rectángulo negro que representa el marco de la barra de salud
Un rectángulo verde que representa la salud actual del jugador. Este rectángulo se acorta al recibir daño y perder salud.

La clase healthBarClass

Para implementar nuestra barra de salud a cualquier objeto de nuestros videojuegos, utilizaremos la clase healthBarClass. Esta clase crea y gestiona una barra de salud para el objeto (obj) pasado en el constructor. Se asume que se trata de un objeto gráfico del videojuego y que tiene una propiedad (health), además de las propiedades visuales como (x, y, width, height, angle, px, py). Veamos el código completo y después lo explicamos con más detalle.

class healthBarClass {
  constructor(obj) {

    // Posición top/bottom de la barra
    let top = (obj.angle == 90) ? obj.height : 0;

    // Barra de fondo (negro)
    this.back = new Graphics.fillRectangle({
      parent: obj,
      x: 0, y: 0,
      width: obj.width,
      height: 4,
      px: 0,
      py: top - 6,
      color: 'black'
    });
    Graphics.moveFollow(this.back);

    // Barra de salud (verde)
    this.front = new Graphics.fillRectangle({
      parent: obj,
      x: 0, y: 0,
      width: obj.width,
      height: 2,
      px: 1,
      py: top - 5,
      color: 'green',
      coef: obj.width / obj.health // coeficiente de ancho por cada punto de vida
    });
    Graphics.moveFollow(this.front);
  }

  // Método para actualizar la barra según la salud del objeto
  update() {
    this.back.update();
    this.front.update();

    // Actualizamos anchura de la barra verde según la salud actual
    this.front.width = this.front.coef * this.front.parent.health - 2;
  }

  // Método para dibujar todas las partes de la barra
  draw() {
    this.back.draw();
    this.front.draw();
  }
}

Barra de salud explicadas

La clase healthBarClass está pensada para integrarse en la metodología de programación de videojuegos con JavaScript explicada en mis libros. Esta clase permite implementar una barra de salud en videojuegos de forma dinámica, utilizando varias funciones de la librería gráfica, pero vamos a explicar todo lo que sucede en cada método.

constructor(obj)

Para integrar una barra de salud a cualquier objeto en nuestros videojuegos, lo haremos mediante una nueva instancia. El constructor recibe el objeto (obj) al que queremos asociar la barra de salud y se vincula a él de la siguiente manera:

top: Primero se calcula si la barra debe ir arriba o abajo del objeto. Para ello establece en (top) la altura a la que irá la barra (top = 0 o top = obj.height), dependiendo del ángulo del objeto (enemigos que miran hacia abajo o hacia arriba), puedes mirar el artículo Movimiento en videojuegos para más información.

this.back: Es un rectángulo negro creado con la librería gráfica que actúa como marco de fondo. Tiene una altura de 4 píxeles y se coloca ligeramente por encima del objeto.

this.front: Es un rectángulo verde creado con la librería gráfica que representa la salud actual de (obj). Esta barra se coloca encima del rectángulo de fondo y hacemos que sea 1 píxels mas estrecha. Como detalles particulares de ambas barras podemos destacar las siguientes propiedades:

parent: Vínculo con (obj), se utiliza para mantener la posición con respecto a él.
width: Ancho de la barra, lo hacemos coincidir con el ancho de (obj).
px, py: Posición «relativa» a la posición (x, y) de (obj). La barra se coloca a una distancia (px, py) respecto a la posición (x, y) de (obj).
coef: Esta barra cambia de tamaño, de modo que su ancho debe ser proporcional a la vida del objeto. Para ello calculamos su proporción (coef = obj.width / obj.health) que se actualizará en cada frame mostrando el ancho según la salud restante. Es importante realizar este cáculo una primera vez y con la salud al 100% para que la barra funcione correctamente.

moveFollow(): Es un tipo de movimiento creado mediante la librería gráfica para el método update() de las barras. En este caso el movimiento es el siguiente:

this.x = this.parent.x + this.px;
this.y = this.parent.y + this.py;

Con esto, hacemos que nuestra barra de salud se situe siempre a la misma distancia de (obj) al que hemos vinculado con (parent), aunque este se mueva por cualquier parte de nuestros videojuegos.

Método update()

El método update() actualiza las posiciones de las barras junto a (parent) y recalcula el ancho de la barra verde basándose en la salud actual. Gracias al coeficiente (coef) obtenido en el constructor, se garantiza que la barra se acorte proporcionalmente a medida que el objeto pierde salud.

Método draw()

Este método es el encargado de dibujar las barras en el orden correcto (fondo → verde). El método draw(), creado automáticamente por la librería gráfica, es el encargado de dibujar cada rectángulo. Puedes mirar el artículo Rectángulos en HTML5 Canvas para más información.

Cómo usar la barra de salud en videojuegos

Una vez implementada la clase healthBarClass, usar la barra de salud en tus videojuegos es realmente sencillo. Supongamos que tienes un enemigo con esta estructura, la forma de añadirle la barra de salud sería de la siguiente manera:

let enemy = {
  x: 100, y: 200, width: 40, height: 40,
  angle: 0, health: 10
};

enemy.healthBar = new healthBarClass(enemy);

Ahora nuestro enemigo tiene la barra de salud integrada en su propiedad healthBar. En cada frame de nuestros videojuegos, simplemente debemos actualizar y mostrar la barra de salud del enemigo con estas dos instrucciones respectivamente:

enemy.healthBar.update();
enemy.healthBar.draw();

Cuando el enemigo recibe daño simplemente se lo restamos a su salud de la forma habitual:

enemy.health -= damage;

De esta forma, la clase healthBarClass, al estar vinculada al enemigo, automáticamente recalcula los tamaños y verás que la barra verde se reduce.