Odin项目Rock-Paper-Scissors游戏：逐轮展示结果实现咨询

这个需求完全可行，核心思路是把原来的一次性循环逻辑改成逐轮触发式交互，用变量追踪轮数和分数，配合按钮事件控制流程。以下是具体实现步骤：

1. 初始化全局状态变量 #

在JS脚本开头定义需要追踪的状态，用来记录当前轮次、分数和最大轮数：

let currentRound = 1;
let playerScore = 0;
let computerScore = 0;
const maxRounds = 5;
const resultDiv = document.getElementById('choice'); // 你已有的结果展示容器

2. 补充HTML交互元素 #

在页面中添加玩家选择输入框、提交按钮和下一轮按钮（下一轮按钮初始隐藏）：

<!-- 玩家选择区域 -->
<div class="player-input">
  <label for="player-choice">你的选择：</label>
  <input type="text" id="player-choice" placeholder="石头/剪刀/布">
  <button id="submit-choice">提交</button>
</div>
<!-- 下一轮按钮 -->
<button id="next-round" style="display: none;">开始下一轮</button>

3. 编写核心逻辑函数 #

电脑随机选择函数（保留你已有的实现即可） #

function getComputerChoice() {
  const choices = ['石头', '剪刀', '布'];
  return choices[Math.floor(Math.random() * choices.length)];
}

单轮对战与结果展示函数 #

这个函数负责处理单轮的胜负判断、分数更新和结果展示：

function playRound(playerSelection) {
  const computerSelection = getComputerChoice();
  let roundResult = '';

  // 胜负判断逻辑
  if (playerSelection === computerSelection) {
    roundResult = `第${currentRound}轮：平局！你和电脑都选了${playerSelection}`;
  } else if (
    (playerSelection === '石头' && computerSelection === '剪刀') ||
    (playerSelection === '剪刀' && computerSelection === '布') ||
    (playerSelection === '布' && computerSelection === '石头')
  ) {
    roundResult = `第${currentRound}轮：你赢了！${playerSelection}击败${computerSelection}`;
    playerScore++;
  } else {
    roundResult = `第${currentRound}轮：你输了！${computerSelection}击败${playerSelection}`;
    computerScore++;
  }

  // 更新页面展示
  resultDiv.innerHTML = `
    <p>${roundResult}</p>
    <p>当前比分：你 ${playerScore} - ${computerScore} 电脑</p>
  `;

  // 判断是否完成全部5轮
  if (currentRound === maxRounds) {
    // 展示最终结果
    let finalResult = '';
    if (playerScore > computerScore) finalResult = '恭喜！5轮结束你获胜！';
    else if (computerScore > playerScore) finalResult = '遗憾！5轮结束电脑获胜！';
    else finalResult = '5轮结束，双方平局！';
    
    resultDiv.innerHTML += `<h3>${finalResult}</h3>`;
    // 禁用后续操作
    document.getElementById('submit-choice').disabled = true;
    document.getElementById('next-round').style.display = 'none';
  } else {
    // 显示下一轮按钮，隐藏提交按钮
    document.getElementById('next-round').style.display = 'block';
    document.getElementById('submit-choice').style.display = 'none';
  }
}

4. 绑定事件监听 #

给按钮添加点击事件，控制流程推进：

// 提交选择按钮事件
document.getElementById('submit-choice').addEventListener('click', () => {
  const playerPick = document.getElementById('player-choice').value.trim();
  const validChoices = ['石头', '剪刀', '布'];
  
  // 验证输入合法性
  if (!validChoices.includes(playerPick)) {
    resultDiv.innerHTML = '<p>请输入正确选项：石头、剪刀或布！</p>';
    return;
  }

  // 执行本轮对战
  playRound(playerPick);
  // 清空输入框
  document.getElementById('player-choice').value = '';
});

// 下一轮按钮事件
document.getElementById('next-round').addEventListener('click', () => {
  currentRound++;
  // 切换回选择输入状态
  document.getElementById('next-round').style.display = 'none';
  document.getElementById('submit-choice').style.display = 'block';
  resultDiv.innerHTML += '<p>请输入你的下一轮选择：</p>';
});

5. 初始页面提示 #

页面加载时给用户初始引导：

window.onload = () => {
  resultDiv.innerHTML = '<p>欢迎开始石头剪刀布游戏，共5轮，请输入你的第一轮选择：</p>';
};

这样就能实现你想要的流程：玩家输入选择→页面展示本轮结果和分数→点击按钮进入下一轮，直到完成5轮。

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