Javascript Game with Loop For Crashing Browser

Question

I have created a mini-game in my medieval themed game called Teetotum (based of the historical version) and wrote a script for it that causes the browser to go unresponsive. I assume this is because of my Loop For parts not being able to break out of the loop, but I have checked my code again and again and it all seems to be fine, but having new eyes look at it may help.

So, can anyone tell me why the following crashes my browser? And better yet can anyone tell me how to fix it or make it work?

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

Thanks for taking the time to try to help, it's much appreciated! :D

Answer 1

The problem with your code is that the pot is never actually reduced. You have placed all the code that reduces it inside multiple setTimeout calls but they won't be executed until you leave the loop which you will never do because the pot is not reduced!

If you need to use setTimeout for your logic, here's how to write the loop:

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

This way the next iteration will only start after the previous has ended.

Answer 2

If you want your game to continue to run until your potAmount runs out, try using a while() loop.

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