const app = new PIXI.Application({
  view: document.getElementById('main'),
  width: 500,
  height: 500,
  antialias: true,
  transparent: false,
  backgroundColor: 0x00CC99,
});

const container = new PIXI.Container();
app.stage.addChild(container);

let graphics = new PIXI.Graphics();
graphics.beginFill(0x000000);
graphics.drawRoundedRect(0, 0, 300, 50, 20);
graphics.endFill();
container.addChild(graphics);


let nowHp = 300;
let graphics2 = new PIXI.Graphics();
graphics2.beginFill(0xFF0000);
graphics2.drawRoundedRect(0, 0, nowHp, 50, 20);
graphics2.endFill();
container.addChild(graphics2);

container.hpStatus = graphics2;

container.x = 100;
container.y = 200;

let HpText = new PIXI.Text(`300/300`, {
  fontFamily: 'Microsoft JhengHei',
  fontSize: 16,
  fill: [0xFFFFFF],
  align: 'center'
});
HpText.x = 120;
HpText.y = 15;
container.addChild(HpText);
console.log();



app.ticker.add((delta) => {
  container.hpStatus.width = nowHp -= 1;
  HpText.text = `${nowHp}/300`;
  if (nowHp === 0) {
    nowHp = 300;
  }
});