Doing Rock Paper Scissors for DOM Manipulation


#1

I think i got the rules and buttons to work but i don’t know how to end the game once the scores reach 3.
I also want the

element in my html to display “GAME OVER!” once the game is finished and seize all button functionality once the game is done. I tried a bunch of “if” statements for the userScore once it goes past 3 but it doesn’t seem to do anything.

Here is the html

<div class="gametitle">
    <h1>
        Rock Paper Scissors Game
    </h1>            
</div>
<div class="winnerboard">
    <h1 id="announcement"></h1>
</div class="choices">
    <h2 id="choices">Please make a choice</h2>
</div>
<div class="scoreboard">
    <p id="userScore">Your score is : 0 </p>
    <p id="computerScore">Computer score is : 0 </p>
</div>
<div class="buttons">
    <button class="button" id="rock">Rock</button>
    <button class="button" id="paper">Paper</button>
    <button class="button" id="scissors">Scissors</button>
</div>

and JS

let choice = [“rock”, “paper”, “scissors”]
let userScore = 0;
let computerScore = 0;

var choices = document.querySelector("#choices");

var gameMessage = document.querySelector("#announcement")

var yourScore = document.querySelector("#userScore")
var theirScore = document.querySelector("#computerScore")

var rock = document.querySelector("#rock");
rock.addEventListener(‘click’, () => {
playRound(“rock”);
});

var paper = document.querySelector("#paper");
paper.addEventListener(‘click’, () => {
playRound(“paper”);
});

var scissors = document.querySelector("#scissors");
scissors.addEventListener(‘click’, () => {
playRound(“scissors”);
});

function playRound(userChoice) {
const computerChoice = choice[Math.floor(Math.random()*choice.length)];
if (userChoice === computerChoice) {
choices.textContent = "It’s a tie! You both chose " + userChoice;
}
else if (userChoice === “rock” && computerChoice === “scissors”) {
choices.textContent = "You Win! You chose " + userChoice + " Computer chose " + computerChoice , userScore++,
yourScore.textContent = "Your score is : " + userScore,
theirScore.textContent = "Computer score is : " + computerScore;
}
else if (userChoice === “rock” && computerChoice === “paper”) {
choices.textContent = "You Lose! You chose " + userChoice + " Computer chose " + computerChoice , computerScore++,
yourScore.textContent = "Your score is : " + userScore,
theirScore.textContent = "Computer score is : " + computerScore;
}
else if (userChoice === “paper” && computerChoice === “rock”) {
choices.textContent = "You Win! You chose " + userChoice + " Computer chose " + computerChoice , userScore++,
yourScore.textContent = "Your score is : " + userScore,
theirScore.textContent = "Computer score is : " + computerScore;
}
else if (userChoice === “paper” && computerChoice === “scissors”) {
choices.textContent = "You Lose! You chose " + userChoice + " Computer chose " + computerChoice , computerScore++,
yourScore.textContent = "Your score is : " + userScore,
theirScore.textContent = "Computer score is : " + computerScore;
}
else if (userChoice === “scissors” && computerChoice === “paper”) {
choices.textContent = "You Win! You chose " + userChoice + " Computer chose " + computerChoice , userScore++,
yourScore.textContent = "Your score is : " + userScore,
theirScore.textContent = "Computer score is : " + computerScore;
}
else {
choices.textContent = "You Lose! You chose " + userChoice + " Computer chose " + computerChoice , computerScore++,
yourScore.textContent = "Your score is : " + userScore,
theirScore.textContent = "Computer score is : " + computerScore;
}
}

if (userScore > 2) {
gameover ();
} else if (computerScore > 2) {
gameover ();
} else {
“”;
}

function gameover () {
gameMessage.textContent = “GAME OVER!”;
}

any help is appreciated, thanks!


#2

The else { “”; } is not setting any html text value. Maybe delete that.

You can refactor the conditional to:

As a general comment: I can see a ‘playRound’ function, but it looks like the conditional to check scores for a win is not within that function (nor within any other function), thus it will only run once when the program first runs (when the scores will always be less than 2 for each player) and thus gameOver() will never be called.

I am not sure if you are clear that every time you refresh a page, the associated JavaScript is re-run. Thus all variables will be reset, including your scores (to zero). Playing a game involves multiple rounds, so you cannot use page refresh after each round to simply play another round, and have that work within the context of a multi-round game.


#3

Hey! Thanks for the advice, it really helped.
What I did was I put the IF statements inside the playround () function, I don’t know if it’s the right thing to do but it seems to have solved the problem for now. My only problem left is the reset function that i can’t seem to get to work even if I make it a global or local scope.


#4

Edit: I have removed my ‘while-loop’ idea from my original response. I forgot my JavaScript basics! While-loops can hang your app if not used carefully.

What reset function are you referring to?


#5

My reset button sets the values back to 0, but after i click a button - the increments set it back to the value it was before it was reset. e.g. If it was 2 before the reset, the increment brings it back to 3 instead of 1 after the reset.

function resetGame() {
var userScore = 0;
var computerScore = 0;
yourScore.textContent = userScore;
theirScore.textContent = computerScore;
var paper = document.querySelector("#paper").disabled = false;
var rock = document.querySelector("#rock").disabled = false;
var scissors = document.querySelector("#scissors").disabled = false;
}


#6

I think you are creating new variables within the function, with the same names as your global variables (but because of the function scope they are considered different variables, with the same variable names).

Try using just userScore = 0;, instead of var userScore = 0;, etc.

You probably also want document.getElementById(“paper”).disabled = false;, not var paper = document.querySelector("#paper").disabled = false;, etc.


#7

Using userScore = 0; without the var userScore = 0; fixed the problem! Thank you!
Would you mind pointing me to a link as to why that worked?
Really appreciate the help, the reset button works fine now.


#8

Great to hear it works! :+1:

Sure, try this.

Also, be clear on the difference between declaring (creating) a variable,

var score = 3;

[Above, a variable called ‘score’ is declared AND set to the value of 3.]

and setting an already existing variable;

score = 4;

[Above, a variable named ‘score’ has its value set (changed) to 4.]