JavaScript猜拳游戏计分器失效，如何整合game函数实现计数？

Hey there! Let's break down why your game function isn't playing nice with the browser version of your Rock Paper Scissors game, and fix it up properly.

The core issue with your original game function is that it uses a while loop—this works perfectly in the console (a synchronous environment), but in the browser, it'll completely block the event loop. That means the UI won't update, your buttons won't respond, and the game will freeze up entirely. Plus, your round function is now triggered by user button clicks, not being called repeatedly from a loop, so that approach just doesn't fit the browser's event-driven model.

Step 1: Ditch the while loop and add end-of-game checks to each round #

Instead of forcing a loop, we'll check if either player has hit 5 points after every round (right after updating the score). When someone reaches 5, we'll declare the winner, disable the game buttons, and add a reset option so users can play again.

Step 2: Updated Working Code #

Here's how to adjust your existing code to make it work seamlessly in the browser:

let playerScore = 0;
let computerScore = 0;

// Grab your DOM elements (make sure these match your HTML IDs)
const rock_btn = document.getElementById('rock-btn');
const paper_btn = document.getElementById('paper-btn');
const scissors_btn = document.getElementById('scissors-btn');
const userScore_span = document.getElementById('user-score');
const compScore_span = document.getElementById('comp-score');
const result_div = document.getElementById('result');

// Your existing computerPlay function (I assume you have this defined)
function computerPlay() {
  const choices = ['rock', 'paper', 'scissors'];
  return choices[Math.floor(Math.random() * choices.length)];
}

// Updated round function with end-of-game check
function round(playerSelection) {
  // If game is already over, ignore further clicks
  if (playerScore === 5 || computerScore === 5) return;

  let computerSelection = computerPlay();

  // Your original score and result logic (unchanged)
  if (playerSelection === 'rock' && computerSelection === 'scissors') {
    playerScore++;
    userScore_span.innerHTML = playerScore;
    result_div.innerHTML = 'You Win! Rock beats Scissors!';
  } else if (playerSelection === 'scissors' && computerSelection === 'rock') {
    computerScore++;
    compScore_span.innerHTML = computerScore;
    result_div.innerHTML = 'You Lose! Rock beats Scissors!';
  } else if(playerSelection === 'paper' && computerSelection === 'rock') {
    playerScore++;
    userScore_span.innerHTML = playerScore;
    result_div.innerHTML ='You Win! Paper beats Rock!';
  } else if (playerSelection === 'rock' && computerSelection === 'paper') {
    computerScore++;
    compScore_span.innerHTML = computerScore;
    result_div.innerHTML = 'You Lose! Paper beats Rock!';
  } else if (playerSelection === 'scissors' && computerSelection === 'paper') {
    playerScore++;
    userScore_span.innerHTML = playerScore;
    result_div.innerHTML ='You Win! Scissors beats Paper!';
  } else if (playerSelection === 'paper' && computerSelection === 'scissors') {
    computerScore++;
    compScore_span.innerHTML = computerScore;
    result_div.innerHTML = 'You Lose! Scissors beats Paper!';
  } else {
    result_div.innerHTML = 'A draw! Please play again!';
  }

  // Check if the game should end after this round
  checkGameEnd();
}

// New function to handle game end logic
function checkGameEnd() {
  if (playerScore === 5) {
    result_div.innerHTML = '<strong>Player Wins!!!</strong>';
    disableGameButtons();
    addResetButton();
  } else if (computerScore === 5) {
    result_div.innerHTML = '<strong>Computer Wins!!!</strong>';
    disableGameButtons();
    addResetButton();
  }
}

// Helper to disable buttons once the game ends
function disableGameButtons() {
  rock_btn.disabled = true;
  paper_btn.disabled = true;
  scissors_btn.disabled = true;
}

// Helper to add a reset button for new games
function addResetButton() {
  const resetBtn = document.createElement('button');
  resetBtn.textContent = 'Play Again';
  resetBtn.addEventListener('click', resetGame);
  result_div.appendChild(resetBtn);
}

// Reset game state to start fresh
function resetGame() {
  playerScore = 0;
  computerScore = 0;
  userScore_span.innerHTML = '0';
  compScore_span.innerHTML = '0';
  result_div.innerHTML = '';
  // Re-enable game buttons
  rock_btn.disabled = false;
  paper_btn.disabled = false;
  scissors_btn.disabled = false;
  // Remove the reset button
  const resetBtn = result_div.querySelector('button');
  if (resetBtn) resetBtn.remove();
}

// Your existing button event listeners
rock_btn.addEventListener('click', function(){ round('rock'); });
paper_btn.addEventListener('click', function(){ round('paper'); });
scissors_btn.addEventListener('click', function(){ round('scissors'); });

Step 3: Key Changes Explained #

• Removed the while loop: We now rely on user button clicks to trigger each round, which aligns with the browser's event-driven workflow.
• Added checkGameEnd(): This runs after every round to check if a player has reached 5 points.
• Disabled buttons on game end: Prevents users from clicking after the game is already decided.
• Added a reset function: Lets users start a new game without refreshing the page.

Why This Works #

In the browser, all interactions happen in response to events (like clicks). Your original while loop tried to force a synchronous flow, which breaks the browser's ability to update the UI or respond to user input. By checking the score after each user-initiated round, we stay within the browser's natural event loop and keep the game responsive.

内容的提问来源于stack exchange，提问作者J.Day