本文旨在帮助开发者构建一个基于浏览器的 JavaScript 猜拳游戏，并解决计分逻辑问题。我们将提供清晰的代码示例，并深入探讨如何使用数组索引和模运算来简化胜负判断。通过本文，你将掌握如何编写一个功能完善、逻辑清晰的猜拳游戏。
游戏结构与核心逻辑
一个简单的猜拳游戏通常包含以下几个核心部分：
- 获取玩家选择： 通过 prompt() 函数获取玩家的输入，并进行规范化处理（例如，转换为小写）。
- 获取电脑选择： 电脑随机从 rock、paper、scissors 中选择一个。
- 判断胜负： 根据玩家和电脑的选择，判断胜负，并更新分数。
- 游戏循环： 重复以上步骤，直到游戏结束（例如，进行 5 轮）。
- 显示结果： 根据玩家和电脑的分数，显示最终结果。
改进的胜负判断逻辑
原代码中使用大量的 if...else if...else 语句来判断胜负，这使得代码冗长且难以维护。我们可以利用数组索引和模运算来简化胜负判断逻辑。
核心思想：
立即学习“Java免费学习笔记（深入）”；
将 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())代码解释：
- 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');
}
}代码解释：
- while(true) 创建一个无限循环，直到玩家输入有效的选择。
- choices.includes(choice) 检查玩家输入的选择是否在 choices 数组中。
- 如果玩家输入的选择是有效的，则 return choice 退出循环。
- 如果玩家输入的选择是无效的，则 console.log('Invalid choice, please try again') 提示玩家重新输入。
总结与注意事项
通过使用数组索引和模运算，我们成功地简化了猜拳游戏的胜负判断逻辑。同时，通过添加输入验证，提高了程序的健壮性。
注意事项：
- 确保玩家输入的选择转换为小写，以便进行比较。
- 可以使用不同的方式来获取玩家的输入，例如，使用 HTML 按钮。
- 可以根据需要修改游戏规则，例如，增加游戏轮数或改变胜负条件。
- 可以添加更多的用户界面元素，例如，显示玩家和电脑的选择、显示当前分数等。
希望本文能够帮助你构建一个功能完善、逻辑清晰的 JavaScript 猜拳游戏。通过学习本文，你将能够更好地理解 JavaScript 数组、函数和控制流等基本概念，并将其应用到实际项目中。
