实例方法if语句异常：HP未归零且检测角色错误

问题梳理 #

• 角色HP≤0时未自动重置为0，实际会出现负值
• checkHealth方法实现冗余（针对特定角色写多个版本），且调用时错误检测攻击者HP而非目标HP

核心修复与优化点 #

1. 修复HP负值问题 #

在修改角色HP的逻辑中，使用Math.max()确保HP不会低于0；或者在checkHealth方法中强制将HP设为0（推荐前者，更及时）

2. 重构checkHealth方法 #

将checkHealth改为通用方法，接收目标角色作为参数，不再针对特定角色写重复代码；同时确保攻击时传入被攻击目标，而非错误对象

3. 消除硬编码依赖 #

子类方法中不要直接引用全局变量（如narutoCharacter、luffyCharacter），改用this指代当前实例，提升代码复用性

4. 修正实例创建错误 #

原代码中创建角色时使用了未定义的Ranger、Spy类，改为正确的Pirate、Ninja类

优化后的完整代码 #

class Character {
    constructor(name, type, health, attack, level) {
        this.name = name;
        this.type = type;
        // 初始化时确保HP不为负
        this.health = Math.max(health, 0);
        this.attack = attack;
        this.level = level;
    }

    levelUp() {
        this.level++;
        popUp.style.display = 'inline';
        popUp.innerText = `${this.name} passe au niveau ${this.level}`;
    }

    // 通用的checkHealth方法，接收目标角色作为参数
    checkHealth(target) {
        // 强制将HP设为0，避免负值
        target.health = Math.max(target.health, 0);
        if (target.health === 0) {
            popUp.style.display = 'inline';
            popUp.innerText = `${target.name} est mort.`;
        } else {
            console.log(`${target.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(target) {
        // 修改HP时直接确保不低于0
        target.health = Math.max(target.health - this.attack, 0);
        this.levelUp();
        popUp.style.display = 'inline';
        popUp.innerText = `${this.name} attaque ${target.name} et lui enlève ${this.attack} PV`;
        this.checkHealth(target);
    }

    specialAttack(target) {
        const damage = this.attack * 3;
        target.health = Math.max(target.health - damage, 0);
        this.levelUp();
        popUp.style.display = 'inline';
        popUp.innerText = `${this.name} utilise son Rasengan sur ${target.name} et lui enlève ${damage} PV`;
        this.checkHealth(target);
    }

    heal() {
        // 这里可以根据需求限制最大HP，比如不超过初始值，示例中暂不限制
        this.health += 9;
        popUp.style.display = 'inline';
        popUp.innerText = `${this.name} se soigne.`;
    }
}

class Pirate extends Character {
    constructor(name, type, health, attack, level) {
        super(name, type, health, attack, level);
    }

    attackEnemy(target) {
        target.health = Math.max(target.health - this.attack, 0);
        this.levelUp();
        popUp.style.display = 'inline';
        popUp.innerText = `${this.name} attaque ${target.name} et lui enlève ${this.attack} PV`;
        this.checkHealth(target);
    }

    specialAttack(target) {
        const damage = this.attack * 3;
        target.health = Math.max(target.health - damage, 0);
        this.levelUp();
        popUp.style.display = 'inline';
        popUp.innerText = `${this.name} utilise Red Hawk sur ${target.name} et lui enlève ${damage} PV`;
        this.checkHealth(target);
    }

    heal() {
        this.health += 10;
        popUp.style.display = 'inline';
        popUp.innerText = `${this.name} se soigne.`;
    }
}

// 修正实例创建错误，使用正确的子类
let luffyCharacter = new Pirate("Luffy", "Pirate", 100, 8, 0);
let narutoCharacter = new Ninja("Naruto", "Ninja", 110, 7, 0);

// DOM元素获取与事件监听
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');

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

// 初始化UI显示
luffyHp.innerText = luffyCharacter.health;
narutoHp.innerText = narutoCharacter.health;
luffyLevel.innerText = luffyCharacter.level;
narutoLevel.innerText = narutoCharacter.level;

// Naruto事件监听
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;
    narutoHp.innerText = narutoCharacter.health;
});

// Luffy事件监听
attackSimpleLuffy.addEventListener('click', () => {
    luffyCharacter.attackEnemy(narutoCharacter);
    narutoHp.innerText = narutoCharacter.health;
    luffyLevel.innerText = luffyCharacter.level;
    narutoCharacter.informations;
});

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;
});

优化说明 #

• HP值控制：通过Math.max(target.health - damage, 0)直接确保HP不会低于0，比事后检查更高效
• 通用方法：checkHealth改为接收目标参数，可复用在任意角色上，消除重复代码
• 消除全局依赖：子类方法中用this替代全局变量，代码更灵活，可扩展更多角色
• UI初始化优化：直接使用实例属性初始化UI，避免硬编码数值
• 模板字符串：替换拼接字符串为模板字符串，提升可读性

内容的提问来源于stack exchange，提问作者Elias P