石头剪刀布游戏 - 寻找添加回合和 DOM 的指导

Question

这是我的 JS 和 HTML。我想知道如何将 playGame 函数添加到我的 playRound 函数中，以便我可以包含回合。另外，我想在 5 轮后显示游戏的获胜者，而不必单击我的石头、剪刀、布按钮之一。

https://codepen.io/Reginald86/pen/GRLjpYZ

const rock = document.querySelector("#rock").addEventListener("click", function () {
let result = playRound("rock", getComputerChoice());
console.log(result);
});

const scissors = document.querySelector("#scissors").addEventListener("click", function () {
let result = playRound("scissors", getComputerChoice());
console.log(result);
});

const paper = document.querySelector("#paper").addEventListener("click", function () {
let result = playRound("paper", getComputerChoice());
console.log(result);
});



function getComputerChoice(){
  const choices = ["rock", "paper", "scissors"];
  let computerChoice = choices[Math.floor(Math.random() * 3)];
  return computerChoice;
}

const rounds = 5;
let playerScore = 0;
let computerScore = 0;

function playRound(playerSelection, computerSelection) {


  if(playerSelection === computerSelection) {
    return "It's a tie";
  } else if (
    (playerSelection === "rock" && computerSelection === "scissors") ||
    (playerSelection === "paper" && computerSelection === "rock") ||
    (playerSelection === "scissors" && computerSelection === "paper")
  )  {
    playerScore++;
    return `Player wins! ${playerSelection} beats ${computerSelection}`;
  } else {
    computerScore++;
    return `Computer wins! ${computerSelection} beats ${playerSelection}`;
  }
}


function playGame(){
  for(let i = 0; i < rounds; i++){
    if (playerScore > computerScore) {
    return "Player wins the game";
  } else if (computerScore > playerScore) {
     return "Computer wins the game"
    } else {
      return "Game ends in a tie"
    }
  }
}

寻求指导。

Answer 1

你做得很好。

这段代码中有很多不同的想法 - 我希望你觉得它有趣且有帮助。

// Play until either the computer or player wins 3 rounds
const MAX_ROUNDS = 3;

// Translation text to digit
const TEXT_TO_INT = {
  rock: 0,
  paper: 1,
  scissors: 2
};

// Set up the outcome determination using a two-dimensional array 
// Using a single character would save space, but this is easier to work with
const COMPUTER = 'computer';
const PLAYER = 'player';
const TIE = '(tie)';

// Row is computer's choice, column is player's choice
// OUTCOME[1,2] means computer chose paper, player chose scissors
const OUTCOME = [
  [TIE, PLAYER, COMPUTER],
  [COMPUTER, TIE, PLAYER],
  [PLAYER, COMPUTER, TIE]
];

function determineWinner(computer, player) {
  return OUTCOME[computer][player];
}

const ROCK = document.getElementById("rock");
const PAPER = document.getElementById("paper");
const SCISSORS = document.getElementById("scissors");
const RESULT = document.getElementById("result");
const BUTTONS = document.getElementById("buttons");

// The score is stored as an object
const score = {
  'computer': 0,
  'player': 0
}

// Use a single function to handle all the button clicks
function clickHandler(e) {
  // Get the computer's choice
  const computer = Math.floor(Math.random() * 3);

  // Get the players choice from the button id
  // Translate the player's choice from text to integer
  const player = TEXT_TO_INT[e.target.id];

  const result = determineWinner(computer, player);

  RESULT.textContent = result;
  // If the outcome is a tie, ignore it
  if (result !== TIE) {
    // Update the result display and increment the score of the winner
    document.getElementById(result).textContent = ++score[result];
    if (score.computer >= MAX_ROUNDS || score.player >= MAX_ROUNDS) {
      // The most recent result indicates the winner
      RESULT.textContent = `Game over ${result} wins!`;
      // Remove the event handler to end the game
      BUTTONS.removeEventListener("click", clickHandler);
    }
  }
}

// Handle game play
BUTTONS.addEventListener("click", clickHandler);

<div id="buttons">
  <button id="rock">Rock</button>
  <button id="paper">Paper</button>
  <button id="scissors">Scissors</button>
</div>
<label for="result">Result</label> <output id="result"></output><br>

<label for="computer">Computer wins</label> <output id="computer"></output><br>
<label for="player">Player wins</label> <output id="player"></output><br>