vue实现猜拳游戏

实现猜拳游戏的基本思路

使用Vue实现猜拳游戏需要设计玩家与电脑的交互逻辑，包括选择手势、随机生成电脑手势、判断胜负以及显示结果。以下是具体实现方法。

创建Vue项目

使用Vue CLI或Vite初始化一个Vue项目。以Vite为例：

npm create vite@latest rock-paper-scissors --template vue
cd rock-paper-scissors
npm install

游戏组件设计

在src/components目录下创建Game.vue文件，实现游戏逻辑。

<template>
  <div class="game-container">
    <h1>猜拳游戏</h1>
    <div class="choices">
      <button 
        v-for="choice in choices" 
        :key="choice" 
        @click="play(choice)"
      >
        {{ choice }}
      </button>
    </div>
    <div v-if="result" class="result">
      <p>你的选择: {{ playerChoice }}</p>
      <p>电脑选择: {{ computerChoice }}</p>
      <p>结果: {{ result }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      choices: ['石头', '剪刀', '布'],
      playerChoice: '',
      computerChoice: '',
      result: ''
    }
  },
  methods: {
    play(playerChoice) {
      this.playerChoice = playerChoice
      this.computerChoice = this.getComputerChoice()
      this.result = this.getResult()
    },
    getComputerChoice() {
      const randomIndex = Math.floor(Math.random() * this.choices.length)
      return this.choices[randomIndex]
    },
    getResult() {
      if (this.playerChoice === this.computerChoice) {
        return '平局'
      }
      const winConditions = {
        石头: '剪刀',
        剪刀: '布',
        布: '石头'
      }
      return winConditions[this.playerChoice] === this.computerChoice 
        ? '你赢了!' 
        : '你输了!'
    }
  }
}
</script>

<style scoped>
.game-container {
  text-align: center;
  margin-top: 50px;
}
.choices {
  margin: 20px 0;
}
button {
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 16px;
  cursor: pointer;
}
.result {
  margin-top: 20px;
  font-size: 18px;
}
</style>

游戏逻辑说明

游戏定义了三种手势：石头、剪刀、布。玩家点击按钮选择手势后，电脑随机生成手势，然后比较两者决定胜负。

胜负判断基于以下规则：

• 石头胜剪刀
• 剪刀胜布
• 布胜石头

添加状态管理

对于更复杂的游戏状态，可以使用Pinia进行管理。安装Pinia：

npm install pinia

创建游戏store：

// src/stores/game.js
import { defineStore } from 'pinia'

export const useGameStore = defineStore('game', {
  state: () => ({
    choices: ['石头', '剪刀', '布'],
    playerChoice: '',
    computerChoice: '',
    result: ''
  }),
  actions: {
    play(playerChoice) {
      this.playerChoice = playerChoice
      this.computerChoice = this.getComputerChoice()
      this.result = this.getResult()
    },
    getComputerChoice() {
      const randomIndex = Math.floor(Math.random() * this.choices.length)
      return this.choices[randomIndex]
    },
    getResult() {
      if (this.playerChoice === this.computerChoice) return '平局'
      const winConditions = {
        石头: '剪刀',
        剪刀: '布',
        布: '石头'
      }
      return winConditions[this.playerChoice] === this.computerChoice 
        ? '你赢了!' 
        : '你输了!'
    }
  }
})

修改组件使用store：

<template>
  <!-- 模板部分保持不变 -->
</template>

<script>
import { useGameStore } from '../stores/game'
export default {
  setup() {
    const game = useGameStore()
    return {
      choices: game.choices,
      play: game.play,
      playerChoice: game.playerChoice,
      computerChoice: game.computerChoice,
      result: game.result
    }
  }
}
</script>

添加动画效果

使用Vue的过渡效果增强用户体验：

<template>
  <transition name="fade">
    <div v-if="result" class="result">
      <!-- 结果内容 -->
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

添加计分功能

扩展store以跟踪游戏分数：

// 在store中添加
state: () => ({
  // 原有状态
  score: {
    player: 0,
    computer: 0,
    ties: 0
  }
}),
actions: {
  // 修改play方法
  play(playerChoice) {
    this.playerChoice = playerChoice
    this.computerChoice = this.getComputerChoice()
    this.result = this.getResult()
    this.updateScore()
  },
  updateScore() {
    if (this.result === '你赢了!') this.score.player++
    else if (this.result === '你输了!') this.score.computer++
    else this.score.ties++
  }
}

在模板中显示分数：

<div class="score">
  <p>玩家: {{ score.player }} | 电脑: {{ score.computer }} | 平局: {{ score.ties }}</p>
</div>

响应式设计

确保游戏在不同设备上正常显示：

@media (max-width: 600px) {
  .choices {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  button {
    margin: 5px 0;
    width: 80%;
  }
}

以上实现涵盖了猜拳游戏的核心功能，包括基本游戏逻辑、状态管理、动画效果和响应式设计。可以根据需要进一步扩展功能，如添加游戏历史记录、多种游戏模式等。