当前位置：首页 > VUE

vue实现打地鼠

2026-03-08 17:23:40VUE

实现思路

使用Vue的响应式数据和事件绑定功能，构建一个简单的打地鼠游戏界面。通过随机生成地鼠出现的位置，玩家点击地鼠得分，计时结束后统计总分。

代码实现

<template>
  <div class="game-container">
    <h2>打地鼠游戏</h2>
    <div class="info">
      <span>得分: {{ score }}</span>
      <span>时间: {{ timeLeft }}秒</span>
    </div>
    <div class="game-board">
      <div 
        v-for="(hole, index) in holes" 
        :key="index" 
        class="hole"
        @click="hitMole(index)"
      >
        <div 
          v-if="hole.active" 
          class="mole"
        ></div>
      </div>
    </div>
    <button 
      v-if="!gameStarted" 
      @click="startGame"
    >
      开始游戏
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      holes: Array(9).fill().map(() => ({ active: false })),
      score: 0,
      timeLeft: 30,
      gameStarted: false,
      timer: null,
      moleInterval: null
    }
  },
  methods: {
    startGame() {
      this.gameStarted = true
      this.score = 0
      this.timeLeft = 30

      this.timer = setInterval(() => {
        this.timeLeft--
        if (this.timeLeft <= 0) {
          this.endGame()
        }
      }, 1000)

      this.moleInterval = setInterval(() => {
        this.popRandomMole()
      }, 800)
    },
    popRandomMole() {
      // 先重置所有洞
      this.holes.forEach(hole => {
        hole.active = false
      })

      // 随机选择一个洞显示地鼠
      const randomIndex = Math.floor(Math.random() * this.holes.length)
      this.holes[randomIndex].active = true

      // 1秒后地鼠消失
      setTimeout(() => {
        this.holes[randomIndex].active = false
      }, 1000)
    },
    hitMole(index) {
      if (this.holes[index].active) {
        this.score++
        this.holes[index].active = false
      }
    },
    endGame() {
      clearInterval(this.timer)
      clearInterval(this.moleInterval)
      this.gameStarted = false
      alert(`游戏结束! 你的得分是: ${this.score}`)
    }
  }
}
</script>

<style>
.game-container {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.info {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.hole {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #8B4513;
  border-radius: 50%;
  cursor: pointer;
}

.mole {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: #A0522D;
  border-radius: 50%;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #45a049;
}
</style>