Stacking Healthbar Thingy

00-stacking-healthbar-thingy.md

p5 sketch

stacking-healthbar-thingy.js

function setup() {
  createCanvas(220, 60);
  frameRate(30);
}

let stackFactor = 25;
let hpMax = 250;
let hp = 0;
let delay = 0;
let colors = ["yellow", "red", "orange"];

function draw() {
  background(220);

  updateHp();

  noStroke();

  fill("black");
  rect(8, 8, 204, 24);

  const cycleA = Math.ceil(hp / stackFactor);
  const cycleB = Math.floor(hp / stackFactor);

  if (Math.floor(hp / stackFactor) > 0) {
    fill(colors[cycleB % 3]);
    rect(10, 10, 200, 20);
  }

  textSize(14);
  fill(colors[cycleA % 3]);
  rect(10, 10, 200 * ((hp % stackFactor) / (stackFactor % hpMax)), 20);

  stroke("black");
  fill("white");
  text(`x${Math.ceil(hp / stackFactor)}`, 12, 24);

  text(`Total HP: ${hp} / ${hpMax}`, 10, 46);
}

function updateHp() {
  if (hp <= 0) {
    if (delay > 0) {
      delay--;
    } else {
      hp = hpMax;
      delay = 10;
    }
  } else {
    hp--;
  }
}