如何检测打地鼠游戏中地鼠未被点击的情况？

嘿，作为曾经也在打地鼠游戏里卡过这个逻辑的开发者，我完全懂你的困惑！咱们一步步来搞定这个问题。

首先，咱们先理清楚核心问题：当前代码里，地鼠弹出后会在一段时间自动缩回去，但没有追踪这个地鼠在弹出期间有没有被点击。之前你尝试的布尔变量可能因为异步的peep函数多次调用被覆盖了，而外部点击检测没做好区分时机的逻辑。

解决方案思路 #

咱们需要给每一次弹出的地鼠单独标记是否被点击，然后在地鼠缩回去的时候检查这个标记：

1. 地鼠弹出时，标记它为「未被点击」状态
2. 点击地鼠时，更新标记为「已被点击」
3. 地鼠自动缩回去前，检查标记，如果还是「未被点击」，就执行你想要的操作（比如扣分、播放失败音效）

修改后的完整代码 #

JavaScript部分（重点修改了peep和wack函数）

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
const mySound = document.getElementById("sound");
const joc = document.getElementsByClassName("game");
let lastHole;
let timeUp = false;
let score = 0;

function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function randomHole(holes) {
  const index = Math.floor(Math.random() * holes.length);
  const hole = holes[index];
  if (hole === lastHole) {
    return randomHole(holes);
  }
  lastHole = hole;
  return hole;
}

function peep() {
  const time = randomTime(500, 1000);
  const hole = randomHole(holes);
  hole.classList.add('up');
  // 给当前弹出的地鼠标记「未被点击」
  hole.dataset.clicked = 'false';
  
  setTimeout(() => {
    hole.classList.remove('up');
    // 检查这个地鼠是否没被点击
    if (hole.dataset.clicked === 'false') {
      // 这里写未被点击的操作，比如扣分（防止分数负数）
      if (score > 0) {
        score -= 50;
        scoreBoard.textContent = score;
      }
      // 还可以加个没打到的音效：比如 mySound.play()（如果有对应的音效）
    }
    if (!timeUp) {
      peep();
    }
  }, time);
}

function startGame() {
  scoreBoard.textContent = 0;
  timeUp = false;
  score = 0;
  peep();
  setTimeout(() => timeUp = true, 90000)
}

function wack(e) {
  if (!e.isTrusted) return;
  score += 100;
  this.parentNode.classList.remove('up');
  // 标记这个地鼠「已被点击」
  this.parentNode.dataset.clicked = 'true';
  scoreBoard.textContent = score;
}

moles.forEach(mole => mole.addEventListener('click', wack));

为什么这个方法有效？ #

• 用hole.dataset.clicked这个自定义属性，给每个弹出的地鼠单独记录状态，不会被其他地鼠的弹出覆盖
• 在地鼠弹出的同一个setTimeout回调里检查状态，刚好对应这个地鼠的生命周期（弹出→等待→缩回），逻辑完全匹配

额外扩展建议 #

• 可以添加一个「未击中次数」的统计面板，让游戏更丰富
• 给未击中的情况添加专属音效，增强反馈
• 调整扣分的数值，让游戏难度更合理

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