Simple JavaScript if / else statements

Question

I'm learning Javascript. Here is my code. It is a simple program in which the user fights a dragon, but I added an extra bit where if the dragon reduces the user's health to 0, the code finishes. Whenever I run this code, though, once the dragon begins to reduce the health of the user, that is all that happens. The user isn't able to trade blows with the dragon. What am I doing wrong?

var userHealth = 5;
var youHit = Math.floor(Math.random() * 2);
var damageThisRound = Math.floor(Math.random()*5 + 1);
var totalDamage = 0;
var dragonDamage = Math.floor(Math.random() * 2);
while (userHealth > 0) {
    if (youHit) {
        console.log("You hit the dragon!");
        totalDamage += damageThisRound;
        console.log("Total damage dealt: " + totalDamage + "!");
        if (totalDamage >= 4) {
            console.log("You slew the dragon!");
            userHealth = 0;
        }
        else {
            youHit = Math.floor(Math.random() * 2);
        }
    }
    else {
        console.log("The dragon has dealt damage to you!");
        userHealth -= dragonDamage;
        dragonDamage = Math.floor(Math.random() * 2);
        console.log("Your health is now: " + userHealth + "!");
}
}

Answer 1

youHit is only calculated once. Because of that, once the dragon deals damage to your player, it will keep dealing damage.

You can wrap the calculations in a function and fire them instead:

function fightDragon() {
    var userHealth = 5;
    var youHit = function() {
        return Math.floor(Math.random() * 2);
    };
    var damageThisRound = function() {
        return Math.floor(Math.random() * 5 + 1);
    }
    var totalDamage = 0;
    var dragonDamage = function() {
        return Math.floor(Math.random() * 2);
    }

    while (userHealth > 0) {
        var damage = youHit();
        if (damage) {
            console.log("You hit the dragon!");
            totalDamage += damageThisRound();
            console.log("Total damage dealt: " + totalDamage + "!");
            if (totalDamage >= 4) {
                console.log('You slew the dragon!');
                break;
            }
        } else {
            console.log('The dragon has dealt damage to you!');
            userHealth -= dragonDamage();
            console.log('Your health is now: ' + userHealth + '!')
        }
    }

}

Answer 2

Add a you hit math round to your dragon code:

var userHealth = 5;
var youHit = Math.floor(Math.random() * 2);
var damageThisRound = Math.floor(Math.random()*5 + 1);
var totalDamage = 0;
var dragonDamage = Math.floor(Math.random() * 2);
while (userHealth > 0) {
    if (youHit) {
        console.log("You hit the dragon!");
        totalDamage += damageThisRound;
        console.log("Total damage dealt: " + totalDamage + "!");
        if (totalDamage >= 4) {
            console.log("You slew the dragon!");
            userHealth = 0;
        }
        else {
            youHit = Math.floor(Math.random() * 2);
        }
    }
    else {
        console.log("The dragon has dealt damage to you!");
        userHealth -= dragonDamage;
        youHit = Math.floor(Math.random() * 2);
        dragonDamage = Math.floor(Math.random() * 2);
        console.log("Your health is now: " + userHealth + "!");
}
}

Answer 3

In your case, all the variables outside the while loop are calculated only once.

if (totalDamage >= 4) {
    userHealth = 0;
} else {
    youHit = Math.floor(Math.random() * 2);
}

This code above won't ever be executed, since if dragon kill you, game is over and loop is ended!

Also I've added this: if (!!dragonDamage) condition to check if generated damage for a dragon is not zero. Another way is to add 1 to the result of dragonDamage calculations =)

var userHealth = 5,
    totalDamage = 0;

while (userHealth > 0) {

    var youHit = Math.floor(Math.random() * 2),
        yourDamage = Math.floor(Math.random()*5 + 1),
        dragonDamage = Math.floor(Math.random() * 2);

    if (youHit) {
        console.log("You hit the dragon for " + yourDamage);
        totalDamage += yourDamage;

        if (totalDamage >= 4) {
            console.log("You slew the dragon!");
            userHealth = 0;
        }

    } else {
        if (!!dragonDamage) {
            console.log("The dragon has dealt damage to you!");
            userHealth -= dragonDamage;
            console.log("Your health is now: " + userHealth + "!");
        }
    }
}

Answer 4

Couple things:

1) You'll want to recalculate a random value for youHit in the "dragon has dealt damage to you" section:

youHit = Math.floor(Math.random() * 2);

Otherwise, if the player's hit is 0 the first time, it will always stay 0 and the dragon will win every exchange.

2) In the "You hit the dragon" section, you are setting the player's health to 0 in order to exit the while loop, even though the player's health should not actually be 0. This is a problem if you ever intend to display the player's health throughout the game. I suggest adding a flag to the while loop:

var dragonSlain = false;
while (userHealth > 0 && !dragonSlain)
{
    ...
    if (totalDamage >= 4) {
        console.log("You slew the dragon!");
        //userHealth = 0;
        dragonSlain = true;
    }
    ...
}