Here’s my JS and HTML. I am wondering how I can add the playGame function to my playRound function so I can include rounds. Also, I want to display the winner of the game after 5 rounds without having to click one of my rock, paper, scissors buttons.
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"
}
}
}
Looking for guidance.