如何在 JavaScript 中制作 if else 语句，提示用户点击按钮以继续语句?

Question

我做了一个小项目游戏，有一个战斗系统。问题是，如果你点击攻击，它会一直运行ifelse语句，但不会显示所有内容。如果你输了，它还会给我一个不是数字的错误，我不知道该怎么办。我需要更改语句的顺序或类似的东西吗？

setFightEvent: function() {
let getArena = document.querySelector(".arena");  
let getEnemy = document.querySelector(".enemy");
let enemy00 = new Enemy("Goblin", 100, 0, 20, 50, 100, 100);
let enemy01 = new Enemy("Troll", 200, 0, 40, 50, 80, 150);
let chooseRandomEnemy= Math.floor(Math.random() * Math.floor(2));
switch (chooseRandomEnemy) {
case 0:
enemy = enemy00;
getArena.innerHTML = '<div><p>You are fighting a ' + enemy.enemyType + '<button class="btn-attack" onclick="EventManager.FightEvent()">Attack!</button></p></div>';
break;
case 1:
enemy = enemy01;
getArena.innerHTML = '<div><p>You are fighting a ' + enemy.enemyType + '<button class="btn-attack" onclick="EventManager.FightEvent()">Attack!</button></p></div>';
break;
}
getEnemy.innerHTML = '<img src="img/avatar-enemy/' + enemy.enemyType.toLowerCase() + '.jpg" alt="' + enemy.enemyType + '" class="img-enemy"><div><h3 class="type-enemy">' + enemy.enemyType + '</h3><p class="health-enemy">Health: ' + enemy.health + '</p><p class="mana-enemy">Mana: ' + enemy.mana + '</P><p class="dexterity-enemy>Dexterity :' + enemy.dexterity + '</p></div>';
},
FightEvent: function() {
let getEnemy = document.querySelector(".enemy");
getEnemy.style.visibility = 'visible';
let getArena = document.querySelector(".arena");
let getPlayerHealth = document.querySelector(".health-player");
let getEnemyHealth = document.querySelector(".health-enemy");
let getPlayerGold = document.querySelector(".gold-player");
let getPlayerDexterity = player.dexterity;
let getEnemyDexterity = enemy.dexterity;
let playerAttack = function () {
let calcBaseDamage;
if (player.mana > 0) {
calcBaseDamage = player.strength * player.mana / 1000;
} else {
calcBaseDamage = player.strength * player.dexterity / 1000;
}
let offsetDamage = Math.floor(Math.random() * Math.floor(10));
let calcOutputDamager = calcBaseDamage + offsetDamage;
let numberOfHits = Math.floor(Math.random() * Math.floor(player.dexterity / 6) / 2) + 1 ;
let attackValues = [calcOutputDamager, numberOfHits];
return attackValues;
}
let enemyAttack = function () {
let calcBaseDamage;
if (enemy.mana > 0) {
calcBaseDamage = enemy.strength * enemy.mana / 1000;
} else {
calcBaseDamage = enemy.strength * enemy.dexterity / 1000;
}
let offsetDamage = Math.floor(Math.random() * Math.floor(6))
let calcOutputDamager = calcBaseDamage + offsetDamage;
let numberOfHits = Math.floor(Math.random * Math.floor(enemy.dexterity / 6) / 2) + 1 ;
let attackValues = [calcOutputDamager, numberOfHits];
return attackValues;
}
if (getPlayerDexterity >= getEnemyDexterity) {
let PlayerAttackValues = playerAttack();
let totalDamage = PlayerAttackValues[0] * PlayerAttackValues[1];
enemy.health = enemy.health - totalDamage;
getArena.innerHTML = '<div><p>You hit the ' + enemy.enemyType + ' for ' + PlayerAttackValues[0] + ' damage ' + PlayerAttackValues[1] + ' times!</p></div>';
if (enemy.health <= 0) {
player.gold = player.gold + enemy.gold;
player.xp = player.xp + enemy.xp;
getArena.innerHTML = '<div<p>After a hard fought battle, you won. You also looted the ' + enemy.enemyType + ' and it had ' + enemy.gold + ' gold!<br>Gained ' + enemy.xp + ' XP!</p></div>';
getPlayerGold.innerHTML = 'Gold: ' + player.gold;
getPlayerHealth.innerHTML = 'Health: ' + player.health;
getEnemyHealth.innerHTML = 'Health: 0';
} else {
let enemyAttackValues = enemyAttack();
let totalDamage = enemyAttackValues[0] * enemyAttackValues[1];
player.health = player.health - totalDamage;
getArena.innerHTML = '<div><p>The ' + enemy.enemyType + ' hit you for ' + enemyAttackValues[0] + ' damage ' + enemyAttackValues[1] + ' times!</p></div>';
getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
getPlayerHealth.innerHTML = 'Health: ' + player.health;
if (player.health <= 0) {
player.xp = player.xp + (enemy.xp / 2);
getArena.innerHTML ='<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'
getPlayerHealth.innerHTML = 'Health: 0';
getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
} else {
getPlayerHealth.innerHTML = 'Health: ' + player.health;
}
} 
} else if (getEnemyDexterity >= getPlayerDexterity) {
let enemyAttackValues = enemyAttack();
let totalDamage = enemyAttackValues[0] * enemyAttackValues[1];
player.health = player.health - totalDamage;
getArena.innerHTML = '<div><p>The ' + enemy.enemyType + 'hit you for ' + enemyAttackValues[0] + ' damage ' + enemyAttackValues[1] + ' times!</p></div>';
if (player.health <= 0) {
player.xp = player.xp + (enemy.xp / 2);
getArena.innerHTML ='<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'
getPlayerHealth.innerHTML = 'Health: 0';
getEnemyHealth.innerHTML = 'Health: ' + enemy.health; 
} else {
let PlayerAttackValues = playerAttack();
let totalDamage = PlayerAttackValues[0] * PlayerAttackValues[1];
enemy.health = enemy.health - totalDamage;
getArena.innerHTML = '<div><p>You hit the ' + enemy.enemyType + ' for ' + PlayerAttackValues[0] + ' damage ' + PlayerAttackValues[1] + ' times!</p></div>';
getPlayerHealth.innerHTML = 'Health: ' + player.health;
if (enemy.health <= 0) {
player.gold = player.gold + enemy.gold;
player.xp = player.xp + enemy.xp;
getArena.innerHTML = '<div<p>After a hard fought battle, you won. You also looted the ' + enemy.enemyType + ' and it had ' + enemy.gold + ' gold!<br>Gained ' + enemy.xp + ' XP!</p></div>';
getPlayerGold.innerHTML = 'Gold: ' + player.gold;
getPlayerHealth.innerHTML = 'Health: ' + player.health;
getEnemyHealth.innerHTML = 'Health: 0';
alert("Select another action before fighting again!");
} else {
getEnemyHealth.innerHTML = 'Health: ' + enemy.health;
}
}
}

},

代码似乎运行良好，除非你会输，然后它就会中断。我希望能够说出第一个(如果不是(，然后要求用户在继续之前点击一个按钮。就像，如果你没有一击杀死他们，我希望它显示玩家和怪物的最新健康状况，然后再次运行 if else 语句。我认为问题是如果你不OTK它们，它就会死。我希望这是有道理的！ https://squarecylinder.github.io/Stress-of-The-Kingdom/这里是游戏的链接，但我在 CSS 中使用了绝对定位来排列所有内容，所以我认为它在每个显示器上看起来都不对！我也在努力弄清楚！

Answer 1

注释已经解决了这样一个事实，即您正在陈述Math.random而不是在代码中的某一点调用Math.random()，所以我将不理会它。除此之外，此行末尾没有分号：

getArena.innerHTML = '<div><p>After a gruelling battle, you lost. Maybe you should rest before fighting again.<br>Gained ' + enemy.xp + '!'

它在代码中出现两次。我还没有设置代码的运行示例，所以我不知道这是否是您唯一剩下的问题。如果在进行此更新后仍然不起作用，请告诉我，我将删除此答案。

---

旁注：

你的随机陈述有点不必要的复杂。例如，使用以下行：

Math.floor(Math.random() * Math.floor(10))

没有必要floor10.10已经是一个平面整数。事实上，因为你使用了很多随机性，我会使用 randojs.com 来使你所有的随机性更简单、更易读。上面的行可以写成rando(0, 9).如果您选择使用 randojs，您所要做的就是将以下行添加到 html 文档的 head 标签中：

<script src="https://randojs.com/1.0.0.js"></script>