如何延迟警报并重新加载以便音频文件可以在 javascript 中播放？

Question

我正在制作一个小游戏，以便更好地尝试和学习 javascript。目前为止我觉得还不错。当怪物开枪以及子弹击中玩家时会发出声音。但是，当玩家输掉游戏或赢得游戏时，我无法让它播放声音。我通过自己播放来检查以确保音频文件没有问题。以下是输赢函数：

function gameReset(){ //If the player has lost
            if(lives < 0){
                 gameOverSound = new Audio("gameOver.wav"); 
                 gameOverSound.play();
                 alert("You lost. Click 'Ok' to restart the game");
                 location.reload();  
            }
        }

    function winCondition(){ //If the player has won
            if(monsterHP < 0){
                 monsterDeathSound = new Audio("explosion.mp3"); //Assigns the monster's death sound
                 monsterDeathSound.play();
                 alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
                 location.reload();
                }
            }

我试过使用 setTimeout(,) 并将警报和重新加载放在一个单独的函数中然后调用它，但它没有用，尽管我可能做错了。我需要一个大概 3 秒的小延迟。提前致谢。 Edit:I 已实施 .onended。我有一个更新游戏的 setInterval。当 2 个条件起作用时（win/lose），该函数在停止之前多次 运行。如果我将它从更新函数中注释掉，则赢和输函数根本不会 运行。所以我需要让这两个功能只 运行 一次。我尝试制作一个变量并将其设置为 false 然后在函数中将其设置为 true 所以它不能再次 运行 但那没有用。

function winCondition(){ //If the player has won
            if(monsterHP < 0){
                 monsterDeathSound = new Audio("explosion.mp3"); //Assigns the monster's death sound
                console.log("d");
                 monsterDeathSound.play();
                monsterDeathSound.onended = function() {
      alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
      location.reload();
                }
                //alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
                 //location.reload();
                }
            }

    function update(){
        drawEverything();
        collision();
        movement();
        //gameReset();
        playerAttack();
        //winCondition();
    }
    setInterval(update,1000/framesPerSecond)

Answer 1

如果浏览器正在尝试加载文件，您是否尝试使用浏览器开发人员工具进行搜索？

你试过这个吗 setTimeout(function(){ alert("You lost. Click 'Ok' to restart the game"); location.reload();},500);

Answer 2

如果您想在播放声音和提醒之间添加延迟，可以通过两种方式实现：

Note that .play()ing a sound is asynchronous: the code will inmediately keep executing even if the audio hasn't started playing yet, that's why you need to either wait for the sound to end (recommended, in my opinion), or use setTimeout

onended 音频事件

var lives = -1;
var monsterHP = -1;

function gameReset() { //If the player has lost
  if (lives < 0) {
    gameOverSound = new Audio('https://soundbible.com/grab.php?id=2167&type=mp3');
    gameOverSound.play();
    gameOverSound.onended = function() {
      alert("You lost. Click 'Ok' to restart the game");
      location.reload();
    }
  }
}

function winCondition() { //If the player has won
  if (monsterHP < 0) {
    monsterDeathSound = new Audio('https://soundbible.com/grab.php?id=2182&type=mp3'); //Assigns the monster's death sound
    monsterDeathSound.play();
    monsterDeathSound.onended = function() {
      alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
      location.reload();
    }
  }
}

<button onclick="gameReset()">reset</button>
<button onclick="winCondition()">win</button>

setTimeout 函数

var lives = -1;
var monsterHP = -1;

function gameReset() { //If the player has lost
  if (lives < 0) {
    gameOverSound = new Audio('https://soundbible.com/grab.php?id=2167&type=mp3');
    gameOverSound.play();
    setTimeout(function() {
      alert("You lost. Click 'Ok' to restart the game");
      location.reload();
    }, 3000);
  }
}

function winCondition() { //If the player has won
  if (monsterHP < 0) {
    monsterDeathSound = new Audio('https://soundbible.com/grab.php?id=2182&type=mp3'); //Assigns the monster's death sound
    monsterDeathSound.play();
    setTimeout(function() {
      alert("Congratulations you beat the monster! Hit 'OK' to restart the game.");
      location.reload();
    }, 3000);
  }
}

<button onclick="gameReset()">reset</button>
<button onclick="winCondition()">win</button>