Javascript游戏与循环崩溃浏览器

Javascript Game with Loop For Crashing Browser

本文关键字:崩溃 浏览器 循环 游戏 Javascript      更新时间:2024-03-31

我在我的中世纪主题游戏中创建了一个名为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

代码的问题是,锅实际上从未减少。您已经将所有减少它的代码放在多个setTimeout调用中,但在您离开循环之前,它们不会被执行,因为锅没有减少!

如果您的逻辑需要使用setTimeout,以下是如何编写循环:

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

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

如果希望游戏继续运行直到potAmount用完,请尝试使用while()循环。

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