Here’s my JS and HTML. I want to add the playGame()
function to my playground function to 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.
This is my code snippet.
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"
}
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<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">
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
<title>Rock Paper Scissors</title>
</head>
<body>
<div class="container">
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
</div>
<p id="result"></p>
</p>
</body>
</html>
Looking for guidance.
2
Answers
You’ve done a nice job.
There are lots of different ideas in this code – I hope you find it interesting and helpful.
A for loop (your current approach) won’t work for this because the interpreter will zoom through the code, not waiting for the user to press a button (technically, you could make it work using promises and async/await, but that is really confusing – especially for a new programmer).
Instead, make a variable called
currentRound
to store what round it is. Then, in yourplayRound
function, add code that checks ifcurrentRound > rounds
and then calculates winner.Here is an example program showing how to implement this (Note that it resets the game after calculating winner, but this is not necessary).