JavaScript 猜拳游戏：完善计分与逻辑优化-js教程-PHP中文网

JavaScript 猜拳游戏：完善计分与逻辑优化

花韻仙語

发布： 2025-08-20 19:04:16

原创

471人浏览过

javascript 猜拳游戏：完善计分与逻辑优化

本文旨在帮助开发者构建一个基于浏览器的 JavaScript 猜拳游戏，并解决计分逻辑问题。我们将提供清晰的代码示例，并深入探讨如何使用数组索引和模运算来简化胜负判断。通过本文，你将掌握如何编写一个功能完善、逻辑清晰的猜拳游戏。

游戏结构与核心逻辑

一个简单的猜拳游戏通常包含以下几个核心部分：

获取玩家选择： 通过 prompt() 函数获取玩家的输入，并进行规范化处理（例如，转换为小写）。
获取电脑选择： 电脑随机从 rock、paper、scissors 中选择一个。
判断胜负： 根据玩家和电脑的选择，判断胜负，并更新分数。
游戏循环： 重复以上步骤，直到游戏结束（例如，进行 5 轮）。
显示结果： 根据玩家和电脑的分数，显示最终结果。

改进的胜负判断逻辑

原代码中使用大量的 if...else if...else 语句来判断胜负，这使得代码冗长且难以维护。我们可以利用数组索引和模运算来简化胜负判断逻辑。

核心思想：

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

将 rock、paper、scissors 存储在一个数组中，然后通过比较玩家和电脑选择在数组中的索引来判断胜负。由于猜拳游戏存在循环克制关系 (Rock < Paper < Scissors < Rock)，可以使用模运算来处理循环的情况。

代码示例：

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())

登录后复制

代码解释：

美图设计室

5分钟在线高效完成平面设计，AI帮你做设计

查看详情

choices.indexOf(playerSelection) 和 choices.indexOf(computerSelection) 分别获取玩家和电脑选择在数组中的索引。
(choices.indexOf(playerSelection) - choices.indexOf(computerSelection)) 计算索引的差值。
+ 3 是为了确保差值为正数，以便进行模运算。
% 3 进行模运算，将差值限制在 0、1、2 之间。
=== 1 如果结果为 1，则表示玩家获胜。

改进的玩家选择逻辑

原代码没有对玩家的输入进行验证，如果玩家输入了无效的选择，程序会出错。我们可以使用 while 循环和 includes() 方法来确保玩家输入的选择是有效的。

代码示例：

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');
  }
}

登录后复制

代码解释：