当前位置：首页 > VUE

vue实现猜拳

2026-03-27 07:15:21VUE

Vue 实现猜拳游戏

以下是一个基于 Vue 3 的猜拳游戏实现方法，包含核心逻辑和界面交互。

游戏界面设计

使用 Vue 的模板语法创建游戏界面，包含玩家选择区域、结果显示区域和胜负统计。

vue实现猜拳

<template>
  <div class="game-container">
    <h3>猜拳游戏</h3>
    <div class="choices">
      <button @click="playGame('rock')">✊ 石头</button>
      <button @click="playGame('paper')">✋ 布</button>
      <button @click="playGame('scissors')">✌️ 剪刀</button>
    </div>
    <div v-if="result" class="result">
      <p>你的选择: {{ playerChoice }}</p>
      <p>电脑选择: {{ computerChoice }}</p>
      <p>结果: {{ result }}</p>
    </div>
    <div class="stats">
      <p>胜利: {{ wins }} | 失败: {{ losses }} | 平局: {{ draws }}</p>
    </div>
  </div>
</template>

游戏逻辑实现

在 Vue 的 script 部分实现游戏核心逻辑，包括电脑随机选择、胜负判断和统计功能。

vue实现猜拳

<script>
import { ref } from 'vue';

export default {
  setup() {
    const choices = ['rock', 'paper', 'scissors'];
    const playerChoice = ref('');
    const computerChoice = ref('');
    const result = ref('');
    const wins = ref(0);
    const losses = ref(0);
    const draws = ref(0);

    const getComputerChoice = () => {
      const randomIndex = Math.floor(Math.random() * 3);
      return choices[randomIndex];
    };

    const determineWinner = (player, computer) => {
      if (player === computer) return '平局';
      if (
        (player === 'rock' && computer === 'scissors') ||
        (player === 'paper' && computer === 'rock') ||
        (player === 'scissors' && computer === 'paper')
      ) {
        return '你赢了';
      }
      return '你输了';
    };

    const playGame = (choice) => {
      playerChoice.value = choice;
      computerChoice.value = getComputerChoice();
      result.value = determineWinner(choice, computerChoice.value);

      if (result.value === '你赢了') wins.value++;
      else if (result.value === '你输了') losses.value++;
      else draws.value++;
    };

    return {
      playerChoice,
      computerChoice,
      result,
      wins,
      losses,
      draws,
      playGame
    };
  }
};
</script>

样式设计

添加基本样式使游戏界面更美观。

<style>
.game-container {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.choices button {
  font-size: 24px;
  margin: 10px;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.choices button:hover {
  background-color: #ddd;
}

.result {
  margin: 20px 0;
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 5px;
}

.stats {
  margin-top: 20px;
  font-weight: bold;
}
</style>