如何在游戏状态暂停时停止游戏的播放列表并在游戏完成暂停状态时再次播放？ JavaScript 暂停正在恢复

如何解决如何在游戏状态暂停时停止游戏的播放列表并在游戏完成暂停状态时再次播放？ JavaScript 暂停正在恢复

我创建了一个游戏，它在运行时会播放播放列表，当玩家暂停时，游戏会播放音乐氛围主题，播放列表会停止，但我不知道当玩家结束暂停状态时如何重新播放播放列表。 这是游戏状态的对象：

...
const GAMESTATE = {
    PAUSED: 0,RUNNING: 1,MENU: 2,GAMEOVER: 3,NEWLEVEL: 4
  };
...

这些是播放列表中的歌曲：

...
    constructor() {
        this.gameState = GAMESTATE.MENU;
        this.init = document.getElementById('init');
        this.gameState = GAMESTATE.MENU;
        this.pink = document.getElementById('pink');
        this.epic = document.getElementById('epic');
        this.rock = document.getElementById('rock');
        this.jungla = document.getElementById('jungla');
        this.luna = document.getElementById('luna');
        this.shot = document.getElementById('shot');
        this.piano = document.getElementById('piano');
        this.hight = document.getElementById('hight');
        this.bad = document.getElementById('bad');
        this.playList = [this.init,this.pink,this.epic,this.rock,this.jungla,this.luna,this.shot,this.piano,this.hight];
    }
...

注意游戏的初始状态是Menu状态。 我做了一个随机播放列表的函数：

...
    getRandom() {
        return Math.floor(Math.random()*this.playList.length);
        }
...

然后我在每个关卡的开头设置，当一首歌曲完成时，另一首随机开始，以一首固定的歌曲为起点。像这样：

...
    start() {
    if(this.gameState !== GAMESTATE.MENU && this.gameState !== 
    GAMESTATE.NEWLEVEL) return;
    this.gameState = GAMESTATE.RUNNING;
    for(i ; i < this.playList.length; i++) {
                this.playList[i].addEventListener('ended',() => {
                    this.playList[this.getRandom()].play();
                })
        }
    this.playList[0].play();
    }
...

我停止播放列表喜欢这个：

...
    if(this.gameState === GAMESTATE.PAUSED) {
            this.bad.play();
            for(i = 0; i < this.playList.length; i++) {
                if(this.playList[i].play()) {
                    this.playList[i].pause();
                } 
    }
...

我尝试重新启动播放列表：

...
   if(this.gameState === GAMESTATE.RUNNING) {
            this.bad.pause();
            for(i = 0; i < this.playList.length; i++) {
            if(this.playList[i].pause()) {
                    this.playList[i].play();
            }
    }
...

但是这最后一步失败了，我做错了什么？

解决方法

暂停

停止播放列表函数中的 if 语句是调用 play() 函数。您要做的是检查元素以查看它是否正在播放。您可以使用 HTMLMediaElement 的 paused 属性执行此操作。

停止所有声音：（你的循环没有错误，但我个人认为forEach更具可读性。）

this.playList.forEach( el => { 
  if ( ! el.paused ) {
    el.pause();
  }
});

您也可以对所有这些调用 pause()。 docs 状态

如果媒体已经处于暂停状态，则此方法无效。

this.playList.forEach( el => el.pause() );

---

正在恢复

为了从上次中断的地方恢复播放列表，您需要知道上次播放的是哪一首曲目。我不确定您是否可以通过检查元素的属性来解决这个问题，但您绝对可以将这些信息存储在您的类中。

在您的构造函数中，您可以为播放列表中的每个元素添加一个事件侦听器。这会将类的 playingTrack 属性更新为最后播放的元素。

this.playList.forEach( el => el.addEventListener('play',{
  this.playingTrack = el;
}));

现在你的重启函数不需要遍历数组了。它只需要播放那首曲目。

this.playingTrack?.play();

大概在您开始播放第一首曲目之前不会调用此函数，但我使用 optional chaining 运算符只是为了安全。