html js 打地鼠小游戏

HTML、JavaScript和CSS可以一起用于创建打地鼠（Whac-a-Mole）这样的基本网页游戏。这种经典的小游戏通常涉及以下几个步骤：

1. HTML结构：使用HTML构建页面的基本框架，包括一个包含多个"地鼠洞"的容器和按钮区域。每个洞可以用`<div>`元素表示，隐藏起来等待点击。

<div class="mole-container">
  <button id="whackButton">Whack</button>
  <div class="mole-hole" hidden></div>
  <!-- 可能有多个 mole-hole 元素 -->
</div>

2. CSS样式：设置一些样式，如颜色、大小和位置，让游戏看起来更有趣。

.mole-hole {
  width: 50px;
  height: 50px;
  position: absolute;
}

3. JavaScript逻辑：使用JavaScript处理用户交互和地鼠的随机出现。当用户点击"Whack"按钮时，随机选择并显示一个地鼠洞，同时检查是否击中了地鼠。如果击中，隐藏洞并可能播放声音效果；未击中则显示错误提示。

document.getElementById('whackButton').addEventListener('click', function() {
  const moleHoles = document.getElementsByClassName('mole-hole');
  let randomIndex = Math.floor(Math.random() * moleHoles.length);
  moleHoles[randomIndex].classList.remove('hidden');
  // ...检查是否击中并处理逻辑
});