如何在 JavaScript 中使用 if else 語句提示用戶點擊按鈕以繼續該語句？

Question

我已經構建了一個小項目游戲，並且有一個戰斗系統。 問題是，如果您點擊攻擊，它會一直運行 if else 語句，但不會顯示所有內容。 如果你輸了，它也會給我一個 Not a Number 錯誤，我不知道該怎么做。 我是否需要更改語句的順序或類似的東西？

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，然后讓用戶在繼續之前點擊一個按鈕。 就像，如果你不一擊殺死他們，我希望它顯示玩家和怪物的更新健康狀況，然后再次運行 if else 語句。 我認為問題是如果你不 OTK 它們就會死。 我希望這是有道理的！ 附： https://square cylinder.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))

沒有必要到10 floor 。 10已經是一個平面整數。 事實上，因為你使用了很多隨機性，我會使用randojs.com來讓你的所有隨機性更簡單、更易讀。 上面的行可以寫成rando(0, 9) 。 如果您選擇使用randojs，您所要做的就是將以下行添加到您的html文檔的head標簽中：

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