`
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++
}
Related
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++.
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.
As you can tell by my messy code, I am still a beginner at JavaScript so I'm really sorry If this will hurt your eyes.
I am working on this Rock, Paper, Scissors project from The Odin Project where we would add a simple UI to it by applying DOM Methods. To be honest, I really don't know if I'm doing this right. I feel like the if statements shouldn't be inside the event listener but this is the only way I have found to make the tallying of scores work. By putting the code here I made it playable, but not quite right:
let playerScore = 0;
let computerScore = 0;
let scores = document.createElement('p');
let body = document.querySelector('body');
const results = document.createElement('div');
body.appendChild(results);
const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
button.addEventListener('click', () => {
let playerSelection = button.className;
let computerSelection = computerPlay();
let roundResult = playRound(playerSelection, computerSelection);
console.log(roundResult);
score();
gameEnd();
if (roundResult === 'playerWin') {
playerScore++;
} else if (roundResult === 'computerWin') {
computerScore++;
}
})
})
//computer pick
function computerPlay() {
const pick = ['rock', 'paper', 'scissors'];
return pick[Math.floor(Math.random() * pick.length)];
}
// Round Play
function playRound(playerSelection, computerSelection) {
//message that specifies the winner
let tie = `It's a tie you both picked ${playerSelection}`;
let playerWin = `You win this round! ${playerSelection} beats ${computerSelection}`;
let computerWin = `You lose this round! ${computerSelection} beats
${playerSelection}`;
if(playerSelection === computerSelection) {
results.innerHTML = tie;
return 'tie';
} else if (playerSelection === 'rock' && computerSelection === 'scisors') {
results.innerHTML = playerWin;
return 'playerWin';
} else if (playerSelection === 'paper' && computerSelection === 'rock') {
results.innerHTML = playerWin;
return 'playerWin';
} else if (playerSelection === 'scissors' && computerSelection === 'paper') {
results.innerHTML = playerWin;
return 'playerWin';
} else {
results.innerHTML = computerWin;
return 'computerWin';
}
}
function score() {
//new element where score would be seen
scores.innerHTML = `player: ${playerScore} | computer: ${computerScore}`;
body.appendChild(scores);
}
function gameEnd() {
if(playerScore === 5 || computerScore === 5) {
document.querySelector('.rock').disabled = true;
document.querySelector('.paper').disabled = true;
document.querySelector('.scissors').disabled = true;
if (playerScore > computerScore) {
alert('You win the game');
} else if (computerScore > playerScore) {
alert('Aww you lose');
}
}
}
<button class="rock">Rock</button>
<button class="paper">Paper</button>
<button class="scissors">Scissors</button>
Here's the problem, scores remain both at 0 after the first round. It would show who the winner is but it won't tally its score until I have picked for the next round. Where exactly did I go wrong with this one? (feels like in everything I'm genuinely sorry if my explanation sounds as confusing as my code.)
Anyways this is what the initial code looks like, before applying the DOM Methods.
I was initially trying to use this code but I cant even tally the scores with this one because I can't seem to get the return value of of the function playRound().
function computerPlay() {
const pick = ['rock', 'paper', 'scissors'];
return pick[Math.floor(Math.random() * pick.length)];
}
function playRound(playerSelection, computerSelection) {
if (playerSelection === computerSelection) {
alert(`It's a tie! you both picked ${playerSelection}`);
return "tie";
} else if (playerSelection !== "rock" && playerSelection !== "paper" &&
playerSelection !== "scissors"){
alert(`You sure about using ${playerSelection} on a game of "Rock, Paper,
Scissors"?`)
} else if (playerSelection === "rock" && computerSelection === "scissors") {
alert(`You win this round! ${playerSelection} beats ${computerSelection}`);
return "playerWin";
} else if (playerSelection === "paper" && computerSelection === "rock") {
alert(`You win this round! ${playerSelection} beats ${computerSelection}`);
return "playerWin";
} else if (playerSelection === "scissors" && computerSelection === "paper") {
alert(`You win this! ${playerSelection} beats ${computerSelection}`);
return "playerWin";
} else {
alert(`You lose this round! ${computerSelection} beats ${playerSelection}`);
return "botWin";
}
}
const computerSelection = computerPlay();
// to loop the game until 5 rounds
function game() {
let playerScore = 0;
let botScore = 0;
let gameWinner = '';
for (let i = 0; i < 5; i++) {
let playerSelection = prompt(`Round ${i+1}: Choose among "Rock, Paper, Scissors"
as your weapon`).toLowerCase();
let roundResult = playRound(playerSelection, computerPlay());
if (roundResult === "playerWin" ) {
playerScore++;
} else if (roundResult === "botWin" ) {
botScore++;
}
}
if (playerScore > botScore) {
gameWinner = 'You win!';
} else if (botScore > playerScore) {
gameWinner = 'You lose, Computer wins!';
} else {
gameWinner = 'Draw';
}
alert(`Player: ${playerScore} | Bot: ${botScore}`);
if (gameWinner === 'Draw') {
alert("There is no match winner, draw!");
} else {
alert(`${gameWinner}`);
}
}
game();
between these codes which is more likely to be fixed? or would it be better to completely throw this code and just start anew?
The problem is in this part of the code:
score();
gameEnd();
if (roundResult === 'playerWin') {
playerScore++;
} else if (roundResult === 'computerWin') {
computerScore++;
}
score() will update the score in the HTML page, but at that moment the scores have not been updated yet. That only happens later in that if ... else if block.
So the solution is to first update the score, and then to call score():
score();
gameEnd();
if (roundResult === 'playerWin') {
playerScore++;
} else if (roundResult === 'computerWin') {
computerScore++;
}
There is another issue related to this: at the end of the game (when a player reaches 5 points), gameEnd() will call alert. But alert does not allow the page to actually display the latest changes. Instead it blocks any update to it. I would display the game-over message in an HTML element instead of in an alert, just like you already do for the scores. Alternatively, you could delay the execution of alert with a timer, but I would just avoid using alert.
Here is what you can do in the function gameEnd where you currently use alert:
if (playerScore > computerScore) {
results.innerHTML += '<p><b>You win the game</b>';
} else if (computerScore > playerScore) {
results.innerHTML += '<p><b>Aww you lose</b>';
}
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.
I have created the function for the computer's choices and for the player's possible choices. However, for hours I've been trying to solve the issue of scorekeeping as it does not seem to work. I have set the requirements and I set global functions playerScore and computerScore = 0 and yet every time I call the gamescore function, the message which appears is "the tie" since for some reason the values of the two scores are always considered to be 0.
Any idea why might this be happening? I have done an extensive search online but in vain. I am still a beginner so on purpose, I use console.log and not innerHTML or any html/css style/button. The computerPlay() function is console-logged and every time go-live is refreshed, it gives a random choice so it works. For the second function, I do not know loops yet so I called it 5 times via console log to see the results. I also put specific playerSelection arguments so as to make the strings "You won, You lost, Draw again" cause if I did not, in all 5 times, the return was undefined and not one of these three strings/returns. If you refresh go live you will see the choices are changing randomly but the final sentence that should be given depending on the score after 5 rounds is always the same.
function computerPlay() {
let gameWords = ["Rock", "Paper", "Scissors"];
let randomWord = gameWords[Math.floor(Math.random() * gameWords.length)];
return randomWord;
};
console.log(computerPlay());
let playerScore = 0
let computerScore = 0
let draws = 0
function playRound(playerSelection, computerSelection) {
playerSelection = playerSelection.toLowerCase();
if (computerSelection === "Rock") {
if (playerSelection === "rock") {
return "Draw again."
draws++
} else if (playerSelection === "paper") {
return "You won!"
playerScore++;
} else if (playerSelection === "scissors") {
return "You lost!"
computerScore++
};
};
if (computerSelection === "Paper") {
if (playerSelection === "paper") {
return "Draw again."
draws++
} else if (playerSelection === "rock") {
return "You lost..."
computerScore++
} else if (playerSelection === "scissors") {
return "You won!"
playerScore++
};
};
if (computerSelection === "Scissors") {
if (playerSelection === "scissors") {
return "Draw again."
draws++
} else if (playerSelection === "paper") {
return "You lost..."
computerScore++
} else if (playerSelection === "rock") {
return "You won"
playerScore++
};
};
console.log(playerScore);
};
const computerSelection = computerPlay();
console.log(playRound("RoCk", computerSelection));
console.log(playRound("Scissors", computerSelection));
console.log(playRound("PAper", computerSelection));
console.log(playRound("paper", computerSelection));
console.log(playRound("PAPER", computerSelection));
function gameScore() {
if (playerScore > computerScore) {
return "You won the game!";
} else if (playerScore < computerScore) {
return "You lost, try again.";
} else if (playerScore === computerScore) {
return "It is a tie.";
}
}
console.log(gameScore());
You code returns and then increase counters:
return "Draw again."
draws++
as you return counter increase is not called.