我应8岁孩子的要求创建了一个小RPG，以便学习javascript并教她一些东西。这需要一段时间(对我的代码要温和。
我想做的是让每一轮都通过"战斗！"按钮，前提是你或敌人的生命值大于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>这是我的解决方案。你需要移除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>答案是根本不使用循环，而是让battle函数只运行逻辑游戏循环的一次迭代。战斗结束后，您可以通过设置其disabled属性true来禁用"战斗"按钮。
下面的片段预计，除了玛丽，你最终还想添加其他英雄，并且你也想随机选择这些英雄。我觉得如果列表有复数名称，它们读起来会更好，所以我把"敌人"改名为"敌人"，把"英雄"改名为了"英雄"。这样，一个新的变量"英雄"可以指活跃的英雄。此外，我使用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>我的主要修改是将文本推送到数组中，并在发生某些事情时显示数组切勿在加载后使用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>