Search code examples
javascripthtmlif-statementinstance-methods

problem with if statement in instance method


HP are supposed to reset to 0 when its 0 or under But i guess my condition isnt good because it can go under 0.

And i dont understand why when i attack the opponent, it check the wrong opponent. pic of error Here is the translate of the screenshot :

in the console it say : Luffy is alive.

in the html it say : Luffy attacked Naruto and remove him 8HP <- so this code is fine

Luffy HP : 100 <- this is fine because he didnt get attack Naruto HP : -10 <- this is NOT fine because my instance method checkHealth is suppose to see that he reach 0hp and under.

So checkHealth check the wrong character, it check Luffy the attackers but i want it to check Naruto HP to see if HP are <= 0.

I tried this code and it works but it not very good to do like this bc its not very optimized :

    checkHealth (narutoCharacter){ 
        if (narutoCharacter.health <=0){
            narutoCharacter.health = 0;
            popUp.style.display = 'inline';
            popUp.innerText = narutoCharacter.name +' est mort.';
        } else {
            console.log (narutoCharacter.name + ' est en vie');
        }
    }
    checkHealth (luffyCharacter){ 
        if (luffyCharacter.health <=0){
            luffyCharacter.health = 0;
            popUp.style.display = 'inline';
            popUp.innerText = luffyCharacter.name +' est mort.'
        } else {
            console.log (luffyCharacter.name + ' est en vie');
        }
    }

Here is my if statement in my instance method :

    checkHealth (){ 
        if (this.health <=0){
            this.health = 0;
            popUp.style.display = 'inline';
            popUp.innerText = this.name +' est mort.'
        } else {
            console.log (this.name + ' est en vie');
        }
    }

Here is the complete code of my javascript file :

class Character {
    constructor (name,type,health,attack,level){
        this.name = name;
        this.type = type;
        this.health = health;
        this.attack = attack;
        this.level = level;
    }
    levelUp (){
        this.level++;
        popUp.style.display = 'inline';
        popUp.innerText = this.name +' passe au niveau '+ this.level;
    }
    // checkHealth (){ 
    //     if (this.health <=0){
    //         this.health = 0;
    //         popUp.style.display = 'inline';
    //         popUp.innerText = this.name +' est mort.'
    //     } else {
    //         console.log (this.name + ' est en vie');
    //     }
    // }
    checkHealth (narutoCharacter){ 
        if (narutoCharacter.health <=0){
            narutoCharacter.health = 0;
            popUp.style.display = 'inline';
            popUp.innerText = narutoCharacter.name +' est mort.';
        } else {
            console.log (narutoCharacter.name + ' est en vie');
        }
    }
    checkHealth (luffyCharacter){ 
        if (luffyCharacter.health <=0){
            luffyCharacter.health = 0;
            popUp.style.display = 'inline';
            popUp.innerText = luffyCharacter.name +' est mort.'
        } else {
            console.log (luffyCharacter.name + ' est en vie');
        }
    }
    get informations (){
        infoPopUp.innerText = this.name + ' ' + this.type + ' a ' + this.health + ' hp et est au niveau '+ this.level;
        tempMessage.style.display = 'inline';
    }
}
class Ninja extends Character {
    constructor (name, type, health, attack, level){
        super (name, type, health, attack, level)
    }
    attackEnemy (luffyCharacter){
        luffyCharacter.health -= narutoCharacter.attack;
        this.levelUp ();
        popUp.style.display = 'inline';
        popUp.innerText = narutoCharacter.name + ' attaque ' + luffyCharacter.name + ' et lui enlève ' + narutoCharacter.attack + ' PV';
        this.checkHealth (luffyCharacter);
    }
    specialAttack (luffyCharacter){
        (luffyCharacter.health -= narutoCharacter.attack * 3);
        this.levelUp ();
        popUp.style.display = 'inline';
        popUp.innerText = narutoCharacter.name + ' utilise son Rasengan sur ' + luffyCharacter.name + ' et lui enlève ' + narutoCharacter.attack*3 + ' PV';
        this.checkHealth (luffyCharacter);
    }
    heal (){
        narutoCharacter.health += 9;
        popUp.style.display = 'inline';
        popUp.innerText = narutoCharacter.name + ' se soigne.';
    }
}   
class Pirate extends Character {
    constructor (name, type, health, attack, level){
        super (name, type, health, attack, level)
    }
    attackEnemy (narutoCharacter){
        narutoCharacter.health -= luffyCharacter.attack;
        this.levelUp ();
        popUp.style.display = 'inline';
        popUp.innerText = luffyCharacter.name + ' attaque ' + narutoCharacter.name + ' et lui enlève ' + luffyCharacter.attack + ' PV';
        this.checkHealth (narutoCharacter);
    }
    specialAttack (narutoCharacter){
        (narutoCharacter.health -= luffyCharacter.attack * 3);
        this.levelUp ();
        popUp.style.display = 'inline';
        popUp.innerText = luffyCharacter.name + ' utilise Red Hawk sur ' + narutoCharacter.name + ' et lui enlève ' + luffyCharacter.attack*3 + ' PV';
        this.checkHealth (narutoCharacter);
    }
    heal (){
        this.health += 10;
        popUp.style.display = 'inline';
        popUp.innerText = luffyCharacter.name + ' se soigne.';
    }
}
let luffyCharacter = new Ranger ("Luffy", "Ranger", 100, 8, 0);
let narutoCharacter = new Spy ("Naruto", "Spy", 110, 7, 0)

let attackSimpleNaruto = document.getElementById('attack-naruto-simple');
let attackSpecialNaruto = document.getElementById('attack-naruto-special');
let healNaruto = document.getElementById('naruto-heal');

let attackSimpleLuffy = document.getElementById('attack-luffy-simple');
let attackSpecialLuffy = document.getElementById('attack-luffy-special');
let healLuffy = document.getElementById('luffy-heal');

let luffyHp = document.getElementById ('luffy-hp');
let narutoHp = document.getElementById ('naruto-hp');

luffyHp.innerText = '100';
narutoHp.innerText = '110';

let luffyLevel = document.getElementById ('luffy-level');
let narutoLevel = document.getElementById ('naruto-level');

luffyLevel.innerText = '0';
narutoLevel.innerText = '0';

attackSimpleNaruto.addEventListener ('click', () => {
    narutoCharacter.attackEnemy(luffyCharacter);
    luffyHp.innerText = luffyCharacter.health;
    narutoLevel.innerText = narutoCharacter.level;
    luffyCharacter.informations;
})
attackSpecialNaruto.addEventListener ('click', () => {
    narutoCharacter.specialAttack(luffyCharacter);
    luffyHp.innerText = luffyCharacter.health;
    narutoLevel.innerText = narutoCharacter.level;
    luffyCharacter.informations;
})
healNaruto.addEventListener ('click', () => {
    narutoCharacter.heal();
    narutoCharacter.informations;
    narutoLevel.innerText = narutoCharacter.level;
    narutoHp.innerText = narutoCharacter.health;
})

attackSpecialLuffy.addEventListener ('click', () => {
    luffyCharacter.specialAttack(narutoCharacter);
    narutoHp.innerText = narutoCharacter.health;
    luffyLevel.innerText = luffyCharacter.level;
    narutoCharacter.informations;
})
healLuffy.addEventListener ('click', () => {
    luffyCharacter.heal();
    luffyHp.innerText = luffyCharacter.health;
    luffyLevel.innerText = luffyCharacter.level;
    luffyCharacter.informations;
})
attackSimpleLuffy.addEventListener ('click', () => {
    luffyCharacter.attackEnemy(narutoCharacter);
    narutoHp.innerText = narutoCharacter.health;
    luffyLevel.innerText = luffyCharacter.level;
    narutoCharacter.informations;
})

Thanks for trying to help me !


Solution

  • something like that

    class Character {
    constructor (name,type,health,attack,level){
        this.name = name;
        this.type = type;
        this.health = health;
        this.attack = attack;
        this.level = level;
    }
    levelUp (){
        this.level++;
        popUp.style.display = 'inline';
        popUp.innerText = this.name +' passe au niveau '+ this.level;
    }
    checkHealth (){ 
        if (this.health <=0){
            this.health = 0;
            popUp.style.display = 'inline';
            popUp.innerText = this.name +' est mort.'
        } else {
            console.log ('Toto');
        }
    }
    get informations (){
        infoPopUp.innerText = this.name + ' ' + this.type + ' a ' + this.health 
    + ' hp et est au niveau '+ this.level;
             tempMessage.style.display = 'inline';
        }
    }
    
    class Game{
        attack(source, target){
            target.health -= source.attack; 
            return target.checkHealth()
        }
    }
    
    var game = new Game();
    var luffy = new Character('Luffi','spy',100, 5, 3);
    var naruto = new Character('Naruto','ranger',120, 2, 5);
    
    game.attack(naruto, luffy);
    

    or you make Attack member of Charakter, then you have somethink like this:

    class Character {
        ....
        checkHealth (){ 
            if (this.health <=0){
                this.health = 0;
                popUp.style.display = 'inline';
                popUp.innerText = this.name +' est mort.'
            } else {
                console.log ('Toto');
            }
        }
       .....
    
       Attacke(target){
        target.health -= this.attack; 
        return target.checkHealth()
       }
    }
    
    luffi.Attack(naruto)