JavaScript 猜拳游戏：完善你的计分系统与逻辑

聖光之護

发布时间：2025-08-20 18:52:01

768人浏览过

来源于php中文网

原创

javascript 猜拳游戏：完善你的计分系统与逻辑

本文将引导你构建一个基于 JavaScript 的猜拳游戏，重点解决计分逻辑问题，并提供更简洁高效的实现方案。我们将深入探讨如何使用数组索引和模运算来简化胜负判断，同时优化用户输入验证，确保游戏的健壮性和用户体验。通过本文，你将掌握编写清晰、可维护的 JavaScript 代码的技巧，并提升解决实际编程问题的能力。

游戏框架搭建

首先，我们需要定义游戏的核心元素：rock（石头）、paper（布）、scissors（剪刀）。将它们存储在一个数组中，方便后续的逻辑处理。

const choices = ['rock', 'paper', 'scissors'];
let playerScore = 0;
let computerScore = 0;

电脑的选择

getComputerChoice 函数负责随机生成电脑的选择。

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

玩家的选择与验证

getPlayerChoice 函数负责获取玩家的输入，并进行有效性验证。使用 prompt 接收用户输入，并使用循环确保输入是 choices 数组中的有效值。

立即学习“Java免费学习笔记（深入）”；

function getPlayerChoice() {
  let choice;
  while(true) {
    choice = prompt('Pick Rock, Paper, or Scissors?').toLowerCase();
    if(choices.includes(choice)) return choice;
    else console.log('Invalid choice, please try again');
  }
}

胜负判断：核心逻辑优化

playRound 函数是游戏的核心，负责判断胜负并更新分数。关键在于如何简化胜负判断的逻辑。我们可以利用 choices 数组的索引，并结合模运算 % 来实现。

万知

万知: 你的个人AI工作站

下载

核心思想：

Rock
如果玩家的选择的索引比电脑的选择的索引大 1，则玩家获胜（考虑循环，使用模运算）。

function playRound(playerSelection, computerSelection) {
  if(playerSelection===computerSelection) {
    return 'Draw'
  }
  else if((((choices.indexOf(playerSelection) - choices.indexOf(computerSelection)) + 3) % 3)===1) {
    playerScore++
    return `You win! ${playerSelection} beats ${computerSelection}`
  }
  else {
    computerScore++
    return `You lose! ${computerSelection} beats ${playerSelection}`

  }
}

代码解释：

choices.indexOf(playerSelection) 获取玩家选择在 choices 数组中的索引。
choices.indexOf(computerSelection) 获取电脑选择在 choices 数组中的索引。
((choices.indexOf(playerSelection) - choices.indexOf(computerSelection)) + 3) % 3 计算索引差，并使用模运算处理循环情况（例如，Rock 胜 Scissors 的情况）。
如果结果为 1，则玩家获胜。

游戏主循环

game 函数负责控制游戏流程，进行 5 轮游戏，并最终输出结果。

function game() {
  for (let i = 1; i <= 5; i++) {
    const playerSelection = getPlayerChoice()
    const computerSelection = getComputerChoice()
    console.log(playRound(playerSelection, computerSelection))
  }

  if (playerScore > computerScore) {
    return 'You beat the computer! You are a genius'
  } else if (playerScore < computerScore) {
    return `You got beat by the computer. Practice your throws!`
  } else {
    return `You tied with the computer!`
  }
}

console.log(game())

完整代码

const choices = ['rock', 'paper', 'scissors'];
let playerScore = 0;
let computerScore = 0;

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

function getPlayerChoice() {
  let choice;
  while(true) {
    choice = prompt('Pick Rock, Paper, or Scissors?').toLowerCase();
    if(choices.includes(choice)) return choice;
    else console.log('Invalid choice, please try again');
  }
}

function playRound(playerSelection, computerSelection) {
  if(playerSelection===computerSelection) {
    return 'Draw'
  }
  else if((((choices.indexOf(playerSelection) - choices.indexOf(computerSelection)) + 3) % 3)===1) {
    playerScore++
    return `You win! ${playerSelection} beats ${computerSelection}`
  }
  else {
    computerScore++
    return `You lose! ${computerSelection} beats ${playerSelection}`

  }
}

function game() {
  for (let i = 1; i <= 5; i++) {
    const playerSelection = getPlayerChoice()
    const computerSelection = getComputerChoice()
    console.log(playRound(playerSelection, computerSelection))
  }

  if (playerScore > computerScore) {
    return 'You beat the computer! You are a genius'
  } else if (playerScore < computerScore) {
    return `You got beat by the computer. Practice your throws!`
  } else {
    return `You tied with the computer!`
  }
}

console.log(game())