javascript - 如何在 jQuery 浏览器中安排用户赢得或输掉游戏时播放音频

Question

功能:

音频在游戏主页面和其他页面中播放，因此当用户赢得游戏时，当游戏页面更改为游戏祝贺页面时，会在恢复到主音频之前有游戏获胜通知声音。而当用户输掉游戏时，当游戏页面切换到GameOver页面时，会先有游戏输了的提示音，然后再恢复到主音频。

已完成的工作:

我已成功创建主音频，并且它正在为所有页面播放。

问题:

我无法设置

1.) GameWin 通知声音

2.) GameLost 通知声音

当用户在页面转换期间赢得或输掉游戏时进行游戏。主音频仍在播放。

因此，如何设置在从游戏页面转换到游戏获胜页面或游戏失败页面期间用户赢得或输掉游戏时播放的通知音频。

我已附上代码供细读..请帮助。

function initiateGameTimer() {
  CounterInterval = setInterval(function() {
    counter = counter + 1;
    timer = timer - 1;
    $('#GameTime').html(timer);
    console.log(timer);
    // Gamce condition check when timer =0: position of the star < or > 2308(bottom page limit)
    if (timer == 0) {
      clearInterval(CounterInterval);
      if (x >= 1440) {
        $("#GamePage").hide();
        $("#Congratulations").show();
      } else if (x < 1440) {
        console.log("fail");
        $("#GamePage").hide();
        $("#GameOver").show();
      }
    }
  }, 1000)
}

<div id="GamePage" style="width:1920px; height:3840px; z-index=1;">

  <div id="jquery_jplayer_4" style="position:absolute; z-index:1;"></div>
  <audio src="lib/Elements/happy.mp3" loop autoplay>Your browser does not support this audio format</audio>

</div>

<div id="Congratulations" style="display:none; width:1920px; height:3840px; z-index=2;">
  <div id="jquery_jplayer_5" style="position:absolute; z-index:1;"></div>
  <audio src="lib/Elements/audioCongratulations.mp3" loop autoplay>Your browser does not support this audio format</audio>
</div>

<div id="GameOver" style="display:none; left:0; top:0; width:1920px; height:3840px; z-index=2; ">
  <div id="jquery_jplayer_6" style="position:absolute; z-index:1;"></div>
  <audio src="lib/Elements/audiogameOver.mp3" loop autoplay>Your browser does not support this audio format</audio>
  <input id="OK" type="image" src="lib/Elements/Ok.png" onclick="RevertPage()" />
</div>

Answer 1

已解决。

可以通过以下方式完成:

function initiateGameTimer() {
  CounterInterval = setInterval(function() {
    counter = counter + 1;
    timer = timer - 1;
    $('#GameTime').html(timer);
    console.log(timer);
    // Gamce condition check when timer =0: position of the star < or > 2308(bottom page limit)
    if (timer == 0) {
      clearInterval(CounterInterval);
      if (x >= 1440) {
        var audioWon = document.getElementById("GameWon");
        audioWon.play();
        $("#GamePage").hide();
        $("#Congratulations").show();
      } else if (x < 1440) {
        console.log("fail");
        var audioLose = document.getElementById("GameLose");
        audioLose.play();
        $("#GamePage").hide();
        $("#GameOver").show();
      }
    }
  }, 1000)
}

<div id="Congratulations" style="display:none; width:1920px; height:3840px; z-index=2;">
  <audio id="GameWon" src="lib/Elements/GameCompleted.mp3">Your browser does not support this audio format</audio>
  <div id="jquery_jplayer_5" style="position:absolute; z-index:1;"></div>
</div>

<div id="GameOver" style="display:none; left:0; top:0; width:1920px; height:3840px; z-index=2; ">
  <audio id="GameLose" src="lib/Elements/GameFail.mp3">Your browser does not support this audio format</audio>
  <div id="jquery_jplayer_6" style="position:absolute; z-index:1;"></div>
  <input id="OK" type="image" src="lib/Elements/Ok.png" onclick="RevertPage()" />
</div>

我添加了一个额外的<audio>每个 GameWon 和 GameOver 中的标记，而我设置为每个 <audio> 分配一个变量。标签id并调用方法play()当调用相应的 div id 时播放音频。