JS小游戏开发：点击错误盒子时扣除生命值图片的实现问题

开发者阿泽

2026-10-1

实现扣血功能的修改方案

首先你可以先在全局作用域声明一个变量存储当前生命值，避免每次操作都去查询DOM：

// 全局变量，和你现有的correctNumber、wrongNumber放在同一层级即可
let currentLives = 5;

之后修改你原有setRandomNumber函数里答错分支的逻辑，扣血时直接删除生命值容器的最后一个图片节点，同时可以增加生命值归0的游戏结束判断：

function setRandomNumber() {
  randomNumber = Math.floor(Math.random() * 2 + 1);

  if (randomNumber === 1) {
    numberOfRightAnswersSpan.innerHTML = `${++correctNumber}`;
    outputDiv.innerHTML = `你答对了。`;
    if (correctNumber === 3 || correctNumber === 5 || correctNumber === 7) {
      // 加生命值的时候同步更新变量
      currentLives++;
      numberOfLivesDiv.innerHTML += `<img src="images/person1.jpg"/>`
    }
  } else {
    numberOfWrongAnswersSpan.innerHTML = `${++wrongNumber}`;
    outputDiv.innerHTML = `你答错了。`;
    // 扣血逻辑
    currentLives--;
    // 删除最后一个小人图片
    numberOfLivesDiv.removeChild(numberOfLivesDiv.lastElementChild);
    // 可选：生命值为0时触发游戏结束
    if (currentLives <= 0) {
      outputDiv.innerHTML = `游戏结束！你总共答对了${correctNumber}道题`;
      // 可以在这里加禁用盒子点击的逻辑，防止游戏结束后还能操作
      // 比如假设两个盒子的类名是box，就可以写：document.querySelectorAll('.box').forEach(box => box.style.pointerEvents = 'none')
    }
  }
}