Help with Rock Paper Scissors Game

JavaScript
1

I’m trying to create a rock paper scissor game that displays the images of rock paper and scissors as the computer result. This is some of the code that I think is relevant to what im trying to do. So when the user makes a selection, I want the computers choice to be displayed while also showing if the user won lose or drew. I can’t figure out a way to compare the user’s choice to the computer’s choice so it can then determine a winner.

`



You:0


Computer:0


     <div class="user-choice">
        <img  class="rock" src="icons/rock.png">
        <img  class="paper" src="icons/paper.png" >
        <img  class="scissors"src="icons/scissors.png">
   </div>
<div class="cpu-result">
            <img class="cpu-rock" src="icons/rock.png">
            <img class="cpu-paper" src="icons/paper.png" >
            <img class="cpu-scissors" src="icons/scissors.png">
 
     </div>

     <div class="result"></div>

let userRock = document.querySelector(’.rock’)
let userPaper = document.querySelector(’.paper’)
let userScissors = document.querySelector(’.scissors’)
let cpuScissors = document.querySelector(’.cpu-scissors’)
let cpuPaper = document.querySelector(’.cpu-paper’)
let cpuRock = document.querySelector(’.cpu-rock’)
let computerScore = 0;
let userScore = 0;

let currentItem;

userPaper.addEventListener(‘click’, start)
userScissors.addEventListener(‘click’, cpuChoice)
userRock.addEventListener(‘click’, cpuChoice)

function start() {
cpuChoice()
getWinner()
}

// Computer Choice
function cpuChoice() {
const rand = Math.random()
if (currentItem) {
currentItem.style.display = ‘none’
}
if (rand < .34) {
cpuPaper.style.display = ‘inline-block’
currentItem = cpuPaper;
} else if (rand >= .67) {
cpuRock.style.display = ‘inline-block’
currentItem = cpuRock;

} else {
    cpuScissors.style.display = 'inline-block'
    currentItem = cpuScissors;
}

}

// Get Winner
function getWinner() {

}
`

2

i would suggest you, inside the cpuChoice(), have a variable that simply has a string for the selection name: ‘rock’ or ‘paper’ or ‘scissors’. Same for the playerChoice(). Then checking for a win can simply be comparing strings:

switch (playerSelection){
  case 'rock':
    switch (cpuSelection){
      case 'rock':
        // handle a match case.
        break;
      case 'paper':
        // handle a player loss
        break;
      case 'scissors':
        // handle a player win
        break;
    }
    break;
  case 'paper':
    // Do the same here, and in 'scissors', as above: handle each possible case.
  case 'scissors':
    // Ditto the above.
}
1 Like