vue实现猜拳

实现猜拳游戏的Vue组件

创建一个Vue猜拳游戏需要处理游戏逻辑、用户交互和状态管理。以下是实现方案：

游戏组件结构

<template>
  <div class="game-container">
    <h2>猜拳游戏</h2>
    <div class="choices">
      <button @click="play('rock')">✊</button>
      <button @click="play('paper')">✋</button>
      <button @click="play('scissors')">✌️</button>
    </div>
    <div class="result" v-if="result">
      <p>你的选择: {{ userChoice }}</p>
      <p>电脑选择: {{ computerChoice }}</p>
      <p>结果: {{ result }}</p>
    </div>
  </div>
</template>

游戏逻辑实现

<script>
export default {
  data() {
    return {
      userChoice: null,
      computerChoice: null,
      result: null
    }
  },
  methods: {
    play(choice) {
      this.userChoice = choice
      this.computerChoice = this.getComputerChoice()
      this.result = this.getResult()
    },
    getComputerChoice() {
      const choices = ['rock', 'paper', 'scissors']
      const randomIndex = Math.floor(Math.random() * 3)
      return choices[randomIndex]
    },
    getResult() {
      if (this.userChoice === this.computerChoice) {
        return '平局'
      }

      const winConditions = {
        rock: 'scissors',
        paper: 'rock',
        scissors: 'paper'
      }

      return winConditions[this.userChoice] === this.computerChoice 
        ? '你赢了!' 
        : '你输了!'
    }
  }
}
</script>

样式设计

<style scoped>
.game-container {
  text-align: center;
  margin-top: 50px;
}

.choices button {
  font-size: 2rem;
  margin: 0 10px;
  padding: 10px 20px;
  cursor: pointer;
  background: none;
  border: 2px solid #42b983;
  border-radius: 5px;
  transition: all 0.3s;
}

.choices button:hover {
  background-color: #42b983;
  color: white;
}

.result {
  margin-top: 20px;
  font-size: 1.2rem;
}
</style>

功能扩展建议

添加游戏统计功能可以增强用户体验：

data() {
  return {
    // 原有数据...
    stats: {
      wins: 0,
      losses: 0,
      ties: 0
    }
  }
},
methods: {
  play(choice) {
    this.userChoice = choice
    this.computerChoice = this.getComputerChoice()
    this.result = this.getResult()
    this.updateStats()
  },
  updateStats() {
    if (this.result === '你赢了!') this.stats.wins++
    else if (this.result === '你输了!') this.stats.losses++
    else this.stats.ties++
  }
}

在模板中添加统计显示：

<div class="stats">
  <p>胜: {{ stats.wins }} | 负: {{ stats.losses }} | 平: {{ stats.ties }}</p>
</div>