将While循环与setTimeout一起使用

Question

我正在制作一个基于文本的太空rpg游戏。 在战斗系统中，玩家和AI交替射击。 我无法弄清楚如何通过while循环使系统循环而不会导致浏览器通过无限循环崩溃。 这是我的代码：

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

感谢所有帮助！

Answer 1

while循环会阻塞整个页面，直到它结束为止，并且因为您的循环永远不会退出它的无限。 您可以将其替换为高速间隔：

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

我将退出该循环，并在交互结束时使用递归调用。
比方说：

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

Answer 3

当您使用setTimeout时，事情开始变得非常棘手。 大多数游戏将具有每秒运行60次的“主游戏循环”。

尝试使用主游戏循环和冷却时间。

这是如何重组程序的示例。

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