Develop Reference

Rock, Paper, Scissors game in Javascript

I am making a Rock paper, and scissors game for the Odin project which is supposed to run in the console.
Currently, everything works fine until I implemented the function called game().
I assumed it would call the playRound() function until playerscore, or computerscore reached 5. but it is currently only working twice. It prompts once up top for playerSelection and prompts again for playerSelection within function game();
How could I get game() to run until either playerscore or computerscore reaches 5? And display result for each round?
let playerScore = 0;
let computerScore = 0;
function computerPlay() {
let choices = ['rock', 'paper', 'scissors']
return choices[Math.floor(Math.random() * choices.length)]
}
let computerSelection = computerPlay();
let playerSelection = prompt("Make your selection, Rock, paper or Scissors").toLowerCase();
function playRound(playerSelection, computerSelection){
if ((playerSelection == "rock" && computerSelection == "scissors") ||
(playerSelection == "scissors" && computerSelection == "paper") ||
(playerSelection == "paper" && computerSelection == "rock")){
playerScore++;
return ("You win! " + playerSelection + " beats " + computerSelection + ", the score is Player:" + playerScore + " Computer:" + computerScore);
} else if (playerSelection == computerSelection){
return "Draw!"
} else {
computerScore++
return ("You lose! " + computerSelection+ ", beats " + playerSelection + " the score is Player:" + playerScore + " Computer:" + computerScore)
}
}
function game(){
if (playerScore < 5 && computerScore < 5) {
let playerSelection = prompt("Make your selection, Rock, paper or Scissors").toLowerCase();
playRound(playerSelection, computerSelection)
}
}
game();
console.log(playRound(playerSelection,computerSelection));

How do add a reset button to a Rock Paper Scissors game?

I'm learning JavaScript and having an issue trying to make a reset button for my game.
Im assuming the way I have coded it has scope tripping me up. any pointers would help immensely.
I have tried but the best i managed was to make the current score say 0 upon clicking the button, but if rock, paper or scissors were selected again, the score would jump straight back to where it was before + the result of the current round.
here is my code:
let userScore = 0;
let computerScore = 0;
let choice = document.querySelector("#selections");
choice.addEventListener("click", event => {
if (event.target.nodeName == "BUTTON") {
let playerSelecion = (event.target.textContent);
let computerSelection = getCompChoice();
document.getElementById("player").innerHTML = playerSelecion;
document.getElementById("computer").innerHTML = computerSelection;
playRound(playerSelecion, computerSelection);
}
});
function playRound(playerSelecion, computerSelection) {
if (playerSelecion === computerSelection) {
document.getElementById("currentRound").innerHTML = ("tie");
} else if (playerSelecion === "rock" && computerSelection === "scissors") {
userScore++;
document.getElementById("currentRound").innerHTML = ("you win rock beats scissors");
} else if (playerSelecion === "paper" && computerSelection === "rock") {
userScore++
document.getElementById("currentRound").innerHTML = ("you win paper beats rock")
} else if (playerSelecion === "scissors" && computerSelection === "paper") {
userScore++
document.getElementById("currentRound").innerHTML = ("you win scissors beats paper")
} else if (playerSelecion === "paper" && computerSelection === "scissors") {
computerScore++
document.getElementById("currentRound").innerHTML = ("you lose scissors beats paper")
} else if (playerSelecion === "rock" && computerSelection === "paper") {
computerScore++
document.getElementById("currentRound").innerHTML = ("you lose paper beats rock")
} else if (playerSelecion === "scissors" && computerSelection === "rock") {
computerScore++
document.getElementById("currentRound").innerHTML = ("you lose rock beats scissors")
} if (userScore >= 5) {
document.getElementById("result").innerHTML = "You win";
} else if (computerScore >= 5) {
document.getElementById("result").innerHTML = "Computer wins";
}
document.getElementById("userScore").innerHTML = userScore;
document.getElementById("compScore").innerHTML = computerScore;
}
function getCompChoice() {
let a = Math.random();
if (a < 0.34) {
return "rock";
} else if (a <= 0.67) {
return "paper";
} else {
return "scissors";
}
}```

To avoid the previous results to be added with the new score, the scores should be set to 0 in your reset button too.
//create a reset button
<button onclick="resetScore()"> Reset The Game </button>
//reset function
const reset = () => {
useScore = 0;
computerScore = 0;
document.querySelector("#userScore").innerHTML = userScore;
document.querySelector("#compScore").innerHTML = computerScore;
}

I think you want a reset button in your game that should set user and comp score to "0".
You can make a button and add some reset code to that so that when someone clicks on the button the game will reset the user and comp score to "0":
//adding a reset button
<button onclick="reset()">Reset</button>//remember to put () here
//normal function
function reset(){
document.getElementById("userScore").innerHTML = 0;
document.getElementById("compScore").innerHTML = 0;
}
//with arrow function
let reset=()=>{
document.getElementById("userScore").innerHTML = 0;
document.getElementById("compScore").innerHTML = 0;
}

Rock Paper Scissors Javascript (The Odin Project)

Hello everyone this is my first question here so sorry if it doesn't match all the rules. I am trying to make a rock paper scissors game from the Odin Project in javascript, and I'm having problem with the result output because it doesn't display what it should. If computer plays rock for e. and i play rock i should get it's a draw but i get something random all the time. Current code is with prompt() for user input, but I tried putting a fixed string like "paper" and it was the same, I also thought it was because I didn't put toLowerCase() properly so I removed it completely and it's still the same, I would appreciate your help!
function computerPlay() {
let rps = ["rock", "paper", "scissors"];
let random = rps[Math.floor(Math.random() * rps.length)];
return random;
}
console.log(computerPlay());
function playRound(playerSelection, computerSelection) {
if (playerSelection === computerSelection) {
return ("It's a draw!");
} else if ((playerSelection === "rock") && (computerSelection === "scissors")) {
return ("You win! Rock beats scissors");
} else if (playerSelection === "rock" && computerSelection === "paper") {
return ("You lose! Paper beats rock");
} else if (playerSelection === "paper" && computerSelection === "rock") {
return ("You win! Paper beats rock");
} else if (playerSelection === "paper" && computerSelection === "scissors") {
return ("You lose! Scissors beat paper");
} else if (playerSelection === "scissors" && computerSelection === "paper") {
return ("You win! Scissors beat paper");
} else if (playerSelection === "scissors" && computerSelection === "rock") {
return ("You lose!Rock beats scissors");
}
}
let computerSelection = computerPlay();
let playerSelection = prompt("Choose your weapon");
console.log(playRound(playerSelection, computerSelection));

You first console.log the function computerPlay() and that returns a certain value. After that you play the round and calls again the function computerPlay(), this computes the round with another value than you first console.log.
Try this code below
function computerPlay() {
let rps = ["rock", "paper", "scissors"];
let random = rps[Math.floor(Math.random() * rps.length)];
return random;
}
function playRound(playerSelection, computerSelection) {
if (playerSelection === computerSelection) {
return ("It's a draw!");
} else if ((playerSelection === "rock") && (computerSelection === "scissors")) {
return ("You win! Rock beats scissors");
} else if (playerSelection === "rock" && computerSelection === "paper") {
return ("You lose! Paper beats rock");
} else if (playerSelection === "paper" && computerSelection === "rock") {
return ("You win! Paper beats rock");
} else if (playerSelection === "paper" && computerSelection === "scissors") {
return ("You lose! Scissors beat paper");
} else if (playerSelection === "scissors" && computerSelection === "paper") {
return ("You win! Scissors beat paper");
} else if (playerSelection === "scissors" && computerSelection === "rock") {
return ("You lose!Rock beats scissors");
}
}
let computerSelection = computerPlay();
let playerSelection = prompt("Choose your weapon");
console.log(computerSelection)
console.log(playRound(playerSelection, computerSelection));

You can simplify your conditions in this way
const choices = ["Rock", "Paper", "Scissors"]
const computerPlay = () => choices[Math.floor(Math.random() * choices.length)]
function playRound(playerSelection, computerSelection) {
const difference = (choices.length + choices.indexOf(playerSelection) - choices.indexOf(computerSelection) )% choices.length
switch(difference){
case 0:
return "It's a draw!"
case 2:
return `You lose! ${computerSelection} beats ${playerSelection}`
default:
return `You win! ${playerSelection} beats ${computerSelection}`
}
}
let computerSelection = computerPlay();
let playerSelection
while(!choices.includes(playerSelection)){
const selected = prompt("Choose your weapon").trim().toLowerCase();
playerSelection = selected[0].toUpperCase()+selected.slice(1)
}
console.log(playRound(playerSelection, computerSelection));

Can't seem to figure out how to keep score in Rock, Paper, Scissors

I am trying to make Rock, Paper, Scissors via The Odin Project, and I'm stuck in the last step. I don't seem to have trouble getting the prompt to work, just can't seem to either tally up points, or I'm having trouble ending the game when either the player or computer gets to 5 points. I did include some console.logs at the bottom, but I'm unable to actually see the score due to the endless prompts. What am I doing wrong? I just need the game to end when either the player or computer gets to 5 points.
let playerScore = 0;
let computerScore = 0;
function computerPlay() {
let allChoices = ["Rock", "Paper", "Scissors"];
let randomChoice = allChoices[Math.floor(Math.random() * allChoices.length)];
return randomChoice
}
function game() {
while (playerScore <= 5 || computerScore <= 5) {
const playerSelection = prompt("Would you like to choose R, P or S?")
const computerSelection = computerPlay();
alert(playRound(playerSelection, computerSelection));
}
}
function playRound(playerSelection, computerSelection) {
if (playerSelection == computerSelection) {
return "Tie game!"
} else if (playerSelection == "Rock" && computerSelection == "Scissors") {
return `You win! ${playerSelection} beats ${computerSelection}!`
playerScore += 1;
} else if (playerSelection == "Paper" && computerSelection == "Rock") {
return `You win! ${playerSelection} beats ${computerSelection}!`
playerScore += 1;
} else if (playerSelection == "Scissors" && computerSelection == "Paper") {
return `You win! ${playerSelection} beats ${computerSelection}!`
playerScore += 1;
} else {
return `You lose! ${computerSelection} beats ${playerSelection}`
computerScore += 1;
}
}
function winGame() {
if (playerScore == 5) {
return "You win!"
} else if (computerScore == 5) {
return "You lose!"
}
}
game();
console.log(playerScore);
console.log(computerScore);

function game() {
while (playerScore < 5 && computerScore < 5) {
const playerSelection = prompt("Would you like to choose Rock, Paper or Scissors?")
const computerSelection = computerPlay();
alert(playRound(playerSelection, computerSelection));
}
}
function playRound(playerSelection, computerSelection) {
if (playerSelection === computerSelection) {
return "Tie game!"
} else if (playerSelection === "Rock" && computerSelection === "Scissors") {
playerScore += 1;
return `You win! ${playerSelection} beats ${computerSelection}!`
} else if (playerSelection === "Paper" && computerSelection === "Rock") {
playerScore += 1;
return `You win! ${playerSelection} beats ${computerSelection}!`
} else if (playerSelection === "Scissors" && computerSelection === "Paper") {
playerScore += 1;
return `You win! ${playerSelection} beats ${computerSelection}!`
} else {
computerScore += 1;
return `You lose! ${computerSelection} beats ${playerSelection}`
}
}
You returned from the function before incrementing the points. So they will never be incremented. Also (playerScore <= 5 || computerScore <= 5) means, that the game will go on until both - playerScore and computerScore are below 6. It has to stop when one of them reaches 5

Rock, Paper, Scissors Game shows both win and lose messages

I'm currently working through a Rock, Paper, Scissors project that plays out in the console (this is for The Odin Project, front end coming soon).
Here is what my script looks like for reference:
<script>
function computerPlay() {
const choice = ["Rock", "Paper", "Scissors"]
return choice[Math.floor(Math.random() * choice.length)]
}
function play(playerSelection, computerSelection) {
const lose = console.log('You lose! ' + computerSelection + ' beats ' + playerSelection + '!')
const win = console.log('You win! ' + playerSelection + ' beats ' + computerSelection + '!')
if (playerSelection === computerSelection) {
return console.log("It's a draw! Try again!")
}
if (playerSelection === "rock" && computerSelection === "Paper") {
return lose
}
if (playerSelection === "rock" && computerSelection === "Scissors") {
return win
}
if (playerSelection === "paper" && computerSelection === "Scissors") {
return lose
}
if (playerSelection === "paper" && computerSelection === "Rock") {
return win
}
if (playerSelection === "scissors" && computerSelection === "Rock") {
return lose
}
if (playerSelection === "scissors" && computerSelection === "Paper") {
return win
}
}
function game() {
playerSelect = prompt("Welcome to Rock, Paper, Scissors! Which one do you choose? \n")
compSelect = computerPlay()
console.log("Player chose " + playerSelect)
console.log("Computer chose " + compSelect)
console.log(play(playerSelect, compSelect))
}
</script>
Right now my output is showing both the win and lose conditions for any given choice like this:
Player chose rock
Computer chose Rock
You lose! Rock beats rock!
You win! rock beats Rock!
I chose to keep the win and lose messages in variables but I know I probably screwed some small detail up there. I've tried adding/removing the if else statements but both messages still show up no matter what choice.
I'm planning on making either choice case insensitive until I solve this error.
Any help would be appreciated, thanks!:

When you are calling your console.log at the beginning of the script, you are not saving them for later, you are running them and assigning their return value to a variable. What you could do is have a win and a lose variable that are function and then call them when the player is winning/loosing.
function computerPlay() {
const choice = ["Rock", "Paper", "Scissors"];
return choice[Math.floor(Math.random() * choice.length)];
}
function play(playerSelection, computerSelection) {
// we are storing a function into the win and lose variable.
const lose = () => console.log('You lose! ' + computerSelection + ' beats ' + playerSelection + '!');
const win = () => console.log('You win! ' + playerSelection + ' beats ' + computerSelection + '!');
if (playerSelection === computerSelection) {
return console.log("It's a draw! Try again!")
}
if (playerSelection === "rock" && computerSelection === "Paper") {
return lose()
}
if (playerSelection === "rock" && computerSelection === "Scissors") {
return win()
}
if (playerSelection === "paper" && computerSelection === "Scissors") {
return lose()
}
if (playerSelection === "paper" && computerSelection === "Rock") {
return win()
}
if (playerSelection === "scissors" && computerSelection === "Rock") {
return lose()
}
if (playerSelection === "scissors" && computerSelection === "Paper") {
return win()
}
}
function game() {
playerSelect = 'rock';
compSelect = computerPlay();
console.log("Player chose " + playerSelect);
console.log("Computer chose " + compSelect);
// You don't need to console.log the return value of a console.log
play(playerSelect, compSelect);
}
game();

Try changing your lose and win variables to their string values instead of console.log("/message/").
Your lose and win variable declarations are already printing their messages instead of storing them, since your code calls an instance of console.log().
That way, when you return either win or lose, your console.log(play(playerSelect, compSelect)) will receive a string, and then print it.