Как правильно использовать вложенные функции внутри операторов <while>или <if>?

Question

Я снова вернулся за помощью в игре. На этот раз с боевой системой.

Проблема заключается в том, что я не могу найти способ запустить только одну из функций одновременно, а запустить функцию можно только после нажатия кнопки.

Это то, что я имею до сих пор:

Для HTML у меня есть ...

    <div id="battle" style="display: none;">
        <div class="battle_banner">
            <p>Battle!</p>
        </div>
            <div class="battle_body">
                <p>
                    Creature's Name: <span id="cName">No One</span><br /><br />
                    Player HP: <span id="hHP">borked</span><br />
                    Creature HP: <span id="cHP">borked</span><br /><br /><br />
                    <button id="weapon" onclick="weapon()">Weapon</button>
                    <button id="kick" onclick="kick()">Kick</button>
                    <button id="block" onclick="block()">Block</button>
                </p>
            </div>
        </div>
    </div>

А для данных jquery у меня есть ...

Примечание В данный момент я смотрю только на функцию воина (). Если я справлюсь с этой работой, я думаю, что смогу получить все остальное самостоятельно.

//Battle Stuff:
var hHP = HP;
document.getElementById("hHP").innerHTML = hHP;
var cHP = 100;
document.getElementById("cHP").innerHTML = cHP;
var magicPower = MP + Intel;
var strikePower = (HP + Str) / 2;
var defenseAbility = (HP + Def) / 2;
var sword = (strikePower);
var arrow = (Agil + strikePower) / .75;
var knife = (Agil + strikePower + Sneak) / 2;
var magic = (magicPower);
var kick = (strikePower * 2) / .5;
var block = (cAttack / 2);
var cAttack = 5;
var hTurn = 1;
var cTurn = 0;
while (hTurn == 1) {
    if (hHP >= 1 && cHP >= 1) {
        if (Warrior == true) {
            function weapon() {
                cHP = (cHP - sword);
                document.getElementById("cHP").innerHTML = cHP;
                $("<p>You slashed the enemy for " + sword + "!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                hTurn = 1;
                eTurn = 0;
            }
            weapon();

            function kick() {
                cHP = (strikePower - cHP);
                document.getElementById("cHP").innerHTML = cHP;
                $("<p>You kicked the enemy for " + kick + "!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                hTurn = 1;
                eTurn = 0;
            }
            kick();

            function block() {
                hHP = (defenseAbility - cAttack);
                document.getElementById("hHP").innerHTML = hHP;
                $("<p>You defended " + block + " from the enemies attack!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                hTurn = 1;
                eTurn = 0;
            }
            block();
            if (hHP <= 0) {
                $("<p>You lost. You wake back up, having fainted from battle.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            } else if (cHP <= 0) {
                $("<p>You Won!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
                money = money + 99999;
                document.getElementById("money").innerHTML = money;
                level = level++
                    document.getElementById("level").innerHTML = level;
            }
            hTurn = 0;
            eTurn = 1;
        } else if (Archer == true) {
            function weapon() {
                cHP = cHP - arrow;
                document.getElementById("Weapon").innerHTML = Weapon;
            }
            weapon();

            function kick() {
                cHP = cHP - strikePower;
                document.getElementById("cHP").innerHTML = cHP;
            }
            kick();

            function block() {
                HP = defenseAbility - cAttack;
                document.getElementById("hHP").innerHTML = hHP;
            }
            block();
            if (hHP <= 0) {
                $("<p>You lost. You wake back up, having fainted from battle.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            } else if (cHP <= 0) {
                $("<p>You Won!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            }
            hTurn = 0;
            eTurn = 1;
        } else if (Rogue == true) {
            function weapon() {
                Weapon = knife - cHP;
                document.getElementById("Weapon").innerHTML = Weapon;
            }
            weapon();

            function kick() {
                cHP = strikePower - cHP;
                document.getElementById("cHP").innerHTML = cHP;
            }
            kick();

            function block() {
                HP = defenseAbility - cAttack;
                document.getElementById("hHP").innerHTML = hHP;
            }
            block();
            if (hHP <= 0) {
                $("<p>You lost. You wake back up, having fainted from battle.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            } else if (cHP <= 0) {
                $("<p>You Won!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            }
            hTurn = 0;
            eTurn = 1;
        } else if (Mage == true) {
            function weapon() {
                Weapon = magic - cHP;
                document.getElementById("Weapon").innerHTML = Weapon;
            }
            weapon();

            function kick() {
                cHP = strikePower - cHP;
                document.getElementById("cHP").innerHTML = cHP;
            }
            kick();

            function block() {
                HP = defenseAbility - cAttack;
                document.getElementById("hHP").innerHTML = hHP;
            }
            block();
            if (hHP <= 0) {
                $("<p>You lost. You wake back up, having fainted from battle.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            } else if (cHP <= 0) {
                $("<p>You Won!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            }
            hTurn = 0;
            eTurn = 1;
        }
    }
}
while (cTurn == 1) {
    if (hHP >= 1 && cHP >= 1) {
        function eAttack() {
            hHP = cAttack - hHP;
            document.getElementById("hHP").innerHTML = hHP;
            $("<p>You were attacked for " + cAttack + "!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
            hTurn = 1;
            eTurn = 0;
        }
        eAttack();
        if (hHP <= 0) {
            $("<p>You lost. You wake back up, having fainted from battle.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
        } else if (cHP <= 0) {
            $("<p>You Won!</p>").hide().insertBefore("#placeholder").fadeIn(1000);
        }
    }
}

Итак, желаемый результат заключается в том, что если ваш класс = Воин, то, если вы нажмете кнопку [оружие] , вы нанесете удар мечом и количеством урона. Если вы нажмете кнопку [kick] , вы нанесете удар с ударом и количеством урона. И наконец, [блок] должен быть в состоянии уменьшить количество силы, с которой может атаковать противник (в настоящий момент не знаю, как это сделать).

В конечном итоге программа проверяет определенный класс, затем автоматически запускает все перечисленные функции, что прекращает непрерывную зацикливание атак и приводит к сбою браузера. Что не является желаемым результатом.

Нет ли способа запустить функции таким образом? Я не смог найти ничего похожего на то, что я спрашиваю, поиск Google, YouTube или W3Schools. Любая помощь приветствуется.