当前位置：首页 > VUE

vue实现猜拳游戏

2026-02-11 08:44:53VUE

实现猜拳游戏的步骤

在Vue中实现猜拳游戏需要创建几个核心组件：玩家选择、电脑随机选择、胜负判断和结果显示。以下是一个简单的实现方法。

创建Vue项目

使用Vue CLI或直接引入Vue.js库来创建项目。以下代码假设使用单文件组件方式。

vue create rock-paper-scissors
cd rock-paper-scissors

游戏逻辑实现

在src/App.vue或单独组件中实现游戏逻辑。

<template>
  <div id="app">
    <h1>猜拳游戏</h1>
    <div class="choices">
      <button @click="play('rock')">石头</button>
      <button @click="play('paper')">布</button>
      <button @click="play('scissors')">剪刀</button>
    </div>
    <div v-if="result">
      <p>你的选择: {{ playerChoice }}</p>
      <p>电脑选择: {{ computerChoice }}</p>
      <p>结果: {{ result }}</p>
      <button @click="reset">再来一局</button>
    </div>
  </div>
</template>

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

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

      return winConditions[player] === computer ? '你赢了!' : '你输了!'
    },
    reset() {
      this.playerChoice = ''
      this.computerChoice = ''
      this.result = ''
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}

.choices {
  margin: 20px 0;
}

button {
  padding: 10px 20px;
  margin: 0 10px;
  font-size: 16px;
  cursor: pointer;
}
</style>