We Keep Coding

use my 1 round code to make a 3 rounds "Rock Paper Scissors" game - Javascript

I'm building a rock paper scissors game with Javascript, i did a 1 round mode of the game and it work, now i want to add a second mode " best of three rounds" but after trying many things i got my code messy and can't figure out what to do exactly.
i try to add a count = 0; count < 3; count = count + 1but don't know exactly where to put it
can someone help me please?
var mode = prompt("Please press 1 for single game mode or 2 for best out of 3 mode");
if (mode === '1') {
oneRound;
}
if (mode === '2') {
bestOfThree;
}
// set Computer Choice
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
// Compare value for oneRound mode
var oneRound = function(computerChoice, userChoice) {
if (computerChoice === userChoice) {
return "The result is tie!";
}
if (computerChoice === "rock") {
if (userChoice === "scissors") {
return "Computer wins";
} else {
if (userChoice === "paper")
return "Player wins";
}
}
if (computerChoice === "paper") {
if (userChoice === "scissors") {
return "Computer wins";
} else {
if (userChoice === "rock")
return "Player wins";
}
}
if (computerChoice === "scissors") {
if (userChoice === "rock") {
return "Computer wins";
} else {
if (userChoice === "scissors")
return "Player wins";
}
}
};
console.log("Player Choice: " + userChoice);
console.log("Computer Choice: " + computerChoice);
console.log(oneRound(computerChoice, userChoice));

Have look at this
I use setTimeout to allow the screen to show the result
const play = () => {
// set Computer Choice
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Player Choice: " + userChoice);
console.log("Computer Choice: " + computerChoice);
if (computerChoice === userChoice) {
return "The result is tie!";
}
if (computerChoice === "rock") {
if (userChoice === "scissors") {
return "Computer wins";
} else {
if (userChoice === "paper")
return "Player wins";
}
}
if (computerChoice === "paper") {
if (userChoice === "scissors") {
return "Computer wins";
} else {
if (userChoice === "rock")
return "Player wins";
}
}
if (computerChoice === "scissors") {
if (userChoice === "rock") {
return "Computer wins";
} else {
if (userChoice === "scissors")
return "Player wins";
}
}
};
const round = () => {
const res = play();
console.log(res)
cnt--
wins[cnt] = res.startsWith("Player") ? 1 : 0;
if (cnt === 0) {
const total = wins.reduce((a, b) => a + b)
console.log(`You beat the computer ${total} time${total===1?"":"s"}`)
return
}
setTimeout(round, 10) // else go again
}
let cnt = 1,
wins = [];
const mode = prompt("Please press 1 for single game mode or 2 for best out of 3 mode");
if (mode === '2') {
cnt = 3;
}
round()

My Function For Rock, Paper, Scissors Is Not Working

I have a function that is suppose to determine the winner of game. For some reason, it will always print the first if statement, even if it is not correct
I have tried making them all if statements, changing the brackets, and I split all the else if statements up instead of having only 3 and nothing is working.
function getElem(id) {
return document.getElementById(id);
}
var rounds;
function startGame() {
rounds = getElem("ROUNDS_TO_PLAY");
rounds = parseInt(rounds.value);
document.roundsRemaining = rounds;
getElem("ROUNDS_REMAINING").value = rounds;
}
/* Responds to user choice button click. */
function userChoice(userButton) {
updateStats();
displayUserChoice(userButton);
var compChoice = getComputerChoice();
getElem("COMPUTER_CHOICE_OUTPUT").value = compChoice;
displayComputerChoice(compChoice);
}
function updateStats() {
rounds=document.roundsRemaining;
rounds--;
document.roundsRemaining = rounds;
getElem("ROUNDS_REMAINING").value = document.roundsRemaining;
if (document.roundsRemaining < 1) {
alert("Game over");
getElem("ROCK_CHOICE").disabled=true;
//alert(getWinner(userButton, compChoice));
}
//alert(getWinner());
alert (determineWinner());
}
function getComputerChoice() {
var r = Math.floor(Math.random() * 3)
switch (r) {
case 0: return "ROCK";
case 1: return "PAPER";
case 2: return "SCISSORS";
default: console.log(r + " is not a valid computer choice.");
}
}
function displayUserChoice(userButton) {
var uco = getElem("USER_CHOICE_OUTPUT");
if (userButton == "ROCK") {
uco.value = "ROCK";
} else if (userButton == "PAPER") {
uco.value = "PAPER";
} else if (userButton == "SCISSORS") {
uco.value = "SCISSORS";
} else {
conosole.log(userButton + " is invalid!!");
}
}
function determineWinner(userButton,compChoice) {
if (userButton === compChoice) {
return 'It\'s a tie!';
}
else if (userButton === "ROCK" && compChoice === "PAPER") {
return 'Computer wins!';
}
else if (userButton === 'PAPER' && compChoice === 'SCISSORS') {
return 'Computer wins!';
}
else if (userButton === 'SCISSORS' && compChoice === 'ROCK') {
return 'Computer wins!';
}
else if (userButton === 'PAPER' && compChoice === 'ROCK')
{
return 'You win!';
}
else if (userButton === 'SCISSORS' && compChoice === 'PAPER') {
return 'You win!';
}
else {
return 'You win!';
}
}
//Html seperate file
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="UTF-8">
<title>my game</title>
<script src="rsp.js" type="text/javascript"></script>
</head>
<body>
Rounds to Play: <input id="ROUNDS_TO_PLAY"><br>
<input type="button" id="START_GAME" value="Start!" onclick="startGame()">
Rounds Remaining: <input id="ROUNDS_REMAINING"><br><br><br>
<input type="button" id="ROCK_CHOICE" value="Rock" onclick="userChoice('ROCK')">
<input type="button" id="PAPER_CHOICE" value="Paper" onclick="userChoice('PAPER')">
<input type="button" id="SCISSORS_CHOICE" value="Scissors" onclick="userChoice('SCISSORS')">
<br>
User Chose: <input id="USER_CHOICE_OUTPUT" type="text" disabled="true"><br>
Computer Chose: <input id="COMPUTER_CHOICE_OUTPUT" type="text" disabled="true">
</body></html>
The output is suppose to show either computer wins, you win, or its a tie. It shows its a tie every single time.

function getElem(id) {
return document.getElementById(id);
}
function userChoice(userButton) {
displayUserChoice(userButton);
var compChoice = getComputerChoice();
getElem("COMPUTER_CHOICE_OUTPUT").value = compChoice;
updateStats();
}
function updateStats() {
console.log(determineWinner( (document.getElementById("USER_CHOICE_OUTPUT").value), (document.getElementById("COMPUTER_CHOICE_OUTPUT").value)));
}
function getComputerChoice() {
var r = Math.floor(Math.random() * 3)
switch (r) {
case 0: return "ROCK";
case 1: return "PAPER";
case 2: return "SCISSORS";
default: console.log(r + " is not a valid computer choice.");
}
}
function displayUserChoice(userButton) {
var uco = getElem("USER_CHOICE_OUTPUT");
if (userButton == "ROCK") {
uco.value = "ROCK";
} else if (userButton == "PAPER") {
uco.value = "PAPER";
} else if (userButton == "SCISSORS") {
uco.value = "SCISSORS";
} else {
conosole.log(userButton + " is invalid!!");
}
}
function determineWinner(userButton,compChoice) {
if (userButton === compChoice) {
return 'It\'s a tie!';
}
else if (userButton === "ROCK" && compChoice === "PAPER") {
return 'Computer wins!';
}
else if (userButton === 'PAPER' && compChoice === 'SCISSORS') {
return 'Computer wins!';
}
else if (userButton === 'SCISSORS' && compChoice === 'ROCK') {
return 'Computer wins!';
}
else if (userButton === 'PAPER' && compChoice === 'ROCK')
{
return 'You win!';
}
else if (userButton === 'SCISSORS' && compChoice === 'PAPER') {
return 'You win!';
}
else {
return 'You win!';
}
}
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="UTF-8">
<title>my game</title>
</head>
<body>
<input type="button" id="ROCK_CHOICE" value="Rock" onclick="userChoice('ROCK')">
<input type="button" id="PAPER_CHOICE" value="Paper" onclick="userChoice('PAPER')">
<input type="button" id="SCISSORS_CHOICE" value="Scissors" onclick="userChoice('SCISSORS')">
<br>
User Choice: <input id="USER_CHOICE_OUTPUT" type="text" disabled="true"><br>
Computer Chose: <input id="COMPUTER_CHOICE_OUTPUT" type="text" disabled="true">
</body></html>

How to make rock, paper, scissor game repeat?

Currently working on a class assignment, have my html and js files written. My main issue is that I am unable to have the computer grab a new random number thus it will only keep one pick (rock, paper, or scissor). I also tried to make sure the game doesn't last longer than 5 games but am having issues even attempting it.
My HTML: (including whats necessary only, still an ongoing project for class)
4 buttons, one for each pick, and one to compare the answer
<button onClick='choose("rock")'>
Rock
<img src="images/rock.jpg" width="100" height="100" alt="rock">
</button>
<button onClick='choose("paper")'>
Paper
<img src="images/paper.jpg" width="100" height="100" alt="paper">
</button>
<button onClick='choose("scissors")'>
Scissors
<img src="images/scissors.jpg" width="100" height="100" alt="scissprs">
</button>
<button onClick='compare(user, computerChoice)'>
Go!
</button>
<p id="result">Winner: </p>
<p id="playerscore">Player Score:</p>
<p id="computerscore">Computer Score: </p>
My JS: (intentionally left out conditions for all except one and some replaced with "...")
var user;
var choose = function(choice) {
user = choice;
}
var computerChoice = Math.random();
if(computerChoice < 0.34) {
computerChoice = "rock";
}
else if(computerChoice < 0.67) {
computerChoice = "paper";
}
else{
computerChoice = "scissors";
}
var playerscore = 0;
var computerscore = 0;
var game = 0;
var compare = function(choice1, choice2) {
else if(choice1 == "paper") {
if(choice2 == "rock") {
...
playerscore++;
game++;
document.getElementById("playerscore").innerHTML = playerscore;
} else {
document.getElementById("result").innerHTML = "Computer Wins on Scissors";
computerscore++;
game++;
document.getElementById("computerscore").innerHTML = computerscore;
}
}
}
};
So from here what can I do to make my webpage repeat this script until five games have been played? I tried using a do-while loop but kept coming up with a: compare not declared issue, and user not declared when I tried to put it all in one function called rockpaperscissors.

Here is your game (Completely working)
var playerscore = 0;
var computerscore = 0;
var userChoice;
var computerChoice;
function choose(choice) {
userChoice = choice;
}
function compMakeAchoice() {
computerChoice = Math.floor((Math.random() * 3) + 1);
alert(computerChoice);
if (computerChoice == 1) {
computerChoice = "rock";
} else if (computerChoice == 2) {
computerChoice = "paper";
} else if (computerChoice == 3) {
computerChoice = "scissors";
}
}
function compare() {
compMakeAchoice();
if ((computerChoice == "rock" && userChoice == "rock") || (computerChoice == "paper" && userChoice == "paper") || (computerChoice == "scissors" && userChoice == "scissors")) {
document.getElementById("result").innerHTML = "Winner: " + "No one won. Both chose " + userChoice;
} else if ((computerChoice == "rock" && userChoice == "paper") || (computerChoice == "paper" && userChoice == "scissors") || (computerChoice == "scissors" && userChoice == "rock")) {
playerscore++;
document.getElementById("playerscore").innerHTML = "Player Score: " + playerscore;
document.getElementById("result").innerHTML = "Winner: " + "You won (Your Choice:" + userChoice + " and Computer's choice:" + computerChoice + ")";
} else {
computerscore++;
document.getElementById("computerscore").innerHTML = "Computer Score: " + computerscore;
document.getElementById("result").innerHTML = "Winner: " + "Computer won (Your Choice:" + userChoice + " and Computer's choice:" + computerChoice + ")";
}
}
<button onClick='choose("rock")'>Rock</button>
<button onClick='choose("paper")'>Paper</button>
<button onClick='choose("scissors")'>Scissors</button>
<button onClick='compare()'>Go!</button>
<p id="result">Winner:</p>
<p id="playerscore">Player Score:</p>
<p id="computerscore">Computer Score:</p>

You could make a hidden div / input where you set set your value of variable "game". That way you are able to proof the Number of Game after a Game is done. if The Number is 5 you change your html from 4 buttons to "congratz" or whatever.

I can't figure out why the scoring isn't working in my rock, paper, scissors game

The game works fine except that the scores won't increment and my "referee" box isn't displaying the text I have assigned it based on the outcome.
I used an if else statement to randomly assign the computers choice and replace the image and set the computerChoice variable accordingly. I used and if elsee statement for the user input to assign the correct image and set the userChoice variable. I then used a separate nested set of if else statements to compare the computerCoice and userChoice Variable and output text in the referee box as well as ad 1 point to the winners score box but this part isn't working. Any Ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rock, Paper, Scissors!</title>
<style>
.clear {clear: both;}
.box {width: 160px; height: 150px; float: left; border: 4px solid #000;}
.wrap {width: 110px; float: left;}
.wrap input {width: 85px;}
form {width: 340px; margin: 20px auto 0 auto;}
</style>
<script>
var referee = document.getElementById('ref').value;
var userScore = document.getElementById('userScore').value;
var computerScore = document.getElementById('compScore').value;
userScore = 0;
computerScore = 0;
function startGame() {
var computerChoice = Math.random();
if (computerChoice >= 0 && computerChoice <= .33) {
computerChoice = "rock"
document.getElementById("compPic").src = "rock.jpg";
} else if (computerChoice >= .34 && computerChoice <= .66) {
computerChoice = "paper"
document.getElementById("compPic").src = "paper.jpg";
}else if (computerChoice >= .67 && computerChoice <= 1){
computerChoice = "scissors"
document.getElementById("compPic").src = "scissors.jpg";
};
var userChoice = document.getElementById('userChoice').value;
if (userChoice === "rock" || userChoice === "Rock") {
userChoice = "rock";
document.getElementById("userPic").src = "rock.jpg";
} else if (userChoice === "paper" || userChoice === "Paper") {
userChoice = "paper";
document.getElementById("userPic").src = "paper.jpg";
} else if (userChoice === "scissors" || userChoice === "Scissors") {
userChoice = "scissors";
document.getElementById("userPic").src = "scissors.jpg";
};
if (userChoice === computerChoice) {
referee = "Tie!";
}else if (userChoice === 'rock') {
if (computerChoice === 'paper') {
referee = 'Computer Wins!';
computerScore = ++computerScore;
} else if (computerChoice === 'scissors') {
referee = 'You Wins!';
userScore = ++userScore;
};
}else if (userChoice === 'paper') {
if (computerChoice === 'scissors') {
referee = 'Computer Wins!';
computerScore = ++computerScore;
} else if (computerChoice === 'rock') {
referee = 'You Wins!';
userScore = ++userScore;
};
}else if (userChoice === 'scissors') {
if (computerChoice === 'rock') {
referee = 'Computer Wins!';
computerScore = ++computerScore;
} else if (computerChoice === 'paper') {
referee = 'You Wins!';
userScore = ++userScore;
};
};
}
</script>
</head>
<body>
<form>
<div class="box"><img id="userPic" src="rps.jpg"></div>
<div class="box"><img id="compPic" src="rps.jpg"></div>
<br class="clear"><br>
<div class="wrap">
<label for="userScore">User Score:</label><br>
<input type="text" name="userScore" id="userScore" value="" readonly>
</div>
<div class="wrap">
<label for="ref">Referee:</label><br>
<input type="text" name="ref" id="ref" placeholder="Referee's Call..." value="" readonly>
</div>
<div class="wrap">
<label for="compScore">Computer Score:</label><br>
<input type="text" name="compScore" id="compScore" value="" readonly>
</div>
<br class="clear"><br>
<label for="userChoice">Choose Your Weapon:</label><br>
<input type="text" name="userChoice" id="userChoice" placeholder="Rock, Paper, or Scissors?">
<input type="button" value="Battle!" onclick="startGame()">
</form>
</body>
</html>

You must right user score to user score input field. Second you score will be reset on every game.. its not commutative.. I don't you want this or its missed by you for commutative.. define userScore = 0; computerScore = 0; before function definition.
Try This
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rock, Paper, Scissors!</title>
<style>
.clear {clear: both;}
.box {width: 160px; height: 150px; float: left; border: 4px solid #000;}
.wrap {width: 110px; float: left;}
.wrap input {width: 85px;}
form {width: 340px; margin: 20px auto 0 auto;}
</style>
<script>
//var referee = document.getElementById('ref').value;
//var userScore = document.getElementById('userScore').value;
//var computerScore = document.getElementById('compScore').value;
userScore = 0;
computerScore = 0;
function startGame() {
var computerChoice = Math.random();
if (computerChoice >= 0 && computerChoice <= .33) {
computerChoice = "rock"
//document.getElementById("compPic").src = "rock.jpg";
} else if (computerChoice >= .34 && computerChoice <= .66) {
computerChoice = "paper"
//document.getElementById("compPic").src = "paper.jpg";
}else if (computerChoice >= .67 && computerChoice <= 1){
computerChoice = "scissors"
//document.getElementById("compPic").src = "scissors.jpg";
};
var userChoice = document.getElementById('userChoice').value;
if (userChoice === "rock" || userChoice === "Rock") {
userChoice = "rock";
//document.getElementById("userPic").src = "rock.jpg";
} else if (userChoice === "paper" || userChoice === "Paper") {
userChoice = "paper";
// document.getElementById("userPic").src = "paper.jpg";
} else if (userChoice === "scissors" || userChoice === "Scissors") {
userChoice = "scissors";
// document.getElementById("userPic").src = "scissors.jpg";
};
if (userChoice === computerChoice) {
referee = "Tie!";
}else if (userChoice === 'rock') {
if (computerChoice === 'paper') {
referee = 'Computer Wins!';
computerScore = ++computerScore;
} else if (computerChoice === 'scissors') {
referee = 'You Wins!';
userScore = ++userScore;
};
}else if (userChoice === 'paper') {
if (computerChoice === 'scissors') {
referee = 'Computer Wins!';
computerScore = ++computerScore;
} else if (computerChoice === 'rock') {
referee = 'You Wins!';
userScore = ++userScore;
};
}else if (userChoice === 'scissors') {
if (computerChoice === 'rock') {
referee = 'Computer Wins!';
computerScore = ++computerScore;
} else if (computerChoice === 'paper') {
referee = 'You Wins!';
userScore = ++userScore;
};
};
document.getElementById('ref').value = referee;
document.getElementById('userScore').value = userScore;
document.getElementById('compScore').value =computerScore;
}
</script>
</head>
<body>
<form>
<div class="box"><img id="userPic" src="rps.jpg"></div>
<div class="box"><img id="compPic" src="rps.jpg"></div>
<br class="clear"><br>
<div class="wrap">
<label for="userScore">User Score:</label><br>
<input type="text" name="userScore" id="userScore" value="" readonly>
</div>
<div class="wrap">
<label for="ref">Referee:</label><br>
<input type="text" name="ref" id="ref" placeholder="Referee's Call..." value="" readonly>
</div>
<div class="wrap">
<label for="compScore">Computer Score:</label><br>
<input type="text" name="compScore" id="compScore" value="" readonly>
</div>
<br class="clear"><br>
<label for="userChoice">Choose Your Weapon:</label><br>
<input type="text" name="userChoice" id="userChoice" placeholder="Rock, Paper, or Scissors?">
<input type="button" value="Battle!" onclick="startGame()">
</form>
</body>
</html>

Javascript Rock, paper, scissors game. Whats wrong with my code?

I want the code to grab the value that the user has entered in the input field and pass it to a variable userChoice. I have no idea why this code isn't working and the only way to learn is to ask you guys.
HTML:
<h3> Choose your destiny !</h3>
<form>
<input type="text" id="form" />
<input type="button" id="button" value="Click Me!" onclick="clickMe();" />
</form>
JavaScript:
var computerChoice = Math.random();
var userChoice = "";
function clickMe() {
document.getElementById("form").value === userChoice;
}
if (computerChoice < 0.33) {
computerChoice = "rock";
};
if (computerChoice < 0.66) {
computerChoice = "paper";
};
if (computerChoice < 1) {
computerChoice = "scissors";
};
if (userChoice === "rock" && computerChoice === "rock") {
alert("It's a tie!");
} else if (userChoice === "rock" && computerChoice === "paper") {
alert("Computer Wins!");
} else if (userChoice === "rock" && computerChoice === "scissors") {
alert("You WIN!");
};
if (userChoice === "paper" && computerChoice === "rock") {
alert("You WIN!");
} else if (userChoice === "paper" && computerChoice === "paper") {
alert("It's a TIE!");
} else if (userChoice === "paper" && computerChoice === "scissors") {
alert("Computer Wins!");
};
if (userChoice === "scissors" && computerChoice === "rock") {
alert("Computer Wins!");
} else if (userChoice === "scissors" && computerChoice === "paper") {
alert("You WIN!");
} else if (userChoice === "scissors" && computerChoice === "scissors") {
alert("It's a TIE!");
};
Fiddle

Your function clickMe doesn't work like you'd expect I guess:
function clickMe() {
userChoice = document.getElementById("form").value;
// ... rest of your code goes inside clickMe
}
To assign a value to a variable you need a single =

Here is the simple way
<div id="Result"></div>
<div id="sellection">
Rock
Paper
Scissors
</div>
and the script is:
function result(users){
var choices = ["Rock","Paper","Scissors"];
var succesResult = "You Loose :(";
var machines = Math.floor((Math.random() * 3));
var dif = users-machines;
if(dif>0&&dif!=2||dif==-2){
succesResult = "You Win :)";
}else if(dif==0){
succesResult = "You Draw";
}
var resultText = "You Selected "+choices[users]+", Computer Selected "+choices[machines]+" and "+succesResult;
document.getElementById("Result").innerHTML = resultText;
}