javascript - 当 do 循环为真时允许单击按钮

Question

我应我 8 岁 child 的要求创建了一个小 Angular 色扮演游戏，以便学习 javascript 并教她一点。这花了一段时间(对我的代码要温和!)它相当简单，但它通过分配一个随机敌人让你战斗然后进行简单的战斗序列(第 1 轮、第 2 轮、第 3 轮等)，直到你或敌人都死了(在 do while 循环中运行)。

我想做的是让每一轮都由“FIGHT!”激活按钮，前提是您或敌人的生命值 > 0。我已经摆弄过代码，但似乎无法让它在两轮之间等待按下按钮 - 它只是一次通过每一轮(正如我所期望的那样!)。

<h1><b>Halloween RPG Battle</b></h1>
<script>
var enemy = [{
    name: 'Wizard',
    health: 10,
    weapon: 'his staff.',
    damage: 12,
    dodge: 10,
    backpack: 'Cloak of Invisibility.'
  },
  {
    name: 'Elf',
    health: 4,
    weapon: 'a dagger.',
    damage: 6,
    dodge: 8,
    backpack: 'Bow & Arrow.'
  },
  {
    name: 'Dragon',
    health: 20,
    weapon: 'a fireball.',
    damage: 15,
    dodge: 2,
    backpack: ''
  },
  {
    name: 'Goblin',
    health: 12,
    weapon: 'his bow and arrow.',
    damage: 4,
    dodge: 6,
    backpack: 'gold coins.'
  },
  {
    name: 'Dwarf',
    health: 7,
    weapon: 'his axe.',
    damage: 5,
    dodge: 4,
    backpack: 'map'
  },
  {
    name: 'Orc',
    health: 8,
    weapon: 'a sword.',
    damage: 5,
    dodge: 5,
    backpack: 'silver tooth.'
  },
  {
    name: 'Witch',
    health: 6,
    weapon: 'her potion of the undead.',
    damage: 7,
    dodge: 6,
    backpack: 'potion of the living.'
  },
  {
    name: 'Old Lady',
    health: 3,
    weapon: 'her frying pan.',
    damage: 1,
    dodge: 1,
    backpack: 'fruit and vegetables.'
  },
  {
    name: 'Villagers',
    health: 15,
    weapon: 'sharpened sticks.',
    damage: 5,
    dodge: 1,
    backpack: 'meat.'
  },
  {
    name: 'Thief',
    health: 4,
    weapon: 'his fists.',
    damage: 3,
    dodge: 9,
    backpack: 'jewels.'
  }
];

var hero = [{
  name: 'Mary',
  health: 15,
  weapon: 'sword',
  damage: 6,
  dodge: 8,
  backpack: ''
}];


function battle() {
  var x = 1;
  var randomEnemy = enemy[Math.floor(Math.random() * enemy.length)];


  do {
    var enemyDamage = Math.floor((Math.random() * (randomEnemy.damage)) + 1);
    var enemyDodge = Math.floor((Math.random() * (randomEnemy.dodge)) + 1);
    var randomNumber = Math.floor(Math.random() * 4) + 1;
    var heroDodge = [Math.floor(Math.random() * hero[0].dodge)];
    var heroDamage = Math.floor((Math.random() * hero[0].damage) + 1);


    document.write("<br>" + "<b>" + "Round " + x++ + "</b>");
    document.write("<br>" + "The " + randomEnemy.name + " attacks you with " + randomEnemy.weapon);
    if (randomNumber < heroDodge) {
      document.write("<br>" + "You evade the attack!");
    } else if (hero[0].health > 0) {
      hero[0].health = hero[0].health - enemyDamage;
      document.write("<br>" + "The " + randomEnemy.name + " did " + enemyDamage + " damage");
      document.write("<br>" + "You have " + hero[0].health + " health remaining.");
    }
    if (hero[0].health <= 0) {
      document.write("<br>" + "You have been killed by the " + randomEnemy.name);
      break;
    } else {
      document.write("<br>" + "Mary attacks the " + randomEnemy.name + " with her sword.");
    }
    if (randomNumber < enemyDodge) {
      document.write("<br>" + "The " + randomEnemy.name + " evades the attack!");
    } else if (randomEnemy.health > 0) {
      randomEnemy.health = randomEnemy.health - heroDamage;
      document.write("<br>" + "Mary did " + heroDamage + " damage");
      document.write("<br>" + "The " + randomEnemy.name + " has " + randomEnemy.health + " health");
    }
    if (randomEnemy.health <= 0) {
      document.write("<br>" + "The " + randomEnemy.name + " is dead!");
      break;
    } else {
      continue;
    }
  }
  while (hero[0].health > 0 || randomEnemy.health > 0);

}

battle()
</script>

Answer 1

这是我的解决方案。您需要删除 do/while 循环并在您的战斗方法之外设置 randomEnemy。

为了在回合结束后保留​​战斗按钮，我将回合的内容放在“战斗”按钮之前的容器元素中。

const container = document.getElementById("container");


var hero = [{
  name: 'Mary',
  health: 15,
  weapon: 'sword',
  damage: 6,
  dodge: 8,
  backpack: ''
}];

var randomEnemy = null;
var x = 1;

function pickNextEnemy(){
  randomEnemy = enemy[Math.floor(Math.random() * enemy.length)];
}

function battle() {

  if(hero[0].health <= 0 || randomEnemy.health <= 0){
    console.log("can't continue, someone has died");
    return;
  };

  var enemyDamage = Math.floor((Math.random() * (randomEnemy.damage)) + 1);
  var enemyDodge = Math.floor((Math.random() * (randomEnemy.dodge)) + 1);
  var randomNumber = Math.floor(Math.random() * 4) + 1;
  var heroDodge = [Math.floor(Math.random() * hero[0].dodge)];
  var heroDamage = Math.floor((Math.random() * hero[0].damage) + 1);


  container.innerHTML += ("<br>" + "<b>" + "Round " + x++ + "</b>");
  container.innerHTML += ("<br>" + "The " + randomEnemy.name + " attacks you with " + randomEnemy.weapon);
  if (randomNumber < heroDodge) {
    container.innerHTML += ("<br>" + "You evade the attack!");
  } else if (hero[0].health > 0) {
    hero[0].health = hero[0].health - enemyDamage;
    container.innerHTML += ("<br>" + "The " + randomEnemy.name + " did " + enemyDamage + " damage");
    container.innerHTML += ("<br>" + "You have " + hero[0].health + " health remaining.");
  }
  if (hero[0].health <= 0) {
    container.innerHTML += ("<br>" + "You have been killed by the " + randomEnemy.name);
    return;
  } else {
    container.innerHTML += ("<br>" + "Mary attacks the " + randomEnemy.name + " with her sword.");
  }
  if (randomNumber < enemyDodge) {
    container.innerHTML += ("<br>" + "The " + randomEnemy.name + " evades the attack!");
  } else if (randomEnemy.health > 0) {
    randomEnemy.health = randomEnemy.health - heroDamage;
    container.innerHTML += ("<br>" + "Mary did " + heroDamage + " damage");
    container.innerHTML += ("<br>" + "The " + randomEnemy.name + " has " + randomEnemy.health + " health");
  }
  if (randomEnemy.health <= 0) {
    container.innerHTML += ("<br>" + "The " + randomEnemy.name + " is dead!");
  }
}

pickNextEnemy();
battle()
document.getElementById("fight").addEventListener("click", battle);

<div id="container">

</div>
<button id="fight">Fight!</button>

<script>
  var enemy = [{
      name: 'Wizard',
      health: 10,
      weapon: 'his staff.',
      damage: 12,
      dodge: 10,
      backpack: 'Cloak of Invisibility.'
    },
    {
      name: 'Elf',
      health: 4,
      weapon: 'a dagger.',
      damage: 6,
      dodge: 8,
      backpack: 'Bow & Arrow.'
    },
    {
      name: 'Dragon',
      health: 20,
      weapon: 'a fireball.',
      damage: 15,
      dodge: 2,
      backpack: ''
    },
    {
      name: 'Goblin',
      health: 12,
      weapon: 'his bow and arrow.',
      damage: 4,
      dodge: 6,
      backpack: 'gold coins.'
    },
    {
      name: 'Dwarf',
      health: 7,
      weapon: 'his axe.',
      damage: 5,
      dodge: 4,
      backpack: 'map'
    },
    {
      name: 'Orc',
      health: 8,
      weapon: 'a sword.',
      damage: 5,
      dodge: 5,
      backpack: 'silver tooth.'
    },
    {
      name: 'Witch',
      health: 6,
      weapon: 'her potion of the undead.',
      damage: 7,
      dodge: 6,
      backpack: 'potion of the living.'
    },
    {
      name: 'Old Lady',
      health: 3,
      weapon: 'her frying pan.',
      damage: 1,
      dodge: 1,
      backpack: 'fruit and vegetables.'
    },
    {
      name: 'Villagers',
      health: 15,
      weapon: 'sharpened sticks.',
      damage: 5,
      dodge: 1,
      backpack: 'meat.'
    },
    {
      name: 'Thief',
      health: 4,
      weapon: 'his fists.',
      damage: 3,
      dodge: 9,
      backpack: 'jewels.'
    }
  ];
</script>