JavaScript实现石头剪刀布游戏循环失效及计分异常问题求助

核心错误点 #

• 玩家/电脑出拳的代码写在全局，只会在页面加载时执行1次，循环过程中一直复用首次的输入和电脑出拳值，每轮没有生成新的出拳，所以每次调用round函数都会命中同一个胜负逻辑，多次累加计数，这就是你玩1轮统计值变成3的核心原因
• for循环逻辑错误：你设置循环条件为i < 6，还在循环体里额外加了i++，加上for循环自带的i自增，每次循环i总共加2，实际只会执行3次循环，远达不到你要的5轮有效对局
• 缺少平局判断，无效输入的逻辑也没有做重试处理
• round函数的返回值逻辑混乱，平局场景没有处理

修正后完整代码 #

JavaScript 代码（game.js） #

let playerWins = 0;
let computerWins = 0;
let gameWinner;

function computerPlay() {
    const choice = Math.floor(Math.random() * 3) + 1;
    if (choice === 1) return "ROCK";
    if (choice === 2) return "PAPER";
    return "SCISSORS";
}
  
// 返回本轮结果：1玩家胜 2电脑胜 0平局 -1无效输入
function round(playerSelection, computerSelection) {
    const playerInput = playerSelection?.toUpperCase();
    // 先判断输入是否合法
    if (!["ROCK", "PAPER", "SCISSORS"].includes(playerInput)) {
        return -1;
    }
    // 判断平局
    if (playerInput === computerSelection) {
        return 0;
    }
    // 判断胜负
    const winConditions = [
        ["ROCK", "SCISSORS"],
        ["SCISSORS", "PAPER"],
        ["PAPER", "ROCK"]
    ];
    if (winConditions.some(item => item[0] === playerInput && item[1] === computerSelection)) {
        playerWins++;
        return 1;
    } else {
        computerWins++;
        return 2;
    }
}

function game(){   
    let validRound = 0;
    // 直到玩够5轮有效对局才停止
    while (validRound < 5) {
        // 每轮重新生成电脑出拳、获取用户输入
        const computerSelection = computerPlay();
        const playerSelection = prompt("请出拳：输入ROCK(石头)/PAPER(布)/SCISSORS(剪刀)");
        // 用户点取消直接终止游戏
        if (playerSelection === null) {
            gameWinner = "游戏已终止";
            return;
        }
        const res = round(playerSelection, computerSelection);
        if (res === -1) {
            alert("输入无效，请重新输入正确的出拳值");
        } else if (res === 0) {
            alert("本轮平局，重新开始本轮");
        } else {
            // 有效对局才计数+1
            validRound++;
            alert(`第${validRound}轮结束，当前比分 玩家:${playerWins} 电脑:${computerWins}`);
        }
    }

    if (playerWins > computerWins) {
        gameWinner = `你赢了！最终比分 ${playerWins} : ${computerWins}`;
    } else if (computerWins > playerWins) {
        gameWinner = `你输了！最终比分 ${playerWins} : ${computerWins}`;
    } else {
        gameWinner = `双方平局！最终比分 ${playerWins} : ${computerWins}`;
    }
}

game();
const message = document.querySelector('main');
message.innerHTML = `<h1>${gameWinner}</h1>`;

CSS代码（style.css） #

* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
}

HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<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">
    <link rel="stylesheet" href="style.css">
    <title>石头剪刀布</title>
</head>
<body>
  <main></main>
<script src="game.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user16597057