js打地鼠

“打地鼠”是一种常见的游戏类型，在JavaScript中实现这样的游戏，通常涉及到以下几个基础概念：

基础概念

HTML结构：用于创建游戏界面。
CSS样式：美化游戏界面，包括地鼠的显示和击打效果。
JavaScript逻辑：控制游戏的流程，包括地鼠的出现、计时、得分计算等。

游戏优势

互动性强：玩家可以实时与游戏互动，提升参与感。
简单直观：规则简单，容易上手。
可扩展性好：可以根据需要增加难度或功能。

游戏类型

休闲游戏：适合短时间内快速游玩。
教育游戏：可以通过游戏教授简单的编程概念或反应速度训练。

应用场景

网页游戏：作为网站的娱乐栏目吸引用户停留。
移动应用：在移动平台上提供轻松愉快的娱乐体验。

实现示例

以下是一个简单的JavaScript打地鼠游戏的实现代码：

HTML

<div id="game">
  <div id="board"></div>
  <button id="hammer">击打</button>
  <span id="score">得分: 0</span>
</div>

CSS

#board {
  width: 300px;
  height: 300px;
  position: relative;
  border: 1px solid black;
}

.hole {
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  background-color: #663300;
}

.mole {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  background-color: brown;
}

JavaScript

const board = document.getElementById('board');
const hammer = document.getElementById('hammer');
const scoreDisplay = document.getElementById('score');
let score = 0;

// 创建地洞
for (let i = 0; i < 9; i++) {
  const hole = document.createElement('div');
  hole.className = 'hole';
  hole.style.left = `${i % 3 * 100}px`;
  hole.style.top = `${Math.floor(i / 3) * 100}px`;
  board.appendChild(hole);
}

// 随机出现地鼠
function showMole() {
  const mole = document.createElement('div');
  mole.className = 'mole';
  const hole = document.querySelector('.hole');
  hole.appendChild(mole);
  setTimeout(() => {
    hole.removeChild(mole);
  }, 1000);
}

// 检测击打
hammer.addEventListener('click', () => {
  const mole = document.querySelector('.mole');
  if (mole) {
    score++;
    scoreDisplay.textContent = `得分: ${score}`;
    mole.remove();
  }
});

// 游戏循环
setInterval(showMole, 1500);