Use While Loop With setTimeout

Question

I have making a text-based space rpg game. In the battle system, the player and AI take turns firing at each other. I can't figure out how to make the system loop with a while loop without making the browser crash via infinite loop. Here is my code:

function battle(enemy) {
var battleOver = false;
console.log(enemy.name + " appears!");
//problem loop here.
while(battleOver === false){
console.log("This enemy has " + enemy.health + " health.");
for (var i = 0; i < userWeapons.length; i++) {
    var ibumped = i + 1;
    console.log("Press " + ibumped + " to fire the " + userWeapons[i].name + ".");
}
var weaponChosen;
setTimeout(function() {
    var weaponChoice = prompt("Which weapon do you choose?");
    switch (weaponChoice) {
        case 1:
            weaponChosen = userWeapons[0];
            console.log(userWeapons[0].name + " chosen.");
            break;
        case 2:
            weaponChosen = userWeapons[1];
            console.log(userWeapons[1].name + " chosen.");
            break;
        default:
            weaponChosen = userWeapons[0];
            console.log(userWeapons[0].name + " chosen.");

    };
}, 1000);
setTimeout(function() {
    if (enemy.shields > 0 && weaponChosen.ignoreShield === false) {
        enemy.shields = enemy.shields - weaponChosen.damage;
        weaponChosen.fire(enemy);
        if (enemy.shields < 0) {
            enemy.health = enemy.health + enemy.shields;
            console.log("Enemy shields destroyed and enemy took " + -1 * enemy.shields + " damage!")
        } else {
            console.log("Enemy shields have been reduced to " + enemy.shields + ".");
        }
    } else {
        enemy.health = enemy.health - weaponChosen.damage;
        weaponChosen.fire(enemy);
        console.log("Enemy takes " + weaponChosen.damage + " damage!");
    }
    if (enemy.health <= 0 && battleOver === false) {
        console.log("Enemy destroyed!");
        battleOver = true;
    }
}, 3000);
setTimeout(function() {
    if (enemy.health > 0 && battleOver === false) {
        if (enemy.weapons != null) {
            console.log(enemy.weapons.name + " fired at you.");
            health = health - enemy.weapons.damage;
            console.log("You have " + health + " health left.");
            if (health <= 0) {
                console.log("Game over... You were destroyed");
                battleOver = true;
            }
        } else {
            console.log("The enemy did nothing...");
        }
    };
}, 5000);
}
}

All help is appreciated!

Answer 1

A while loop blocks the whole page until it ends, and as your loop never exits its infinite. You may replace it with a high speed interval:

const loop = setInterval( function(){
   if( battleOver ) return clearInterval(loop);
   console.log("This enemy has " + enemy.health + " health.");
   for (var i = 0; i < userWeapons.length; i++) {
     console.log("Press " + (i + 1) + " to fire the " + userWeapons[i].name + ".");
   }
},10);

Answer 2

I would take that loop out and use a recursive call on the end of the interactions.
Let's say:

function battle(enemy) {
   //All your code here
   if (HeroAlive) {
     battle(enemy);
   }
}

Answer 3

Things start getting very tricky when you use setTimeout . Most games will have a "main game loop" that runs 60 times a second.

Try using a main game loop and cooldowns.

Here's an example of how you could restructure the program.

var timeForOneFrame = 1000/60 // 60 Frames per second
var enemy;
var battleOver;

function initGame() {
    /*
      Initialize the enemy etc.
    */
}

function gameLoop() {
  battle(enemy);
}

function battle(enemy) {

  /*
    Do all the battle stuff, this function is called 60 times a second-
    there's no need for setTimeout!
  */

  // If you want an enemy to only be able to attack every 2 seconds, give them
  // a cooldown...
  if (enemy.cooldown <= 0) {
    // Attack!
    enemy.cooldown += 2000
  } else {
    enemy.cooldown -= timeForOneFrame
  }

  if (enemy.health <= 0 && battleOver === false) {
    console.log("Enemy destroyed!");
    battleOver = true;
    clearInterval(gameLoopInterval)
  }
}

initGame();
var gameLoopInterval = setInterval(gameLoop, timeForOneFrame);