I am making rock, paper, scissors game. I can't make 'yourScore' and 'computerScore' increment after true if statements. Everything else works. I've been trying different variations for the last 2 hours.
let CPUchoice = []
let gameResult = document.getElementById('game-result');
let yourScore = 0;
let computerScore = 0;
function computerChoice() {
const picks = ['rock', 'paper', 'scissors'];
CPUchoice = picks[Math.floor(Math.random()*picks.length)];
}
function rock() {
computerChoice();
if (CPUchoice === 'rock') {
gameResult.textContent = "Computer chose rock, It's a draw!";
} else if (CPUchoice === 'paper') {
computerScore = computerScore++;
gameResult.textContent = "Computer chose paper, you lost!";
} else {
yourScore = yourScore++;
gameResult.textContent = "Computer chose scissors, you won!";
}
}
function paper() {
computerChoice();
if (CPUchoice === 'paper') {
gameResult.textContent = "Computer chose paper, It's a draw!";
} else if (CPUchoice === 'scissors') {
gameResult.textContent = "Computer chose scissors, you lost!"
computerScore++;
} else {
gameResult.textContent = "Computer chose rock, you won!"
yourScore ++;
}
}
function scissors() {
computerChoice();
if (CPUchoice === 'scissors') {
gameResult.textContent = "Computer chose scissors, It's a draw!";
} else if (CPUchoice === 'rock') {
gameResult.textContent = "Computer chose rock, you lost!"
computerScore++;
} else {
gameResult.textContent = "Computer chose paper, you won!"
yourScore ++;
}
}
document.getElementById('your-score').textContent = 'Your score is... ' + yourScore;
document.getElementById('computer-score').textContent = 'Computer score is ....' + computerScore;
I have tried many variations of putting the .textContent method in the beginning, in the end. In the code there are 2 versions of incrementing the variable.
First, the last two lines (document.getElementById...) of your code is only executed once, i.e. when the script itself is loaded into the browser. What you should do is to update the textContents whenever the scores change. The = sign here means a one-time assignment: assign the right hand side value to the left hand side variable. It doesn't mean the values on both sides are equal from thereon (sometimes this can be effectively true, but that's because of references. See this post about differences between a reference and a primitive value).
The simpliest fix is to put them in a function:
function updateScores() {
document.getElementById('your-score').textContent = 'Your score is... ' + yourScore;
document.getElementById('computer-score').textContent = 'Computer score is ....' + computerScore;
}
... and execute this function whenever you increment computerScore and yourScore.
Other fixes include using reactive programming libraries and even using modern web frameworks, but those are too much of an overkill for this simple game.
Second, score = score++ is basically a no-op. score++ is equivalent to:
function incrementScore() {
const oldVal = score;
score++;
return oldVal;
}
And score = score++ means you're assigning the oldVal to score again. The fix is to change those lines to score++ (eliminating score = ).
num++ returns the value of num, and then increments the number, so your assignment gets the "old" value.
You can use ++num to increment first and then assign. Or just add 1.
But wait, plot twist! Because the ++ operator mutates its operand, the assignment itself is unnecessary. You can simply do num++.
Related
`
I'm making a rock-paper-scissors game with multiples rounds, but I'm having problems storing the number of player's victory. What am I doing wrong?
// THIS FUNCTION DECIDES IF THE COMPUTER CHOOSES ROCK, PAPER OR SCISSOS
function getComputerChoice () {
let rand = Math.floor(Math.random() * 10);
if (rand <= 3) {
return "Rock"
} else if (rand <= 6) {
return "Paper"
} else {
return "Scissors"
}}
// TESTING PLAYROUND FUNCTION
function playRound(playerSelection, computerSelection) {
const loseMessage = "You lose! Paper beats Rock";
const winMessage = "You win! Rock beats Scissors";
const drawMessage = "Draw. You and the computer chose Rock"
if (computerSelection === "Paper" && playerSelection === "Rock") {
alert (loseMessage);
return loseMessage
} else if (computerSelection === "Rock" && playerSelection === "Rock") {
alert(drawMessage);
return drawMessage
} else if (computerSelection === "Scissors" && playerSelection === "Rock") {
alert(winMessage);
return winMessage
} else {
alert("Something went wrong")
}
}
let playerScore = 0;
function updatePlayerScore1() {
let playRoundResults = playRound();
if (playRoundResults === "You win! Rock beats Scissors") {
playerScore += 1;
}
else {
playerScore += 0
}
return playerScore;
}
playRound(prompt("Rock, Paper or Scissors?", "Rock"), getComputerChoice());
alert (updatePlayerScore1());
`
I was expecting the updatePlayerScore1 function would store the number of player victories and alert it.
I don't think you run your updatePlayerScore(). It should run outside your alert. Instead put the player score inside the alert(playerScore)
When u declared function playRound(playerSelection, computerSelection)
here that you were going to pass two arguments but in the
function updatePlayerScore1() {
let playRoundResults = playRound();
***
}
u use didn't pass either one.
You can change your code to this and try
function updatePlayerScore1() {
let playRoundResults = playRound('Rock', getComputerChoice());
***
}
I think u should use var instead of let
Using let will not update your score, it still changes in the updatePlayerScore1 function but not in the global scope
And you should run playRound function inside your updatePlayerScore1 function, like this
function updatePlayerScore1() {
let playRoundResults = playRound(prompt("Rock, Paper or Scissors?", "Rock"), getComputerChoice());
if (playRoundResults === "You win! Rock beats Scissors") {
playerScore += 1;
}
else {
playerScore += 0
}
return playerScore;
}
let playRoundResults = playRound();
This line is producing the error, the function playRound() requires two arguments, but you are not providing any.
Resolve this line you will get the answer. If you are not able to find solution ,compare your code with below.
function updatePlayerScore1(message) {
let playRoundResults = message;
if (playRoundResults === "You win! Rock beats Scissors") {
playerScore += 1;
}
else {
playerScore += 0 ;
}
return playerScore;
}
let message = playRound(prompt("Rock, Paper or Scissors?", "Rock"), getComputerChoice());
alert (updatePlayerScore1());
There multiple combinations of draws, wins and losses. (For example, you can Win by picking Stone against scissors, but also by picking paper against rock). You'd have to consider all those possibilities in order for your code to work. (9 in total to be exact). I would suggest you create the message the player gets dynamically, especially nice to know how to do this if you go on to create games with even more possible outcomes.
The first function I wrote does exactly that ... it takes 2 picks as arguments. And bases on those it figures out if it is a draw, win or loss. And then inserts the picks in the appropriate message (way less work, especially if you add possible outcomes)
For your updatePlayerScore you only care if it was a win or not. So you split() the result message so that you only are left with either "you win" "you loose" or "draw". Then you can just check if it says "win" if it does add 1 to your score, if not just do nothing.
function results (yourPick, pcPick) {
let winningCombinations = {rock: "scissors", paper: "rock", scissors: "paper"}
if (yourPick === pcPick) return `Draw! bot of you picked ${yourPick}`
if (pcPick === winningCombinations[yourPick]) return `You win! ${yourPick} beats ${pcPick}`
return `You lose! ${yourPick} loses to ${pcPick}`
}
let playerScore = 0
function updatePlayerScore (result) {
let basicResult = result.split("!")[0]
if (basicResult === "You win") playerScore++
}
i'm currently working on a paper, rock, scissors game. i have pretty much everything working except getting a rematch button to show up at the end of a game. i've been able to successfully hide the button by grabbing it const rematchButton = document.querySelector('.hiddenButton'); and adding a classlist of hidden with rematchButton.classList.add('hidden');. in the css file, i have the class of hidden set to display: none;. i have a message that will show up once the player or computer has reached 5 wins and have added rematchButton.classList.remove('hidden'); which i would expect for the rematch button to then show up alongside the "game over" message but the button is still not showing up, only the "game over" message shows up. am i putting the classlist.remove in the wrong place?
this is the portion of my html file that contains the rematch button:
<div id="results">
<div class="rematchGroup">
<!-- <img src="photos/rematch.jpg"> -->
<br>
<button class="buttons hiddenButton">rematch?</button>
</div>
</div>
and this is the javascript file:
// DECLARES A VARIABLE TO HOLD AN ARRAY OF CHOICES
const choices = ['rock', 'paper', 'scissors'];
// DECLARES A VARIABLE FOR PLAYERSCORE AND COMPUTERSCORE AND SETS THEM TO 0
let playerScore = 0;
let computerScore = 0;
// DECLARES A VARIABLE FOR PLAYERSELECTION AND SETS IT TO AN EMPTY STRING
let playerSelection = '';
// DECLARES VARIABLES FOR ROCK, PAPER, & SCISSORS AND ASSIGNS IT TO THE RPS BUTTON ID'S
const rock = document.querySelector('#rock');
const paper = document.querySelector('#paper');
const scissors = document.querySelector('#scissors');
const rematchButton = document.querySelector('.hiddenButton');
rematchButton.classList.add('hidden');
// FUNCTION TO SELECT ONE OF THE CHOICES ARRAYS AT RANDOM
function computerPlay() {
return choices[~~(Math.random() * choices.length)];
}
// EVENTLISTENERS FOR BUTTON CLICKS TO CORRELATE WITH PLAYERSELECTION
rock.addEventListener('click', () => {
playerSelection = 'rock';
playGame();
});
paper.addEventListener('click', () => {
playerSelection = 'paper';
playGame();
});
scissors.addEventListener('click', () => {
playerSelection = 'scissors';
playGame();
});
// FUNCTION TO COMPARE PLAYERSELECTION WITH COMPUTERSELECTION
// INCREMENTS THE PLAYER & COMPUTER SCORE
// DISPLAYS MESSAGE SUMMARY OF WHO WON THE ROUND
function playRound(playerSelection, computerSelection) {
if (playerSelection === computerSelection) {
document.getElementById('results').innerHTML = 'you\'ve tied!'
} else if (computerSelection === 'paper' && playerSelection === 'rock') {
document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose rock, the computer chose paper.';
computerScore += 1;
} else if (computerSelection === 'scissors' && playerSelection === 'paper') {
document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose paper, the computer chose scissors.';
computerScore += 1;
} else if (computerSelection === 'rock' && playerSelection === 'scissors') {
document.getElementById('results').innerHTML = 'you\'ve lost that round! you chose scissors, the computer chose rock.';
computerScore += 1;
} else if (computerSelection === 'rock' && playerSelection === 'paper') {
document.getElementById('results').innerHTML = 'you\'ve won that round! you chose paper, the computer chose rock.';
playerScore += 1;
} else if (computerSelection === 'paper' && playerSelection === 'scissors') {
document.getElementById('results').innerHTML = 'you\'ve won that round! you chose scissors, the computer chose paper.';
playerScore += 1;
} else if (computerSelection === 'scissors' && playerSelection === 'rock') {
document.getElementById('results').innerHTML = 'you\'ve won that round! you chose rock, the computer chose scissors.';
playerScore += 1;
} else {
document.getElementById('results').innerHTML = 'that\'s not an acceptable answer!'
}
}
// FUNCTION THAT ASSIGNS COMPUTERPLAY(FUNCTION) TO COMPUTERSELECTION(VARIABLE)
// RUNS THE PLAYROUND FUNCTION
// DISPLAYS COMPUTER & PLAYER SCORE
// RUNS THE ENDGAME FUNCTION WHEN PLAYER OR COMPUTER REACHES 5 WINS
function playGame() {
computerSelection = computerPlay();
playRound(playerSelection, computerSelection);
// const results = document.getElementById('results');
// const resultsContent = document.createElement('div');
// resultsContent.textContent = roundResult;
// results.appendChild(resultsContent);
const score = document.getElementById('roundScore');
document.getElementById('roundScore').innerHTML = `player score: ${playerScore} | computer score: ${computerScore}`;
if (playerScore < 5 && computerScore < 5) {
return;
} else if (playerScore === 5 || computerScore === 5) {
endGame();
} else if (playerScore === 6 || computerScore === 6) {
location.reload();
}
}
// FUNCTION THAT DISPLAYS GAME OVER MESSAGE WHEN RAN
function endGame() {
if (playerScore > computerScore) {
document.getElementById('results').innerHTML = 'GAME OVER <BR> you win! you\'ve beat the computer to 5 wins.';
rematchButton.classList.remove('hidden');
} else if (computerScore > playerScore) {
document.getElementById('results').innerHTML = 'GAME OVER <BR> you lose! the computer has beat you to 5 wins';
rematchButton.classList.remove('hidden');
}
}
The culprit is this line:
document.getElementById('results').innerHTML = 'GAME OVER <BR> you win! you\'ve beat the computer to 5 wins.';
(and its equivalent when you lose).
This replaces the entire content of the results div with your game over message - anything else that's there already is removed from the DOM.
But, what's already there includes your rematch button - so removing a class from it has no noticeable effect, it's no longer in the document!
The easiest fix based on how your code is currently set up is probably as follows: add a new div inside your results one, specifically to hold the message:
<div id="results">
<div id="results-message"></div>
<div class="rematchGroup">
<!-- <img src="photos/rematch.jpg"> -->
<br>
<button class="buttons hiddenButton">rematch?</button>
</div>
</div>
And then for the above line that sets the contents of the results div to the game over message, just set the contents of this inner div instead:
document.getElementById('results-message').innerHTML = 'GAME OVER <BR> you win! you\'ve beat the computer to 5 wins.';
(and similarly for the other one).
That will only overwrite any existing message, but leave the other DOM elements, including the rematch button, as they are.
I know this is a very popular/simple game to make, but I'm having a bit of trouble. I have made a rock-paper-scissors game in javascript and I've managed to make it work so that it will prompt the player to choose rock, paper, or scissors, get the computer to randomly pick an option, and a means for it to say "you lose" or "you win". The problem is that I'm required to make 5 rounds. That's the issue I'm having. I, for some reason, cannot seem to get the code to prompt the user 5 times. It only prompts the user once and runs the same code each time. My code is as follows:
function playRound(playerSelection) {
let computerSelection = getComputerSelection();
if (playerSelection == "rock") {
addToList(playerSelection, computerSelection);
if (computerSelection == "rock") {
result = "It's a tie";
}
else if (computerSelection == "paper") {
result = "You lost! Paper beats Rock";
computerScore++;
}
else {
result = "You won! Rock beats Scissors";
playerScore++;
}
}
else if (playerSelection == "paper") {
addToList(playerSelection, computerSelection);
if (computerSelection == "rock") {
result = "You won! Paper beats Rock";
playerScore++;
}
else if (computerSelection == "paper") {
result = "It's a tie";
}
else {
result = "You lost! Scissors beats Paper";
computerScore++;
}
}
else {
addToList(playerSelection, computerSelection);
if (computerSelection == "rock") {
result = "You lost! Rock beats Scissors";
computerScore++;
}
else if (computerSelection == "paper") {
result = "You won! Scissors beats Rock";
playerScore++;
}
else
result = "It's a tie";
}
h1.textContent = result;
player.textContent = playerScore;
computer.textContent = computerScore;
game();
}
function game() {
if (playerScore === 5) {
end.style.display = "block";
message.textContent = "You Won!";
}
else if (computerScore === 5) {
end.style.display = "block";
message.textContent = "You Lost!";
}
}
I would appreciate any help or direction that is given. I have tried putting my "playRound" function outside of the loop, but it gives me the same issue. What would make it prompt twice?
Thank you!
That's because you are asking for player's prompt only once i.e. it is outside the playRound method.
Try moving the following snippet into playround method.
const computerSelection = computerPlay();
const playerSelection = window.prompt("Enter your choice: ").toLowerCase();
I'm no expert in JS, so please correct me if i'm wrong, but what seems to be the case is that this variable:
const playerSelection = window.prompt("Enter your choice: ").toLowerCase();
is only initialized a single time with that function's return. (because it is outside any function) Accessing the variable only recalls it's value it was initialized with, causing the main loop to run over and over again with only that initial value.
replacing that line with someing like:
function getPlayerSelection(){
return window.prompt("Enter your choice:").toLowerCase()
}
and replacing everywhere you use playerSelection with getPlayerSelection() should fix this issue.
Just as a foreword, I'm very new to programming so apologies if the error is something simple that I've simply overlooked. Also in advance I know the game function is a mess right now, I copied it in the state that it's in now after I've fiddled with it for a couple days.
I've been working on the odin project rock paper scissors project and although I've developed a single round function that works well, I haven't been able to make the overarching game function work properly. I've tried shifting syntax around and I suspect that the problem lies somewhere with the scope of specific variables but I haven't been able to figure out a way that works as of yet. I've also been doing research for the last few days trying to figure out how to do it while I was streamlining the single round but I wasn't able to find a query that worked with how my code is set up.
I've put everything within the same function but I can't seem to get the loop to work properly when I do, and I've tried pulling variables out from local to global scale but haven't been successful- as I mentioned though the function for a single round works without error and returns a correct string no matter the outcome so I have a hunch the error does lie somewhere in the variable scale and I just haven't been able to pinpoint it.
My game function, which is about the fifth or sixth rendition that doesn't work:
function game() {
let playerScore = 0;
let computerScore = 0;
let roundResult = computerPlay();
for (let counter = 0; counter <= 5; ++counter) {
computerPlay();
if (roundResult === 'You win, rock beats scissors' || roundResult === 'You win, paper beats rock.' || roundResult === 'You win, scissors beats paper.') {
++playerScore;
} else if (roundResult === 'You lose, paper beats rock.' || roundResult === 'You lose, scissors beats paper.' || roundResult === 'You lose, rock beats scissors.') {
++computerScore
}
if (playerScore > computerScore) {
return ('You win ' + playerScore + ' to ' + computerScore + '.');
} else if (playerScore < computerScore) {
return ('You lose ' + computerScore + ' to ' + playerScore + '.');
} else {
return 'It was a tie, you both won the same number of rounds.';
}
}
}
// and the single round (computerPlay) function that works fine:
function computerPlay() {
let playerInput = prompt('Enter your selection of rock, paper, or scissors.');
let playerTrimmed = playerInput.trim();
let playerSelection = playerTrimmed.charAt(0).toUpperCase();
let playerScore = 0;
let computerScore = 0;
if (playerSelection === 'R' || playerSelection === 'P' || playerSelection === 'S') {
let myArray = ['R', 'P', 'S'];
let computerSelection = myArray[Math.floor(Math.random() * myArray.length)];
if (playerSelection === 'R') {
if (computerSelection === 'S') {
++playerScore;
return 'You win, rock beats scissors.';
} else if (computerSelection === 'P') {
++computerScore;
return 'You lose, paper beats rock.';
} else {
return 'Tie.';
}
} else if (playerSelection === 'P') {
if (computerSelection === 'R') {
++playerScore;
return 'You win, paper beats rock.';
} else if (computerSelection === 'S') {
++computerScore;
return 'You lose, scissors beats paper.';
} else {
return 'Tie.';
}
} else if (playerSelection === 'S') {
if (computerSelection === 'P') {
++playerScore;
return 'You win, scissors beats paper.';
} else if (computerSelection === 'R') {
++computerScore;
return 'You lose, rock beats scissors.';
} else {
return 'Tie.';
}
}
} else {
//makes sure player entered a string starting with a valid letter (r, p, or s)
alert('Please make sure you enter a valid selection.');
}
}
game()
Like DBS said the return statement will stop your function and your loop with it, so try it like this:
function game() {
let playerScore = 0;
let computerScore = 0;
let roundResult = computerPlay();
for (let counter = 0; counter <= 5; ++counter) {
computerPlay();
if (roundResult === 'You win, rock beats scissors' || roundResult === 'You win, paper beats rock.' || roundResult === 'You win, scissors beats paper.') {
++playerScore;
} else if (roundResult === 'You lose, paper beats rock.' || roundResult === 'You lose, scissors beats paper.' || roundResult === 'You lose, rock beats scissors.') {
++computerScore
}
}
if (playerScore > computerScore) {
return ('You win ' + playerScore + ' to ' + computerScore + '.');
} else if (playerScore < computerScore) {
return ('You lose ' + computerScore + ' to ' + playerScore + '.');
} else {
return 'It was a tie, you both won the same number of rounds.';
}
}
Like this it will return the result only when the loop is finished.
(And btw the playerScore and computerScore variables in your computerPlay() function are useless :p)
Sometimes when I enter "rock" in the prompt and hit OK, the console will say "Please type Rock, Paper, or Scissors" even in case I had actually done that. I believe this is due to the else clause, I'm just not sure what I did wrong.
Also, other times when I enter "rock" in the prompt and hit OK, nothing happens in the console (no score is added). Below is the screenshot
const playerSelection = ''
const computerSelection = computerPlay()
let computerScore = 0;
let playerScore = 0;
console.log(playRound(playerSelection, computerSelection))
function computerPlay(){
let values = ['rock', 'paper', 'scissors'],
valueToUse = values [Math.floor(Math.random()* values.length)];
return valueToUse;
};
function playRound(playerSelection, computerSelection) {
while(true){
playerSelection = prompt ('Pick your poison');
if (playerSelection.toLowerCase() === 'rock' && computerPlay() === 'paper'){
computerScore += 1
console.log('Sorry! Paper beats Rock')
}
else if (playerSelection.toLowerCase() === 'rock'.toLowerCase() && computerPlay() === 'scissors'){
playerScore += 1
console.log('Good job! Rock beats Scissors');
}
else
{
console.log('Please type Rock, Paper, or Scissors')
}
console.log (`User Selection: ${playerSelection.toUpperCase()} | Player Score: ${playerScore}
Computer Selection: ${computerSelection.toUpperCase()} | Computer Score: ${computerScore}`);
}
}
You only call computerSelection once, at the beginning of pageload:
const computerSelection = computerPlay()
It then proceeds to only get used in the log:
Computer Selection: ${computerSelection.toUpperCase()} |
But your tests call computerPlay again, creating new strings for the computer every time:
if (playerSelection.toLowerCase() === 'rock' && computerPlay() === 'paper'){
// function invocation ^^^^^^^^^^^^^^
computerScore += 1
console.log('Sorry! Paper beats Rock')
}
else if (playerSelection.toLowerCase() === 'rock'.toLowerCase() && computerPlay() === 'scissors'){
// function invocation ^^^^^^^^^^^^^^
In addition to that, you aren't exhaustively testing each possibility for rock-paper-scissors (like when the player picks something other than 'rock').
To start with, call computerPlay only once, then use the computerSelection variable:
if (playerSelection.toLowerCase() === 'rock' && computerSelection === 'paper') {
computerScore += 1
console.log('Sorry! Paper beats Rock')
} else if (playerSelection.toLowerCase() === 'rock' && computerSelection === 'scissors') {
Also note that there isn't much point calling toLowerCase on something that's already a lower-cased string literal - just use the plain string.
You can update the code as following
Remove all unnecessary global variable declarations.
Remove unnecessary arguments of playRound function.
Add more logic for other player selection cases.
Nest condition for computer selection cases.
playRound();
function computerPlay(){
let values = ['rock', 'paper', 'scissors'],
valueToUse = values [Math.floor(Math.random()* values.length)];
return valueToUse;
};
function playRound() {
let playerSelection;
let computerSelection;
let playerScore = 0;
let computerScore = 0;
while(true){
playerSelection = prompt('Pick your poison').toLowerCase();
computerSelection = computerPlay();
if (playerSelection === 'rock') {
if (computerSelection === 'paper') {
computerScore += 1;
} else if (computerSelection === 'scissors') {
playerScore += 1;
}
} else if (playerSelection === 'paper') {
if (computerSelection === 'scissors') {
computerScore += 1;
} else if (computerSelection === 'rock') {
playerScore += 1;
}
} else if (playerSelection === 'scissors') {
if (computerSelection === 'rock') {
computerScore += 1;
} else if (computerSelection === 'paper') {
playerScore += 1;
}
} else {
console.log('Please type Rock, Paper, or Scissors');
continue;
}
console.log (`User Selection: ${playerSelection.toUpperCase()} | Player Score: ${playerScore}
Computer Selection: ${computerSelection.toUpperCase()} | Computer Score: ${computerScore}`);
}
}
Here is a minimalist version of the game as a complete rewrite:
function game(){
var usr, u, c, g, score=[0,0],last="";
const words=["rock","paper","scissors"];
while(usr=prompt(last+"\nScore (you:computer): "+score.join(":")+"\nYour choice:")) {
while((u=words.indexOf(usr.toLowerCase()))<0) usr=prompt("invalid choice, please enter again,\none of: "+words.join(", "));
c=Math.floor(Math.random()*3);
g=(3+u-c)%3; // who wins?
if(g) score[g-1]++;
last="you: "+words[u]+", computer: "+words[c]+" --> "
+["draw","you win!!!","you lost - sorry."][g];
}
}
game()