js打地鼠

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

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

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