Question

我在我的中世纪主题游戏Teetotum（基于历史版本）中创建了一个迷你游戏，并为其编写了一个脚本，导致浏览器无响应。我认为这是因为我的循环部件无法突破循环，但我一次又一次地检查了我的代码，这一切看起来都没问题，但是看看它可能会有所帮助。

那么，有谁能告诉我为什么以下崩溃我的浏览器？更好的是，任何人都可以告诉我如何解决它或使其工作？

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);
        }
}

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

Answer 2

如果您希望自己的游戏在potAmount用尽之前继续运行，请尝试使用while()循环。

while(potAmount > 0){
    //your code here
}

用于崩溃浏览器的循环的Javascript游戏

2 个答案: