LayaMetaX-PGC 中用TypeScript实现倒计时

在 LayaMetaX-PGC 中使用 TypeScript 实现倒计时的步骤如下：

1. 创建一个倒计时管理器类 CountdownManager。

export default class CountdownManager {
  private static _instance: CountdownManager;
  private _countdowns: Countdown[];

  private constructor() {
    this._countdowns = [];
  }

  public static get instance(): CountdownManager {
    if (!this._instance) {
      this._instance = new CountdownManager();
    }
    return this._instance;
  }

  public addCountdown(countdown: Countdown): void {
    this._countdowns.push(countdown);
  }

  public removeCountdown(countdown: Countdown): void {
    const index = this._countdowns.indexOf(countdown);
    if (index >= 0) {
      this._countdowns.splice(index, 1);
    }
  }

  public update(deltaTime: number): void {
    for (const countdown of this._countdowns) {
      countdown.update(deltaTime);
    }
  }
}

2. 创建一个倒计时类 Countdown。

export default class Countdown {
  private _duration: number; // 倒计时时长，单位秒
  private _elapsedTime: number; // 已经经过的时间，单位秒
  private _onComplete: Function; // 倒计时结束时的回调函数
  private _onUpdate: Function; // 每帧更新时的回调函数

  constructor(duration: number, onComplete: Function, onUpdate?: Function) {
    this._duration = duration;
    this._elapsedTime = 0;
    this._onComplete = onComplete;
    this._onUpdate = onUpdate;
    CountdownManager.instance.addCountdown(this);
  }

  public update(deltaTime: number): void {
    if (this._elapsedTime >= this._duration) {
      this._onComplete();
      this.stop();
      return;
    }
    this._elapsedTime += deltaTime;
    if (this._onUpdate) {
      this._onUpdate(this._elapsedTime / this._duration);
    }
  }

  public stop(): void {
    CountdownManager.instance.removeCountdown(this);
  }
}

3. 在场景中创建一个倒计时显示对象 CountdownText。

export default class CountdownText extends Laya.Label {
  private _countdown: Countdown;

  public startCountdown(duration: number, onComplete: Function, onUpdate?: Function): void {
    this._countdown = new Countdown(duration, onComplete, onUpdate);
  }

  public stopCountdown(): void {
    if (this._countdown) {
      this._countdown.stop();
      this._countdown = null;
    }
  }
}

4. 在场景中创建一个倒计时文本框 CountdownText。

const countdownText = new CountdownText();
countdownText.text = "0:00";
countdownText.fontSize = 20;
countdownText.color = "#ffffff";
countdownText.pos(100, 100);
this.addChild(countdownText);

5. 在场景的 update 方法中更新倒计时管理器。

this.timer.frameLoop(1, this, () => {
  CountdownManager.instance.update(this.timer.delta / 1000);
});

6. 在场景中使用 CountdownText 的 startCountdown 方法开始倒计时。

countdownText.startCountdown(60, () => {
  console.log("倒计时结束");
}, (progress: number) => {
  const minutes = Math.floor((60 - progress * 60) / 60);
  const seconds = Math.floor(60 - progress * 60) % 60;
  countdownText.text = `${minutes}:${seconds.toString().padStart(2, "0")}`;
});

这样就可以在 LayaMetaX-PGC 中使用 TypeScript 实现倒计时了。