Rock, paper, scissors game - repeating for 5 rounds - javascript

I am building the rock, paper scissors task. At the minute my code only works for 1 round. I'm unsure about how I would get this to keep the score, whilst repeating for 5 rounds. I'm under the impression i will need a for loop at least for the rounds, along the lines of:
for(i=0; i<5;i++);
but i don't know where to slot it into my code. I've looked around online, and i cant find a simple enough to understand resource that doesn't start using switch methods or any other more advanced code to build the game. Any help would be appreciated. Thanks.
function computerPlay() {
let random = Math.random();
if (random <= 0.3333) {
return "paper";
} else if (random >= 0.6666) {
return "rock";
} else {
return "scissors";
}
}
function playRound(playerSelection, computerSelection) {
if (playerSelection.toLowerCase() === "rock") {
if (computerSelection === "paper") {
computerScore++;
return lose;
} else if (computerSelection === "rock") {
return tie;
} else {
userScore++;
return win;
}
}
if (playerSelection.toLowerCase() === "scissors") {
if (computerSelection === "paper") {
userScore++;
return win;
} else if (computerSelection === "rock") {
computerScore++;
return lose;
} else {
return tie;
}
}
if (playerSelection.toLowerCase() === "paper") {
if (computerSelection === "paper") {
return tie;
} else if (computerSelection === "rock") {
userScore++;
return win;
} else {
computerScore++;
return lose;
}
}
}
let userScore = parseInt(0);
let computerScore = parseInt(0);
let win = "You win"
let lose = "You lose"
let tie = "It is a tie"
let playerSelection = prompt("Pick a move");
const computerSelection = computerPlay()
console.log(playRound(playerSelection, computerSelection))
console.log("your score = " + userScore);
console.log("Computer's score = " + computerScore);

I have edited your code snipet little bit hope it will fulfill your need :)
just put below code into the for loop
let playerSelection = prompt("Pick a move");
const computerSelection = computerPlay()
console.log(playRound(playerSelection, computerSelection))
console.log("your score = " + userScore);
console.log("Computer's score = " + computerScore);
function computerPlay() {
let random = Math.random();
if (random <= 0.3333) {
return "paper";
} else if (random >= 0.6666) {
return "rock";
} else {
return "scissors";
}
}
function playRound(playerSelection, computerSelection) {
if (playerSelection.toLowerCase() === "rock") {
if (computerSelection === "paper") {
computerScore++;
return lose;
} else if (computerSelection === "rock") {
return tie;
} else {
userScore++;
return win;
}
}
if (playerSelection.toLowerCase() === "scissors") {
if (computerSelection === "paper") {
userScore++;
return win;
} else if (computerSelection === "rock") {
computerScore++;
return lose;
} else {
return tie;
}
}
if (playerSelection.toLowerCase() === "paper") {
if (computerSelection === "paper") {
return tie;
} else if (computerSelection === "rock") {
userScore++;
return win;
} else {
computerScore++;
return lose;
}
}
}
let userScore = parseInt(0);
let computerScore = parseInt(0);
let win = "You win"
let lose = "You lose"
let tie = "It is a tie"
for(var i=0;i<5;i++){
let playerSelection = prompt("Pick a move");
const computerSelection = computerPlay()
console.log(playRound(playerSelection, computerSelection))
console.log("your score = " + userScore);
console.log("Computer's score = " + computerScore);
}

Try below code:
Looping is not a good approach, read here:
Recursion vs loops
https://www.refactoring.com/catalog/replaceIterationWithRecursion.html
It allows the user to play for 5 times.
Using recursion:
function computerPlay() {
let random = Math.random();
if (random <= 0.3333) {
return "paper";
} else if (random >= 0.6666) {
return "rock";
} else {
return "scissors";
}
}
function playRound(playerSelection, computerSelection) {
if (playerSelection.toLowerCase() === "rock") {
if (computerSelection === "paper") {
computerScore++;
return lose;
} else if (computerSelection === "rock") {
return tie;
} else {
userScore++;
return win;
}
}
if (playerSelection.toLowerCase() === "scissors") {
if (computerSelection === "paper") {
userScore++;
return win;
} else if (computerSelection === "rock") {
computerScore++;
return lose;
} else {
return tie;
}
}
if (playerSelection.toLowerCase() === "paper") {
if (computerSelection === "paper") {
return tie;
} else if (computerSelection === "rock") {
userScore++;
return win;
} else {
computerScore++;
return lose;
}
}
}
let userScore = parseInt(0);
let computerScore = parseInt(0);
let win = "You win"
let lose = "You lose"
let tie = "It is a tie"
var i = 0;
const play = () => {
let playerSelection = prompt("Pick a move");
const computerSelection = computerPlay()
console.log(playRound(playerSelection, computerSelection))
console.log("your score = " + userScore);
console.log("Computer's score = " + computerScore);
i++;
if (i !== 5) {
play();
} else {
alert("Game Over=> User("+userScore+") vs Computer("+computerScore+")");
}
}
play();

Related

How to change value of outer variable using a inner function?

In following code, the outer variables playerScore and computerScore are not updated when I use the function calcScore? How do I update it, using a function? From what I understand, it is possible to change the value of the outer variable from an inner scope, but why does it not work here?
<script>
function playRound(playerSelection, computerSelection) {
playerSelection = playerSelection.toLowerCase();
computerSelection = computerSelection.toLowerCase();
if (playerSelection === computerSelection) {
return "draw";
}
else if (playerSelection === "rock"){
if (computerSelection === "scissors") return "win";
else if (computerSelection === "paper") return "lose";
}
else if (playerSelection === "paper"){
if (computerSelection === "scissors") return "lose";
else if (computerSelection === "rock") return "win";
}
else if (playerSelection === "scissors"){
if (computerSelection === "rock") return "lose";
else if (computerSelection === "paper") return "win";
}
}
function computerSelection() {
let selection = ["rock", "paper", "scissors"];
return selection[Math.floor(Math.random() * selection.length)];
}
function calcScore(result, playerScore, computerScore) {
if (result === "win") {
playerScore += 1;
console.log("win");
}
else if (result === "lose") {
computerScore += 1;
console.log("lose");
}
else if (result === "draw") {
playerScore += 1;
computerScore += 1;
}
}
function game() {
let playerScore = 0;
let computerScore = 0;
for (let i = 1; i <= 5; i++) {
let result = playRound(prompt("Select rock, paper, or scissors!"), computerSelection());
calcScore(result, playerScore, computerScore);
console.log(`You have ${playerScore} points! Computer has ${computerScore} points!`);
}
playerScore, computerScore = 0, 0;
}
</script>
Javascript doesn't pass variables by reference - so any modifications you do to playerScore and computerScore within calcScore() are only local to that function.
What you can do is make playerScore and computerScore global variables. That way any modifications will be in the global scope. Alternatively, you could have calcScore() return the modified values.
Using the global method:
<script>
let playerScore = 0;
let computerScore = 0;
function playRound(playerSelection, computerSelection) {
playerSelection = playerSelection.toLowerCase();
computerSelection = computerSelection.toLowerCase();
if (playerSelection === computerSelection) {
return "draw";
}
else if (playerSelection === "rock"){
if (computerSelection === "scissors") return "win";
else if (computerSelection === "paper") return "lose";
}
else if (playerSelection === "paper"){
if (computerSelection === "scissors") return "lose";
else if (computerSelection === "rock") return "win";
}
else if (playerSelection === "scissors"){
if (computerSelection === "rock") return "lose";
else if (computerSelection === "paper") return "win";
}
}
function computerSelection() {
let selection = ["rock", "paper", "scissors"];
return selection[Math.floor(Math.random() * selection.length)];
}
function calcScore(result) {
if (result === "win") {
playerScore += 1;
console.log("win");
}
else if (result === "lose") {
computerScore += 1;
console.log("lose");
}
else if (result === "draw") {
playerScore += 1;
computerScore += 1;
}
}
function game() {
for (let i = 1; i <= 5; i++) {
let result = playRound(prompt("Select rock, paper, or scissors!"), computerSelection());
calcScore(result);
console.log(`You have ${playerScore} points! Computer has ${computerScore} points!`);
}
playerScore, computerScore = 0, 0;
}
</script>
Alternative method:
<script>
function playRound(playerSelection, computerSelection) {
playerSelection = playerSelection.toLowerCase();
computerSelection = computerSelection.toLowerCase();
if (playerSelection === computerSelection) {
return "draw";
}
else if (playerSelection === "rock"){
if (computerSelection === "scissors") return "win";
else if (computerSelection === "paper") return "lose";
}
else if (playerSelection === "paper"){
if (computerSelection === "scissors") return "lose";
else if (computerSelection === "rock") return "win";
}
else if (playerSelection === "scissors"){
if (computerSelection === "rock") return "lose";
else if (computerSelection === "paper") return "win";
}
}
function computerSelection() {
let selection = ["rock", "paper", "scissors"];
return selection[Math.floor(Math.random() * selection.length)];
}
function calcScore(result, playerScore, computerScore) {
if (result === "win") {
playerScore += 1;
console.log("win");
}
else if (result === "lose") {
computerScore += 1;
console.log("lose");
}
else if (result === "draw") {
playerScore += 1;
computerScore += 1;
}
return [playerScore, computerScore];
}
function game() {
let playerScore = 0;
let computerScore = 0;
for (let i = 1; i <= 5; i++) {
let result = playRound(prompt("Select rock, paper, or scissors!"), computerSelection());
let scores = calcScore(result, playerScore, computerScore);
playerScore += scores[0];
computerScore += scores[1];
console.log(`You have ${playerScore} points! Computer has ${computerScore} points!`);
}
playerScore, computerScore = 0, 0;
}
</script>
your defining both of those variables twice so now im confused. do you want to be abled to reuse those variables in the game function without re defining them? because if thats the case then they should be global variables instead of function parameters(you wont be able to use those defined in the function parameter outside of that function).

Why is this console.log() failing?

I am creating Rock Paper Scissors for a class, and I'm trying to get it to log the winner in the console, but nothing happens when the button is pressed. I'm not sure why. Is there anything obviously wrong with my code here?
let playGame = function() {
let userChoice = prompt("Do you choose rock, paper or scissors?");
let computerChoice = Math.random();
let userWins = 0;
let compWins = 0;
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67 && computerChoice >= 0.34) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
let compare = function(choice1, choice2) {
if (choice1 === choice2) {
console.log("The result is a tie!");
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
console.log("User wins!");
} else {
console.log("Computer wins!");
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
console.log("User wins!");
} else {
console.log("Computer wins!");
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
console.log("User wins!");
} else {
console.log("Computer wins!");
}
}
};
compare(userChoice, computerChoice);
}
<button class="playGame" onclick="playGame()">Play!</button>

Newbie Javascript function returning undefined, rock paper scissors game

As a newbie, following the code academy course, I've come across a problem building a rock paper scissors game.
I've created 2 functions which contain the whole program, the program runs fine when the 2 choices are different but it returns undefined when the choices are the same and I can't understand why.
I can see that when the choices are tied, new choices keep being assigned until they are different and then the compare function is called on these different choices, which should return a winning result.
Just to add, I'd like to fix the code as it is, not rewrite the entire thing, I've completed this exercise on codeacademy but I'm just trying to do it in a different way as 2 self contained functions.
Thanks
var makeChoices = function() {
userChoice = "";
computerChoice = "";
userChoice = prompt("Do you choose rock, paper or scissors?");
computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice + " " + "User: " + userChoice);
};
var compare = function(choice1, choice2) {
if (choice1 === choice2) {
makeChoices();
compare(userChoice, computerChoice);
}
else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins";
}
else {
return "paper wins";
}
}
else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
}
else {
return "scissors wins";
}
}
else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
}
else {
return "scissors wins";
}
}
else {
return "invalid choice by user";
}
};
makeChoices();
compare (userChoice, computerChoice);
You have to return the result of the recursive call. Try changing
...
compare(userChoice, computerChoice);
...
to
...
return compare(userChoice, computerChoice);
...
When it is equal, you have "compare(userChoice, computerChoice);". The variables userChoice and computerChoice were defined in the makeChoices() function. They won't be available in compare() function. You can make them as global variables or consider moving you the compare() function calls to the bottom of makeChoices().
We all start the same way this impressive language!, do not worry about being a novice, you will soon be a teacher if you do not surrender!,here is the complete code for this exercise below:
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";
}
var compare = function(computerChoice, userChoice) {
if (computerChoice===userChoice) {
return("The result is a tie!");
}
if (userChoice === "rock"){
if (computerChoice === "paper") {
return("paper wins");
}
else if (computerChoice === "scissors") {
return("rock wins");
}
}
if (userChoice === "scissors") {
if (computerChoice==="paper") {
return("scissors wins");
}
else if (computerChoice === "rock") {
return("rock wins");
}
}
if (userChoice === "rock") {
if (computerChoice==="scissors") {
return "rock wins";
}
else if (computerChoice=== "paper") {
return "paper wins";
}
}
if (userChoice === "paper") {
if (computerChoice ==="scissors") {
return "scissors wins";
}
else if (computerChoice==="rock") {
return "paper wins";
}
}
};
compare();
I made such a game before:
var prsStatements = {
paperBeatsRock: 'Paper Beats Rock',
rockBeatsScissors: 'Rock Beats Scissors',
scissorsBeatsPaper: 'Scissors Beats Paper',
seperator: ' - ',
player1: 'Player One',
player2: 'Player Two',
wins: ' Wins!',
tie: "It's a Tie!",
tally: 'Final Tally: '
}
function PaperRockScissors(player1, player2){
var p = /^paper$/i, r = /^rock$/i, s = /^scissors$/i, prss = prsStatements, sep = prss.seperator, win = prss.wins;
var pbr = prss.paperBeatsRock+sep, rbs = prss.rockBeatsScissors+sep, sbp = prss.scissorsBeatsPaper+sep;
var plr1 = player1 ? player1 : prss.player1;
var plr2 = player2 ? player2 : prss.player2;
var p1w = plr1+win, p2w = plr2+win;
this.p1 = 0; this.p2 = 0;
this.rand = function(){
switch(Math.floor(Math.random()*3)){
case 0:
return 'rock';
case 1:
return 'paper';
case 2:
return 'scissors';
}
}
this.play = function(in1, in2){
var i2 = in2 || this.rand();
if(in1.match(p) && i2.match(r)){
++this.p1;
return pbr+p1w;
}
else if(i2.match(p) && in1.match(r)){
++this.p2;
return pbr+p2w;
}
else if(in1.match(r) && i2.match(s)){
++this.p1;
return rbs+p1w;
}
else if(i2.match(r) && in1.match(s)){
++this.p2;
return rbs+p2w;
}
else if(in1.match(s) && i2.match(p)){
++this.p1;
return sbp+p1w;
}
else if(i2.match(s) && in1.match(p)){
++this.p2;
return sbp+p2w;
}
else if(in1.match(i2r)){
return prss.tie;
}
else{
return this;
}
}
this.tally = function(){
var pt = prss.tally;
if(this.p1 > this.p2){
return pt+p1w;
}
else if(this.p2 > this.p1){
return pt+p2w;
}
else{
return pt+prss.tie;
}
}
}
var pr = new PaperRockScissors('Joe', 'Bob');
console.log(pr.play('paper', 'rock'));
console.log(pr.play('rock', 'Paper'));
console.log(pr.play('scissors', 'paper'));
console.log(pr.play('rock', 'Paper'));
console.log(pr.play('paper', 'rock'));
console.log(pr.play('Paper', 'Scissors'));
console.log(pr.play('Paper', 'paper'));
console.log(pr.play('paper', 'Rock'));
console.log(pr.tally());
If you want to make this web-functional you would simply pass user input values, like:
pr.play(someElement.value, anotherElement.value);
Of course, you would want to use an Event and pass the correct values of either 'paper', 'rock', or 'scissors'.
Computer play might look like:
var pc = new PaperRockScissors('Joe', 'Comupter');
console.log(pc.play('paper'));
console.log(pc.play('rock'));
console.log(pc.play('scissors'));
console.log(pc.play('rock'));
console.log(pc.play('paper'));
console.log(pc.play('Paper'));
console.log(pc.play('Paper'));
console.log(pc.play('paper'));
console.log(pc.tally());

Why is this only giving me the computer's output?

<html>
<head></head>
<body><center><div id="output" style="width:500px; height:500px; background-color:blue;"></div></center></body>
<script>
var printOut = function(text) {
var output = document.getElementById("output");
output.innerHTML = text;
};
var userChoice = prompt("Do you choose Rock, Paper, or Scissors?")
console.log(printOut("You chose " + userChoice + "."));
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "Rock";
} else if (computerChoice <= 0.67) {
computerChoice = "Paper";
} else {
computerChoice = "Scissors";
}
console.log(printOut("The computer chooses " + computerChoice + "."));
var compareChoice = function(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return "The result is a tie!";
}
if (userChoice === "Rock") {
if (computerChoice === "Scissors") {
return "Rock smashes Scissors!";
} else {
return "Paper covers Rock!";
}
}
if (userChoice === "Paper") {
if (computerChoice === "Rock") {
return "Paper covers Rock!";
} else {
return "Scissors cut Paper!"
}
}
if (userChoice === "Scissors") {
if (computerChoice === "Paper") {
return "Scissors cut Paper!";
} else {
return "Rock smashes Scissors!";
}
}
return console.log(printOut(compareChoice(userChoice, computerChoice)));
};
</script>
</html>
When I open this in the browser and type in my choice, It only tells me the computer's choice when it should tell mine, the computer's and the end result.
I think it has something to do with my tag, but I'm not sure.
Actually, your choice was also printed in the output area. It just gets replaced by the computer's choice. Try modifying your printOut method to be like this:
var printOut = function(text) {
var output = document.getElementById("output");
output.innerHTML += text;
};

Run outside variable from inside a function

if result is tie i need to run this code again by asling "Do you choose rock, paper or scissors?"
but there's a wrong with this code.
after this Massage "The result is a tie! Would you like to play new game?(yes or no)", i used "compare(userChoice, computerChoice);" to run again this code. its not working.
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("Computer: " + computerChoice);
var compare = function(choice1, choice2)
{
if (choice1 === choice2) {
var newChoice = prompt ("The result is a tie! Would you like to play new game?(yes or no)");
if ( newChoice === "yes"){
compare(userChoice, computerChoice);
}
else {
return "Have a nice day!";
}
}
else if (choice1 === "rock"){
if (choice2 === "scissors") {
return ("rock wins")}
else {
return ("paper wins")}
}
else if (choice1 === "paper"){
if (choice2 === "rock") {return ("paper wins");}
else {return ("scissors wins");}
}
else if (choice1 === "scissors"){
if (choice2 === "paper") {return ("scissors wins");}
else {return (" rock wins");}
}
};
compare(userChoice, computerChoice);
Well yes, that's because you call again
compare(userChoice, computerChoice);
at the forth line inside compare function.
try this:
var choices = ['rock', 'paper', 'scissors'];
var makeRandom = function() {
return parseInt(Math.random()*3);
}
function game() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var index = choices.indexOf(userChoice);
if(index === -1) {
var bl = confirm('Your choice is outof range, would you like to play Again?');
if(bl) game();
}
var computerChoice = makeRandom();
if(index === computerChoice) {
var bl = confirm('It is a tie, would you like to play Again?');
if(bl) { game(); }
} else if((index === 0 && computerChoice === 1) || (index === 1 && computerChoice === 2) || (index === 2 && computerChoice === 0)) {
alert('you loose');
} else {
alert('you win');
}
}
game();

Categories

Resources