Heal instead of counter

i found a near perfect example of what i need on codepen. only difference is, it has a counter attack. i'd prefer the counter to be a heal instead. here's the code for the counter

Code:

---

function counter(y, c) {
        var move = Math.floor((Math.random()*5));
        if (move >= 3 && y === 'attack') {
                res = 'Computers counter was successful! You took 10 damage';
                yourHealth -= 10;
        } else if (move >= 3 && y === 'counter') {
                res = 'Your counter was successful! Comp took 10 damage';
                compHealth -= 10;
        } else if (move < 3 && y === 'attack') {
                res = 'Computer counter failed! You dealt 15 damage!';
                compHealth -= 15;
        } else if (move < 3 && y === 'counter') {
                res = 'Your counter was not successful! You were delalt 15 damage!';
                yourHealth -= 15;
        }

}

-----------------------

        } else if ( y === 'counter' && c === 'counter') {
                res = 'Defensive stances taken in vain';
        } else if ( y === 'attack' && c === 'counter') {
                res = 'Comp took a defensive stance and prepares to counter';
                counter(y, c);
        } else if ( y === 'counter' && c === 'attack') {
                res = 'You took a defensive stance and prepare to counter';
                counter(y, c);
        }
}

---

could that be modified to be a heal instead?

it's from this
https://codepen.io/Limey_88/pen/gbypXg

i think i figured out how to make it a heal

Code:

---

function counter(y, c) {
        var move = Math.floor((Math.random()*5));
        if (move >= 0 && y === 'attack') {
                res = '';
                yourHealth -= 0;
        } else if (move >= 0 && y === 'counter') {
                res = 'Your heal was successful!';
                yourHealth += 2;
       
        }

}

---

but dunno how to make it also deduct mana each time i heal. i've added the mana bar and the div to hold it, and added the statements to the obvious places. but during the counter section, which is now a heal instead, i don't know how to make it both heal health and deduct mana at same time. if i add it as a separate statement beneath the heal statement, it just deducts mana when i attack, rather than when i heal.

Assuming you can only improve "Health" by the amount of "Mana" you have (up to a maximum of 2) then you need this code:

Code:

---

function counter(y, c) {
        var move = Math.floor((Math.random()*5));
        if (move >= 0 && y === 'attack') {
                res = '';
        } else if (move >= 0 && y === 'counter') {
                res = 'Your heal was successful!';
                if(yourMana > 2) {
                    yourHealth += 2;
                    yourMana -=2;
                } else {
                    yourHealth += yourMana;
                    yourMana = 0;
                }
        }

}

---

hmmm ty for trying. but it's not working. it just keeps deducting mana when i do damage to monster, rather than when i heal. maybe its my modifications. also, it only seems to do damage to both at same time. instead of my turn, then monster's turn, it's just both take damage. here's what i have

Code:

---

<button id="attack" onClick="fight(id)">Attack</button>
                <button id="counter" onClick="fight(id)">Heal</button>
                <div id="yourHealth"><div id="yourHealthBar"></div></div>
                <div id="compHealth"><div id="compHealthBar"></div></div>       
                <div id="yourMana"><div id="yourManaBar"></div></div>
               
                <div id="announcements"></div>
               
                <script>// each player chooses a move
// defense goes first (player then comp)
// attacks go second (player then comp)
// health gets minused as attacks land



//Global variables >>>>>>>>>>>>>>>>>>>>>>>
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var yourMove;
var compMove;
var savedCompMove;
var yourHealth = 15;
var compHealth = 30;
var yourMana = 30;

//Turn counters >>>>>>>>>>>>>>>>>>>>>>>>>>
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var totRounds = 0;

//Doument rewrites >>>>>>>>>>>>>>>>>>>>>>>
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var res;
var playByPlay = document.getElementById('announcements');
var yourHealthBar = document.getElementById('yourHealthBar');
var compHealthBar = document.getElementById('compHealthBar');
var yourManaBar = document.getElementById('yourManaBar');
var attackButton = document.getElementById('attack');
var counterButton = document.getElementById('counter');
var playAgain = document.getElementById('playAgain');

//Run on load >>>>>>>>>>>>>>>>>>>>>>>>>>>>
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

function enableButtons() {
        attackButton.disabled = false;
        counterButton.disabled = false;
}

//Moves >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


//Shared Functions >>>>>>>>>>>>>>>>>>>>>>>
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

// triggers the fight in the HTML
function fight(id) {
        addRound();
        compMove(id);
        healthChange();
        manaChange();
        gameOver();
}
// adds a round to the round counters
function addRound() {
        totRounds += 1;
}

//adds the counter action to attack
function counter(y, c) {
        var move = Math.floor((Math.random()*5));
        if (move >= 0 && y === 'attack') {
                res = '';
        } else if (move >= 0 && y === 'counter') {
                res = 'Your heal was successful!';
                if(yourMana > 2) {
                    yourHealth += 2;
                    yourMana -=2;
                } else {
                    yourHealth += yourMana;
                    yourMana = 0;
                }
        }

}

// Dislpays results of the round
function roundResults(res) {
        playByPlay.innerHTML += res + "<br>";
}

function healthChange() {
        yourHealthBar.style.width = yourHealth + "%";
        compHealthBar.style.width =  compHealth + "%";
}

function manaChange() {
yourManaBar.style.width =  compHealth + "%";

}
function gameOver() {
        if (yourHealth === 0 || compHealth === 0) {
                res = 'gameOver!';
                roundResults(res);
                attackButton.disabled = true;
                counterButton.disabled = true;
                playAgain.disabled = true;
        }
}

//The Game >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

// Takes the moves of the player and generates one for the comp and then runs the damage step
function compMove(id) {
        var move = Math.floor((Math.random()*4)+1);
        if (move <= 3) {
                savedCompMove =  'attack';
        } else {
                savedCompMove = 'counter';
        };
        res = ('your move is <span>'+ id + '</span> and the computers move is <span>' + savedCompMove + '</span> on round ' + totRounds);
        damageStep(id, savedCompMove);
        roundResults(res);

}

//proccesses the moves to a result
function damageStep(y, c) {
        if ( y === 'attack' && c === 'attack') {
                res = '';
                if (compHealth >= 10 && yourHealth >= 10) {
                        compHealth -= 1;
                        yourHealth -= 1;
                       
                } else {
                        compHealth = 0;
                        yourHealth = 0;
                }
        } else if ( y === 'counter' && c === 'counter') {
                res = '';
        } else if ( y === 'attack' && c === 'counter') {
                res = '';
                counter(y, c);
        } else if ( y === 'counter' && c === 'attack') {
                res = 'You took a defensive stance to heal';
                counter(y, c);
        }
}


window.onload=enableButtons();</script>

---

also the heal is occassionally not landing. it's apparently because the counter section originally randomized whether your counter would land or not or whether the monster's counter would land or not. i tried to remove the randomness of it but think it could be tweaked a bit more. i'm not sure what
var move = Math.floor((Math.random()*5));
does.

would it be possible for the deduction/addition of health and/or mana be targetted to two graphics, such as the monster health
Attachment 6165
or the player health/mana
Attachment 6166

i think what's causing the problem with mana not deducting properly is that counter was originally for attack counters only. so it's translating the mana statement as part of the attack function. i think mana needs it's own section, separate from counter, and counter just needs to be removed then mana would deduct properly if it's not attached to an attack function

I think you need to fix this function in your code:

Code:

---

function manaChange() {
yourManaBar.style.width =  compHealth + "%";

---

In JavaScript "Math.random()" returns a floating point number between 0 and 0.99999999999999. Thus "Math.random() * 5" returns a floating point number between 0 and 4.999999999. "Math.floor" returns the integer part of a positive floating point number (it behaves differently with negative numbers but that's not relevant here). So, if you want to generate a random number between 0 & 5 inclusive you need to use:

Code:

---

Math.floor(Math.random() * 6);

---

However if you want it to be between 1 & 5 inclusive you need to use:

Code:

---

Math.floor(Math.random() * 5) + 1;

---

I hope that helps.

mana reduction: oh it works! thanks. yourManaBar.style.width = yourMana + "%"; oopsie hehe
heal frequency: how do i get it to heal every time heal button is pressed? ( i have no idea what the floating point stuff is about. not a mathematical person)
heatlh and mana bars: the original code had 100 health for the player and the comp. but my monster has 30 health and my player has 15 health (but the ability to heal, starting with 30 mana). the health and mana bars are almost totally empty when the battle starts as a result because he originally coded the combatants to each have 100 health. problem is, i don't see where the 100 health is mentioned after i changed it to 30 and 15. its effecting what percentage of the health and mana is filled in the healthBars and manaBar when the battle starts.
you win, you lose, etc: there doesn't seem to be a win/lose statement, just a game over statement when one or the other, runs out of health. how do i make it generate a "You win" or a "Granbot wins" statement?

i tried to extract the "c" battle portion from this

Code:

---

//proccesses the moves to a result
function damageStep(y, c) {
        if ( y === 'attack' && c === 'attack') {
                res = '';
                if (compHealth >= 10 && yourHealth >= 10) {
                        compHealth -= 1;
                        yourHealth -= 1;
                       
                } else {
                        compHealth = 0;
                        yourHealth = 0;
                }

---

and make it a separate function below the "y" section, but it broke the script. in other words, i made this

Code:

---

if ( y === 'attack' && c === 'attack') {
                res = '';

---

into this

Code:

---

if (y === 'attack) { res ='You attack!'; 
if (c === 'attack') { res='Granbot attacks!';

---

nope. clearly i'm not a javascript coder. learning though.