CODEWITHSUNDEEP
javascript
rave_child
rave_child

Reputation: 13

JS problem - Rock, paper, scissors game only returning ties and losses no wins

This is my first time asking a question here. So, my main issue I'm having is that when I play my game of rock, paper, scissors I only ever tie or lose a round - I never win. I've tested this out in multiple browsers and on codepen and the result is similar. I have absolutely no idea what is the problem with my code. Could someone point me in the right direction or point out any glaring mistakes in my js code? Thank you!

// declares that default score of both players is set to zero at begining of each game
let playerScore = 0
let computerScore = 0
const buttons = document.querySelectorAll('input')

// this function randomly returns either rock, paper, or scissors
function computerPlay() {
  let choices = ['Rock', 'Paper', 'Scissors']
  return choices[Math.floor(Math.random() * choices.length)]
}

// disables multiple buttons when one is clicked  
function disableButtons() {
  buttons.forEach(elem => {
      elem.disabled = true
  })
}

// main function for game
function playRound(playerSelection) {
  let computerSelection = computerPlay()
  let result = ""

  if ((playerSelection == 'rock' && computerSelection == 'scissors') ||
      (playerSelection == 'scissors' && computerSelection == 'paper') ||
      (playerSelection == 'paper' && computerSelection == 'rock')) {
      
      playerScore += 1
      result = ('You win! ' + playerSelection + ' beats ' + computerSelection
          + '<br><br>Player score: ' + playerScore + '<br>Computer score: ' + computerScore)

      if (playerScore == 5) {
          result += '<br><br>You won the game! Reload the page to play again.'
          disableButtons()
      }
  }
  else if (playerSelection == computerSelection) {
      result = ('It\'s a tie... You both chose ' + playerSelection
          + '<br><br>Player score: ' + playerScore + '<br>Computer score: ' + computerScore)
  }
  else {
      computerScore += 1
      result = ('You lose. ' + computerSelection + ' beats ' + playerSelection + '.' 
          + '<br><br>Player score: ' + playerScore + '<br>Computer score: ' + computerScore)

      if (computerScore == 5) {
          result += '<br><br>Computer won the game! Reload the page to play again.'
          disableButtons()
      }
  }
    
// prints result to html file
    document.getElementById('result').innerHTML = result
    return
}

// adds the functionality to initiate a round of the game when a button is clicked 
buttons.forEach(button =>{
    button.addEventListener('click', function(){
        playRound(button.value)
    })
})

Upvotes: 1

Views: 259

Answers (1)

Ofir Baruch
Ofir Baruch

Reputation: 10346

The choices of the computer are (computerSelection):

  let choices = ['Rock', 'Paper', 'Scissors']

But in your comparison condition:

 if ((playerSelection == 'rock' && computerSelection == 'scissors') ||
      (playerSelection == 'scissors' && computerSelection == 'paper') ||
      (playerSelection == 'paper' && computerSelection == 'rock')) {

And the comparison will always return false, as you use lowercase values instead of capital first character.

Rock != rock

Scissors != scissors

Paper != paper

As commented above, it also depends on the value you get from the buttons (aka playerSelection). Be consistent with the lowercase/uppercase of the choices and I think it should work.

Upvotes: 1

Related Questions