当前位置：首页 > VUE

vue实现打人游戏

2026-03-08 21:33:28VUE

vue实现打人游戏

以下是一个基于 Vue.js 实现的简单打人游戏方案，包含核心逻辑和代码示例：

vue实现打人游戏

游戏核心设计

使用 Vue 的响应式数据管理游戏状态，包括角色位置、血量、得分等。通过键盘事件监听实现角色移动和攻击。

基础代码结构

<template>
  <div class="game-container">
    <div class="player" :style="playerStyle" @click="attack"></div>
    <div 
      v-for="(enemy, index) in enemies" 
      :key="index"
      class="enemy"
      :style="getEnemyStyle(enemy)"
      @click="hitEnemy(index)"
    ></div>
    <div class="score">Score: {{ score }}</div>
    <div class="health">Health: {{ health }}</div>
  </div>
</template>

游戏逻辑实现

<script>
export default {
  data() {
    return {
      playerX: 200,
      playerY: 200,
      enemies: [],
      score: 0,
      health: 100,
      gameInterval: null
    }
  },
  computed: {
    playerStyle() {
      return {
        left: `${this.playerX}px`,
        top: `${this.playerY}px`
      }
    }
  },
  methods: {
    getEnemyStyle(enemy) {
      return {
        left: `${enemy.x}px`,
        top: `${enemy.y}px`
      }
    },
    spawnEnemy() {
      this.enemies.push({
        x: Math.random() * 500,
        y: Math.random() * 500,
        speed: 1 + Math.random() * 2
      })
    },
    hitEnemy(index) {
      this.score += 10
      this.enemies.splice(index, 1)
    },
    attack() {
      // 检测攻击范围内的敌人
      this.enemies = this.enemies.filter(enemy => {
        const distance = Math.sqrt(
          Math.pow(enemy.x - this.playerX, 2) + 
          Math.pow(enemy.y - this.playerY, 2)
        )
        return distance > 50 // 攻击范围
      })
    },
    movePlayer(e) {
      const speed = 10
      switch(e.key) {
        case 'ArrowUp': this.playerY -= speed; break
        case 'ArrowDown': this.playerY += speed; break
        case 'ArrowLeft': this.playerX -= speed; break
        case 'ArrowRight': this.playerX += speed; break
      }
    },
    updateEnemies() {
      this.enemies.forEach(enemy => {
        // 敌人向玩家移动
        const dx = this.playerX - enemy.x
        const dy = this.playerY - enemy.y
        const dist = Math.sqrt(dx*dx + dy*dy)

        enemy.x += (dx/dist) * enemy.speed
        enemy.y += (dy/dist) * enemy.speed

        // 检测碰撞
        if(dist < 30) {
          this.health -= 5
        }
      })
    }
  },
  mounted() {
    window.addEventListener('keydown', this.movePlayer)
    this.gameInterval = setInterval(() => {
      this.spawnEnemy()
      this.updateEnemies()
      if(this.health <= 0) {
        clearInterval(this.gameInterval)
        alert('Game Over!')
      }
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.gameInterval)
    window.removeEventListener('keydown', this.movePlayer)
  }
}
</script>

样式增强

<style>
.game-container {
  position: relative;
  width: 600px;
  height: 600px;
  border: 1px solid #000;
}

.player {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: blue;
  border-radius: 50%;
  cursor: pointer;
}

.enemy {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;
}

.score, .health {
  position: absolute;
  top: 10px;
  font-size: 20px;
}

.score { right: 10px; }
.health { left: 10px; }
</style>