带有循环崩溃浏览器的 JavaScript 游戏

Question

我在中世纪主题游戏《Teetotum》(基于历史版本)中创建了一个迷你游戏，并为其编写了一个导致浏览器无响应的脚本。我认为这是因为我的 Loop For 部分无法跳出循环，但我一次又一次地检查了我的代码，一切似乎都很好，但重新审视它可能会有所帮助。

那么，谁能告诉我为什么以下内容会导致我的浏览器崩溃？更好的是有人能告诉我如何修复它或使其正常工作吗？

function minigame(game, previous) {
 var minigameDiv = document.getElementById('minigames');
 show('minigames');
 minigameDiv.innerHTML = "<br>";
  if (game == "teetotum") {
   minigameDiv.innerHTML += "Teetotum is a game of chance, commonly played  with 2 or more players. You spin the top, if it falls on 1, then you take 5 Shrill from the pot. If it falls on 2, no action is taken. If it falls on 3, you add 5 Shrill to the pot. Lastly, if it falls on 4, you win the whole pot.<br><br>";
   minigameDiv.innerHTML += "If you would like to play, set the pot below with the amount you want and how many players you want to play with. <br><br><br>"
   minigameDiv.innerHTML += "<select id='potAmount'> <option selected='selected' value='10'>10 Shrill</option> <option value='25'>25 Shrill</option> <option value='50'>50 Shrill</option></select>Pot Amount<br>"
   minigameDiv.innerHTML += "<select id='playerCount'> <option selected='selected' value='2'>2 Players</option> <option value='3'>3 Players</option> <option value='4'>4 Players</option></select>Player Count<br><br>"      
   minigameDiv.innerHTML += "<a class='button' onclick='javascript:Teetotum(\""+previous+"\");'>Confirm Settings & Begin</a> <br> <a class='button' onclick='javascript:show(\""+previous+"\");'>Go Back to the Tavern</a>";
 }
}


function Teetotum(goBack) {
 playerCount = document.getElementById("playerCount").value;
 totalPlayer = 1;
 potAmount = document.getElementById("potAmount").value;
 var minigameDiv = document.getElementById('minigames');
  if (shrillAmount >= potAmount) {
   shrillAmount = shrillAmount - potAmount;
   checkMoney();
    for (; potAmount > 0;) {
     minigameDiv.innerHTML = "You spin the top...";
     var randomNumber = Math.ceil(Math.random() * 4); 
      setTimeout(function() {
        if (randomNumber == 1) {
           potAmount = potAmount - 5;
           shrillAmount = shrillAmount + 5;
           minigameDiv.innerHTML = "It lands on a 1! You take 5 Shrill from the pot. The pot is "+potAmount+"."
        }
        else if (randomNumber == 2) {
           minigameDiv.innerHTML = "It lands on a 2. Nothing happens. The pot is "+potAmount+"."
        }
        else if (randomNumber == 3 && shrillAmount >= 5) {
           potAmount = potAmount + 5;
           shrillAmount = shrillAmount - 5;
           minigameDiv.innerHTML = "It lands on a 3! You lose 5 Shrill into the pot. The pot is "+potAmount+"."
        }
        else if (randomNumber == 4) {
           shrillAmount = shrillAmount + potAmount;
           potAmount = potAmount - potAmount;
           minigameDiv.innerHTML = "It lands on a 4! You win the whole pot."
        }
        if (potAmount > 0) {
           minigameDiv.innerHTML += "<br><br>The next player(s) will now take their turn."
                 setTimeout(function() {
                 for (playerCount = playerCount; playerCount > totalPlayer && potAmount > 0; playerCount--) {
                    minigameDiv.innerHTML = ('Player '+playerCount+' spins the top...');
                    var randomAINumber = Math.ceil(Math.random() * 4);
                       setTimeout(function() {
                       if (randomAINumber == 1) {
                          potAmount = potAmount - 5;
                          minigameDiv.innerHTML = "It lands on a 1. Player "+playerCount+" takes 5 Shrill from the pot. The pot is "+potAmount+"."
                       }
                       else if (randomAINumber == 2) {
                          minigameDiv.innerHTML = "It lands on a 2. Nothing happens. The pot is "+potAmount+"."
                       }
                       else if (randomAINumber == 3) {
                          potAmount = potAmount + 5;
                          minigameDiv.innerHTML = "It lands on a 3. Player "+playerCount+" puts 5 Shrill into the pot. The pot is "+potAmount+"."
                       }
                       else if (randomAINumber == 4) {
                          shrillAmount = shrillAmount + potAmount;
                          potAmount = potAmount - potAmount;
                          minigameDiv.innerHTML = "It lands on a 4! Player "+playerCount+" wins the pot."
                       }
                       if (potAmount <= 0) {
                          minigameDiv.innerHTML += "<br><br>The game is now finished <br><br><br> <a class='button' onclick='javascript:show(\""+previous+"\");'>Go Back to the Tavern</a>"
                       }
                    }, 2000);
                 }
      }, 3000);
        }
        if (potAmount <= 0) {
           minigameDiv.innerHTML += "<br><br>The game is now finished <br><br><br> <a class='button' onclick='javascript:show(\""+previous+"\");'>Go Back to the Tavern</a>"
        }
      }, 3000);
  }
}
else {
  ui.log('You do not have enough Shrill to do that.');
}
} 

感谢您花时间尝试提供帮助，非常感谢! :D

Answer 1

您的代码的问题在于底池从未真正减少。您已将减少它的所有代码放在多个 setTimeout 调用中，但它们不会执行，直到您离开循环，而您永远不会这样做，因为底池没有减少!

如果您需要使用 setTimeout 来实现逻辑，请按以下方式编写循环:

var loopFunction = function() {
        var randomNumber = Math.random() * 4;
        if (randomNumber == 1) {
        }
        ...
        if (potAmount > 0) {
            setTimeout(loopFunction, 3000);
        }
}

这样，下一次迭代只会在上一次迭代结束后开始。