PixiJS V5 教學 (32) - 重新開始製作

// 重新開始按鈕繪畫
const resetBtn = new PIXI.Container();
gameOver.addChild(resetBtn);

let gameGraphics = new PIXI.Graphics();
gameGraphics.beginFill(0x33BBFF);
gameGraphics.drawRoundedRect(0, 0, 120, 50, 25);
gameGraphics.endFill();
gameGraphics.x = frames.meta.size.w / 2 - gameGraphics.width / 2;
gameGraphics.y = frames.meta.size.h / 2 - gameGraphics.height / 2 + 60;
resetBtn.addChild(gameGraphics);

const resetText = new PIXI.Text('重新開始', {  // 改用變數傳入
  fontFamily: 'Microsoft JhengHei',
  fontSize: 16,
  fill: [0xFFFFFF],
  align: 'center'
});
resetText.x = frames.meta.size.w / 2 - resetText.width / 2;
resetText.y = frames.meta.size.h / 2 - resetText.height / 2 + 60;
resetBtn.addChild(resetText);

resetBtn.interactive = true;
resetBtn.buttonMode = true;

resetBtn.click = gameReset;

function gameReset() {
  // HP 回復
  gameHP = 100;
  // 玩家回歸初始位置
  explorer.x = 50;
  explorer.y = frames.meta.size.h / 2;
  // 寶箱回歸初始位置
  treasure.x = 400;
  treasure.y = frames.meta.size.h / 2;
  // 重新設置 Container 顯示
  gameRun.visible = true;
  gameStart.visible = false;
  gameOver.visible = false;
}