当前位置：首页 > VUE

vue实现对战游戏

2026-01-11 23:06:03VUE

实现思路

使用Vue.js开发对战游戏需要结合前端框架特性与游戏逻辑设计。核心包括游戏状态管理、实时交互、动画效果和胜负判定。

基础项目结构

vue create battle-game
cd battle-game
npm install vuex socket.io-client

游戏状态管理

采用Vuex集中管理游戏数据：

// store/index.js
const store = new Vuex.Store({
  state: {
    players: [
      { id: 1, hp: 100, attacks: [] },
      { id: 2, hp: 100, attacks: [] }
    ],
    currentTurn: 1,
    gameStatus: 'playing'
  },
  mutations: {
    attack(state, { attackerId, damage }) {
      const defender = state.players.find(p => p.id !== attackerId)
      defender.hp -= damage
      if (defender.hp <= 0) {
        state.gameStatus = 'finished'
      }
    },
    switchTurn(state) {
      state.currentTurn = state.currentTurn === 1 ? 2 : 1
    }
  }
})

角色组件设计

<!-- components/Player.vue -->
<template>
  <div :class="['player', { active: isActive }]">
    <div class="health-bar">
      <div class="health" :style="{ width: player.hp + '%' }"></div>
    </div>
    <div class="character" @click="performAttack">
      <img :src="characterImage" alt="Character">
    </div>
  </div>
</template>

<script>
export default {
  props: ['player'],
  computed: {
    isActive() {
      return this.player.id === this.$store.state.currentTurn
    },
    characterImage() {
      return require(`@/assets/character${this.player.id}.png`)
    }
  },
  methods: {
    performAttack() {
      if (this.isActive) {
        const damage = Math.floor(Math.random() * 20) + 10
        this.$store.commit('attack', {
          attackerId: this.player.id,
          damage
        })
        this.$store.commit('switchTurn')
      }
    }
  }
}
</script>

实时对战实现

使用WebSocket实现多人实时对战：

// services/socket.js
import io from 'socket.io-client'
const socket = io('http://game-server:3000')

export default {
  joinGame(roomId) {
    socket.emit('join', roomId)
  },
  onAttack(callback) {
    socket.on('attack', data => callback(data))
  },
  sendAttack(data) {
    socket.emit('attack', data)
  }
}

动画效果实现

通过Vue的transition系统添加战斗动画：

<template>
  <transition name="bounce">
    <div v-if="showEffect" class="attack-effect">
      <span>Hit!</span>
    </div>
  </transition>
</template>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
</style>

游戏主界面

整合所有组件的核心视图：

<!-- views/Game.vue -->
<template>
  <div class="battle-container">
    <Player v-for="player in players" 
            :key="player.id" 
            :player="player" />
    <GameLog :events="gameEvents" />
    <GameOver v-if="gameStatus === 'finished'" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['players', 'gameStatus'])
  }
}
</script>