当前位置：首页 > JavaScript

js实现猜拳

2026-04-05 17:26:17JavaScript

实现猜拳游戏的步骤

初始化游戏元素 创建玩家和电脑的选择选项（石头、剪刀、布），并定义游戏规则（石头胜剪刀、剪刀胜布、布胜石头）。

const choices = ['rock', 'paper', 'scissors'];
const rules = {
  rock: { beats: 'scissors' },
  paper: { beats: 'rock' },
  scissors: { beats: 'paper' }
};

获取玩家选择 通过按钮或输入框获取玩家的选择，确保选择在有效范围内。

function getPlayerChoice(choice) {
  if (!choices.includes(choice)) {
    return null;
  }
  return choice;
}

生成电脑选择 使用随机数生成电脑的选择，确保选择是石头、剪刀或布中的一种。

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

判断胜负 根据游戏规则比较玩家和电脑的选择，确定胜负结果。

js实现猜拳

function determineWinner(playerChoice, computerChoice) {
  if (playerChoice === computerChoice) {
    return 'draw';
  }
  if (rules[playerChoice].beats === computerChoice) {
    return 'player';
  }
  return 'computer';
}

显示结果 将游戏结果显示在页面上，包括玩家和电脑的选择以及最终的胜负情况。

function displayResult(playerChoice, computerChoice, result) {
  const resultText = {
    player: 'You win!',
    computer: 'Computer wins!',
    draw: 'It\'s a draw!'
  };
  console.log(`Player: ${playerChoice}, Computer: ${computerChoice}, Result: ${resultText[result]}`);
}

整合游戏流程 将上述步骤整合到一个函数中，完成整个游戏的流程。

function playGame(playerChoice) {
  const validPlayerChoice = getPlayerChoice(playerChoice);
  if (!validPlayerChoice) {
    console.log('Invalid choice!');
    return;
  }
  const computerChoice = getComputerChoice();
  const result = determineWinner(validPlayerChoice, computerChoice);
  displayResult(validPlayerChoice, computerChoice, result);
}

示例调用 通过调用playGame函数并传入玩家的选择来开始游戏。

js实现猜拳

playGame('rock'); // 示例调用

扩展功能

增加计分系统 记录玩家和电脑的胜负次数，并在每次游戏结束后更新分数。

let scores = { player: 0, computer: 0, draw: 0 };

function updateScores(result) {
  scores[result]++;
  console.log(`Scores: Player - ${scores.player}, Computer - ${scores.computer}, Draw - ${scores.draw}`);
}

添加图形界面 使用HTML和CSS创建一个简单的界面，通过按钮触发游戏逻辑。

<button onclick="playGame('rock')">Rock</button>
<button onclick="playGame('paper')">Paper</button>
<button onclick="playGame('scissors')">Scissors</button>
<div id="result"></div>

优化随机选择 使用更安全的随机数生成方法，避免伪随机数的重复模式。

function getSecureRandomIndex() {
  const crypto = window.crypto || window.msCrypto;
  const array = new Uint32Array(1);
  crypto.getRandomValues(array);
  return array[0] % choices.length;
}