How to make progressbar of health on Phaser?

Phaser 3
1

I am making a health bar.
ProgressBar
So far on HTML5. Here is the code:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
</head>

<body>

<canvas id="canvas"></canvas>
 <script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var tkHP = 70;
var mHP = 70;

setInterval(function(){
  var hp = Math.floor(tkHP / mHP * 100);
  ctx.clearRect(0,0,300,150);
  ctx.beginPath();
  ctx.rect(0, 0, 100, 5);
  ctx.fillStyle = "black";
  ctx.fill();
  ctx.closePath();
  ctx.beginPath();
  ctx.rect(0, 0, hp, 5);
  ctx.fillStyle = "red";
  ctx.strokeStyle = "black";

  ctx.fill();
  ctx.stroke();
  ctx.closePath();
  if(tkHP>0)
  {
    tkHP--;
  }
  else
  {
    tkHP = 70;
  }

},33)
</script>
</body>

</html>

How to make on Phaser?

1 Like
2
1 Like