如何在游戏状态暂停时停止游戏的播放列表并在游戏完成暂停状态时再次播放?JavaScript [英] How to stop a playlist of a game when the game state is pause and play again when the game finish the pause state? JavaScript
问题描述
我创建了一个游戏，它在运行时会播放播放列表，当玩家暂停时，游戏会播放音乐氛围主题，播放列表停止，但我不知道当玩家完成暂停状态时如何重新播放播放列表.这是游戏状态的对象:
<代码>...常量游戏状态 = {暂停:0，运行:1，菜单:2，总比分:3，新级别:4};...这些是播放列表中的歌曲:
<代码>...构造函数(){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,这个.hight];}...请注意，游戏的初始状态是 Menu 状态.我做了一个随机播放列表的函数:
<预><代码>...获取随机(){返回 Math.floor(Math.random()*this.playList.length);}...然后我在每个关卡的开头设置，当一首歌曲结束时，另一首随机开始，以一首固定的歌曲为起点.像这样:
<代码>...开始() {if(this.gameState !== GAMESTATE.MENU && this.gameState !==GAMESTATE.NEWLEVEL) 返回；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() 函数.您想要做的是检查元素以查看它是否正在播放.您可以使用 paused 做到这一点 HTMLMediaElement 的属性.
停止所有声音:(你的循环没有错误，但我个人认为forEach更具可读性.)
this.playList.forEach( el => {如果(！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();大概在您开始播放第一首曲目之前您不会调用此函数，但我使用的是 可选链 操作符只是为了安全.
I created a game that when is running sounds a playlist and when the player pause the game sounds a music ambient theme and the playlist stop but I don't know how to start over the playlist when the player finnish the pause state. This is the Object for the Game State:
...
const GAMESTATE = {
PAUSED: 0,
RUNNING: 1,
MENU: 2,
GAMEOVER: 3,
NEWLEVEL: 4
};
...
Those are the songs on the playlist:
...
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];
}
...
Notice that the initial state of the game is the Menu state. I made a function to randomize the playlist:
...
getRandom() {
return Math.floor(Math.random()*this.playList.length);
}
...
Then I put at the beginning of each level that when a song is finished, another one starts at random, having a fixed song as a starting point. Like this:
...
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();
}
...
I stop the playlist liske this:
...
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();
}
}
...
And I try to restart the playlist with:
...
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();
}
}
...
But this last step fails, what do I do wrong?
Pausing
The if statement in your stop playlist function is calling the play() function. What you want to be doing is checking the element to see if it is playing or not. You can do that with the paused property of the HTMLMediaElement.
To stop all sounds: (your loops are not wrong but personally I find forEach to be a lot more readable.)
this.playList.forEach( el => {
if ( ! el.paused ) {
el.pause();
}
});
You could also just call pause() on all of them. The docs state
if the media is already in a paused state this method will have no effect.
this.playList.forEach( el => el.pause() );
Resuming
In order to resume the playlist from where you left off you need to know which track you were last playing. I'm not sure if you can figure that out by examining properties of the element, but you can definitely store that information in your class.
In your constructor, you can add an event listener to each element in the playlist. This will update the playingTrack property of your class to the last played element.
this.playList.forEach( el => el.addEventListener('play', {
this.playingTrack = el;
}));
Now your restart function doesn't need to loop through the array. It just needs to play that track.
this.playingTrack?.play();
Presumably you won't call this function until after you have started playing the first track, but I am using the optional chaining operator just to be safe.
这篇关于如何在游戏状态暂停时停止游戏的播放列表并在游戏完成暂停状态时再次播放?JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
