RPS石头剪刀布游戏结果、计分板无法显示问题修复

错误定位 #

• 变量不统一/作用域错误
  • 点击事件中给玩家选择赋值用的变量名是userChoice，胜负判断逻辑中读取的是未赋值的PlayerChoice，导致玩家出拳值永远为undefined，胜负判定完全失效
  • 玩家分数、电脑分数定义在getResult()函数内部，每次触发判定都会被重置为0，无法实现累计计分
  • 禁用按钮函数中引用的buttons变量不存在，实际存储按钮集合的变量名为possibleChoices，触发游戏结束逻辑时会直接报JS错误
• 逻辑写法错误
  • 分数累加写法=+1等价于直接给变量赋值为1，无法实现分数递增，正确累加写法为+=1
  • 胜负分支逻辑缺失：未处理平局场景，且玩家获胜后只要分数没到5分，就会走入else分支错误给电脑加1分
• HTML结构错误
  • 页面缺少<body>开标签，DOM结构不规范可能导致元素渲染异常，初始分数未设置默认值，页面加载时计分板为空

修复后完整代码 #

HTML 部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>石头剪刀布游戏</title>
</head>
<body>
<h2>Computer-choice:<span id="computer-choice"></span></h2>
<h2>User choice:<span id="user-choice"></span></h2>
<h2>Result:<span id="Result"></span></h2>
<h2>Computer score:<span id="Computer-Score">0</span></h2>
<h2>Player score:<span id="Player-Score">0</span></h2>

<button id="rock">rock</button>
<button id="paper">paper</button>
<button id="scissors">scissors</button>

<script src="RPSreload.js"></script>
</body>
</html>

JavaScript 部分 #

const computerChoiceDisplay = document.getElementById(`computer-choice`)
const userChoiceDisplay = document.getElementById(`user-choice`)
const possibleChoices= document.querySelectorAll(`button`)
const playerScoreDisplay= document.getElementById('Player-Score')
const computerScoreDisplay= document.getElementById('Computer-Score')
const displayResult= document.getElementById('Result')

// 分数、选择变量提升到全局作用域，避免每次函数调用重置
let userChoice
let computerChoice
let ComputerScore = 0;
let PlayerScore = 0;

possibleChoices.forEach(possibleChoice => possibleChoice.addEventListener(`click`, (e) =>{
    userChoice = e.target.id
    userChoiceDisplay.innerHTML = userChoice
    computerPlay()
    getResult();
}));
   
function computerPlay(){
    const randomNumber = Math.floor(Math.random() * 3) + 1
    if (randomNumber === 1){
        computerChoice = 'rock'
    } 
    if (randomNumber === 2){
        computerChoice = 'paper'
    }
    if (randomNumber === 3){
        computerChoice = 'scissors'
    }
    computerChoiceDisplay.innerHTML = computerChoice;
}

function getResult(){
    let result = ""
    // 判定平局
    if(userChoice === computerChoice){
        result = 'Draw!'
    }
    // 判定玩家获胜
    else if((userChoice ==='rock' && computerChoice==='scissors') ||
    (userChoice ==='scissors'&& computerChoice==='paper') ||
    (userChoice ==='paper' && computerChoice==='rock')){
        PlayerScore += 1
        result = 'You win!'
        // 玩家达到5分判定全局获胜
        if(PlayerScore == 5){
            result='You won the game!';
            disableButtons()
        }
    }
    // 其余场景为电脑获胜
    else{
        ComputerScore += 1
        result = 'Computer wins!'
        // 电脑达到5分判定全局获胜
        if(ComputerScore == 5){
            result='The computer has won!'
            disableButtons();
        }
    }

    displayResult.innerHTML = result;
    computerScoreDisplay.innerHTML = ComputerScore;
    playerScoreDisplay.innerHTML = PlayerScore;
}

function disableButtons() {
    // 修正变量名引用，匹配实际存储按钮集合的变量
    possibleChoices.forEach(elem => {
        elem.disabled = true
    })
}

内容的提问来源于stack exchange，提问作者Victor Mihail Galeriu