Question

我在我8岁的要求下创建了一个小RPG，以便学习JavaScript并教给她一些知识。这花了一段时间（对我的代码要温柔！），这很简单，但是通过分配一个随机敌人供您战斗，然后执行简单的战斗序列（第1轮，第2轮，第3轮等）就足够了。您或敌人已死（在do while循环中运行）。

我想做的是让每一轮都通过“战斗！”来激活。按钮，前提是您或敌人的生命值大于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

我的主要修改是将文本推送到数组中，并在发生某些情况时显示该数组加载后切勿使用document.write-它会擦除页面和脚本

还添加了一个加载事件处理程序和一个重置

function show() {
  document.getElementById("action").innerHTML = text.join("");
  if (hero[0].health <= 0) {
    if (confirm("Reset?")) {
      reset();
    }
  }
}
var enemy,hero;

function reset() {
  document.getElementById("action").innerHTML = "Ready for battle!!!";

  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.'
    }
  ];

  hero = [{
    name: 'Mary',
    health: 15,
    weapon: 'sword',
    damage: 6,
    dodge: 8,
    backpack: ''
  }];
}
var text = [];

function battle() {
  var x = 1;
  var randomEnemy = enemy[Math.floor(Math.random() * enemy.length)];

  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);
  text = []; // reset;
  text.push("<br>" + "<b>" + "Round " + x++ + "</b>");
  text.push("<br>" + "The " + randomEnemy.name + " attacks you with " + randomEnemy.weapon);
  if (randomNumber < heroDodge) {
    text.push("<br>" + "You evade the attack!");
  } else if (hero[0].health > 0) {
    hero[0].health = hero[0].health - enemyDamage;
    text.push("<br>" + "The " + randomEnemy.name + " did " + enemyDamage + " damage");
    text.push("<br>" + "You have " + hero[0].health + " health remaining.");
  }
  if (hero[0].health <= 0) {
    text.push("<br>" + "You have been killed by the " + randomEnemy.name);
    show();
    return
  } else {
    text.push("<br>" + "Mary attacks the " + randomEnemy.name + " with her sword.");
  }
  if (randomNumber < enemyDodge) {
    text.push("<br>" + "The " + randomEnemy.name + " evades the attack!");
  } else if (randomEnemy.health > 0) {
    randomEnemy.health = randomEnemy.health - heroDamage;
    text.push("<br>" + "Mary did " + heroDamage + " damage");
    text.push("<br>" + "The " + randomEnemy.name + " has " + randomEnemy.health + " health");
  }
  show();
}


window.addEventListener("load",function() {
  reset();
  document.getElementById("fight").addEventListener("click", battle);
});

<h1><b>Halloween RPG Battle</b></h1>
<button type="button" id="fight">FIGHT</button>
<div id="action"></div>

Answer 2

这是我的解决方案。您需要删除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>

Answer 3

答案是根本不使用循环，而是让您的battle函数仅运行逻辑游戏循环的一次迭代。战斗结束后，您可以通过设置其disabled属性true来禁用“战斗”按钮。

下面的代码片段预期您最终将希望添加除Mary之外的其他英雄，并且您也希望随机选择这些英雄。我觉得如果列表具有复数名称，则读起来会更好，因此我将“敌人”重命名为“敌人”，将“英雄”重命名为“英雄”。这样，新变量“英雄”可以引用活动英雄。另外，我使用Object.create从这些列表中复制了对象，而不是直接更改这些对象上的值。这样，您就可以始终重置为原始值。

希望您和您8岁的孩子在一起工作愉快！车轮在为我转动。您可以为不同的敌人添加图像，并在重置时加载它们。有无穷的可能性。享受吧！

var enemies = [{
    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 heroes = [{
  name: 'Mary',
  health: 15,
  weapon: 'sword',
  damage: 6,
  dodge: 8,
  backpack: ''
}];

function getRandomElement(list) {
  return Object.create(list[Math.floor(Math.random() * list.length)]);
}

function getRandomEnemy() {
  return getRandomElement(enemies);
}

function getRandomHero() {
  return getRandomElement(heroes);
}

var x, randomEnemy, hero;

var output = document.getElementById("output");

var fightBtn = document.getElementById("fight");
var resetBtn = document.getElementById("reset");

fightBtn.addEventListener("click", battle);

function reset() {
  x = 1;
  randomEnemy = getRandomEnemy();
  fightBtn.disabled = false; 
  hero = getRandomHero();
  output.innerHTML = "";
}

resetBtn.addEventListener("click", reset);

reset();

function battle() { 
  if (hero.health <= 0 || randomEnemy.health <= 0) {
    fightBtn.disabled = true;
    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.dodge)];
  var heroDamage = Math.floor((Math.random() * hero.damage) + 1);

  output.innerHTML += "<br>" + "<b>" + "Round " + x++ + "</b>";
  output.innerHTML += "<br>" + "The " + randomEnemy.name + " attacks you with " + randomEnemy.weapon;
    
  if (randomNumber < heroDodge) {
    output.innerHTML += "<br>" + "You evade the attack!";
  } else if (hero.health > 0) {
    hero.health = hero.health - enemyDamage;
    if (hero.health < 0)
      hero.health = 0;
    output.innerHTML += "<br>" + "The " + randomEnemy.name + " did " + enemyDamage + " damage";
    output.innerHTML += "<br>" + "You have " + hero.health + " health remaining.";
  }
    
  if (hero.health <= 0) {
    output.innerHTML += "<br>" + "You have been killed by the " + randomEnemy.name;
    fightBtn.disabled = true;
    return;
  } else {
    output.innerHTML += "<br>" + hero.name + " attacks the " + randomEnemy.name + " with their " + hero.weapon;
  }
    
  if (randomNumber < enemyDodge) {
    output.innerHTML += "<br>" + "The " + randomEnemy.name + " evades the attack!";
  } else if (randomEnemy.health > 0) {
    randomEnemy.health = randomEnemy.health - heroDamage;
    if (randomEnemy.health < 0)
     randomEnemy.health = 0;
    output.innerHTML += "<br>" + hero.name + " did " + heroDamage + " damage";
    output.innerHTML += "<br>" + "The " + randomEnemy.name + " has " + randomEnemy.health + " health";
  }
    
  if (randomEnemy.health <= 0) {
    output.innerHTML += "<br>" + "The " + randomEnemy.name + " is dead!";
    fightBtn.disabled = true;
  }
}

<h1><b>Halloween RPG Battle</b></h1>
<p><button id="fight">Fight</button><button id="reset">Reset</button></p>
<div id="output"></div>

在do loop为真时允许单击按钮

3 个答案: