class Example extends Phaser.Scene {

  preload() {}

​

  create() {

    // HUD

    this.hudContainer = this.add.container(0, 0);

​

    // Barre de vie

    this.healthBarContainer = this.add.container(20, 20);

    this.healthBarBg = this.add

      .graphics()

      .fillStyle(0x666666)

      .lineStyle(2, 0xffffff)

      .fillRect(0, 0, 200, 20)

      .strokeRect(0, 0, 200, 20);

    //.fillRoundedRect(0, 0, 200, 20, 10)

    //.strokeRoundedRect(0, 0, 200, 20);

    this.healthBar = this.add

      .graphics()

      .fillStyle(0xff0000)

      .fillRect(1, 1, 160, 18);

    // .fillRoundedRect(1, 1, 160, 18, 10);

    this.healthBarLabel = this.add.text(9, 3, "PV");

    this.healthBarContainer.add([

      this.healthBarBg,

      this.healthBar,

      this.healthBarLabel

    ]);

    this.hudContainer.add(this.healthBarContainer);

​

    // Score

    this.scoreText = this.add

      .text(config.width - 20, 20, "Score: 420")

      .setOrigin(1, 0);

    this.hudContainer.add(this.scoreText);

​

    // Minuterie

    this.timerDuration = 12;

    this.remainingTime = this.timerDuration;

    this.timerText = this.add

      .text(config.width / 2, 20, formatTime(this.timerDuration))

      .setOrigin(0.5, 0);

    this.hudContainer.add(this.timerText);

  }

​

  // La variable time est le temps écoulé en ms depuis le début du jeu.

  // La variable delta est le temps écoulé entre deux appels successifs d'update ( ~0.017ms ).

  //    Si le jeu roule à 60fps, delta vaut (1s / 60fps = 0.01666 ms).

  update(time, delta) {

    let elapsedSeconds = Math.floor(time / 1000);

​

    // Barre de vie

    let healthWidth = 198 * ((Math.sin(time / 500) + 1) / 2); // Oscille entre 120 et 200

    this.healthBar.clear();

    this.healthBar.fillStyle(0xff0000).fillRect(1, 1, healthWidth, 18);

​

    // Score

    this.scoreText.setText(`Score: ${Math.floor(time / 100)}`);

​

    // Tic toc

    if (this.remainingTime > 0) {

      this.remainingTime = this.timerDuration - elapsedSeconds;

      this.timerText.setText(formatTime(this.remainingTime));

    } else {

      console.log("Plus de temps !");

    }

  }

}

​

const config = {

  type: Phaser.AUTO,

  transparent: true,

  width: 800,

  height: 800,

  scene: Example

};

​

const game = new Phaser.Game(config);

​

function formatTime(seconds) {

  let minutes = Math.floor(seconds / 60);

  let remainingSeconds = seconds % 60;

  return `${minutes

    .toString()

    .padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;

}

​