web前端开发打地鼠小游戏HTML+CSS+JS

好的，我可以为您提供一些简单的代码示例来实现打地鼠小游戏。

HTML 部分：

<div class="game-container">
  <div class="score">得分：<span id="score">0</span></div>
  <div class="hole hole1"></div>
  <div class="hole hole2"></div>
  <div class="hole hole3"></div>
  <div class="hole hole4"></div>
  <div class="hole hole5"></div>
  <div class="hole hole6"></div>
</div>

CSS 部分：

.game-container {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  background-color: #8bc34a;
  border-radius: 10px;
  overflow: hidden;
}

.hole {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('https://i.imgur.com/m8I4Xfa.png');
  background-size: cover;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.hole1 {
  top: 10%;
  left: 10%;
}

.hole2 {
  top: 10%;
  left: 50%;
}

.hole3 {
  top: 10%;
  right: 10%;
}

.hole4 {
  bottom: 10%;
  left: 10%;
}

.hole5 {
  bottom: 10%;
  left: 50%;
}

.hole6 {
  bottom: 10%;
  right: 10%;
}

.hole:hover {
  transform: scale(1.2);
}

.score {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 24px;
  color: #fff;
}

JavaScript 部分：

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.getElementById('score');
let score = 0;

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

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

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole();
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
    if (!timeUp) peep();
  }, time);
}

function bonk(e) {
  if (!e.isTrusted) return;
  score++;
  this.classList.remove('up');
  scoreBoard.textContent = score;
}

holes.forEach(hole => hole.addEventListener('click', bonk));

let lastHole;
let timeUp = false;
let countDown = 30;
const timer = setInterval(() => {
  countDown--;
  if (countDown < 0) {
    clearInterval(timer);
    timeUp = true;
    alert(`时间到了！你的得分是 ${score} 分！`);
  }
}, 1000);

peep();

以上是一个简单的打地鼠小游戏的实现，希望能对您有所帮助。