I need a round javascript counter and a counter counter for my game

I am trying to teach myself coding using codeacademy.com. I decided to try and apply some of what I had learned to create web rock, paper, scissors, lizards, spoka. The code for the game works well, I know there are probably better ways to do this, but I figured it out later, but I want to add a score for the player and computer plus a round counter. Can someone tell me how to get the counters to work, I've tried a couple of things but can't figure it out.

Once I have javascript working, I am going to create a one page site to practice HTML and CSS.

<!DOCTYPE html>
<html>
  <head>
    <script>
    var rock = "rock"
    var paper = "paper"
    var scissors = "scissors"
    var lizard = "lizard"
    var spock = "spock"
    var compScore = 1
    var playerScore = 1

    function roundUp() {
      round += 1
    }

    function compare(choice1, choice2) {
      var round = 1
      var computerChoice = Math.random()
      if (computerChoice <= 0.2) {
        choice2 = "rock";
      } else if(computerChoice <= 0.4) {
        choice2 = "paper";
      } else if (computerChoice <= 0.6) {
        choice2 = "scissors";
      } else if (computerChoice <= 0.8) {
        choice2 = "lizard";
      }
      else {
        choice2 = "spock";
      }

      if (choice1 === choice2) {
        document.getElementById("winner").innerHTML  = "Round tied!"; 
      } else if (choice1 === rock) {
        if (choice2 === paper) { 
          compScore += 1
          document.getElementById("winner").innerHTML  = 
            "Paper covers rock, computer wins"; 
        }
        else if (choice2 === scissors) { 
          playerScore += 1
          document.getElementById("winner").innerHTML  = 
            "Rock breaks scissors, you win"; 
        }
        else if (choice2 === lizard) { 
          playerScore += 1
          document.getElementById("winner").innerHTML  = 
            "Rock crushes lizzard, you win"; 
        }
        else {
          compScore += 1 
          document.getElementById("winner").innerHTML  = 
            "Spock vaporises rock, computer wins"; 
        }
      } else if (choice1 === paper) {
        if (choice2 === rock) {
          document.getElementById("winner").innerHTML  = 
            "Paper covers rock, you win"; 
          playerScore += 1
        } else if (choice2 === scissors) {
          document.getElementById("winner").innerHTML  = 
            "Scissors cut paper, computer wins"; 
          compScore += 1 
        } else if (choice2 === lizard) {
          document.getElementById("winner").innerHTML  = 
            "lizard eats paper, computer wins"; 
          compScore += 1 
        } else {
          document.getElementById("winner").innerHTML  = 
            "Paper disproves spock, you win"; 
          playerScore += 1
        }
      } else if (choice1 === scissors) {
        if (choice2 === rock) {
          document.getElementById("winner").innerHTML  = 
            "Rock breaks scissors, computer wins"; 
          compScore += 1 
        } else if (choice2 === paper) {
          document.getElementById("winner").innerHTML  = 
            "Scissors cut paper, you win"; 
          playerScore += 1
        }else if (choice2 === lizard) {
          document.getElementById("winner").innerHTML  = 
            "Scissors decapitate lizard, you win"; 
          playerScore += 1
        } else {
          document.getElementById("winner").innerHTML  = 
            "Spock smashes scissors, computer wins"; 
          compScore += 1 
        }
      } else if (choice1 === lizard) {
        if (choice2 === rock) {
          document.getElementById("winner").innerHTML  = 
            "Rock crushes lizzard, computer wins"; 
          compScore += 1 
        } else if (choice2 === scissors) {
          document.getElementById("winner").innerHTML  = 
            "Scissors decapitate lizard, computer wins"; 
          compScore += 1 
        } else if (choice2 === paper) {
          document.getElementById("winner").innerHTML  = 
            "Lizard eats paper, you win"; 
          playerScore += 1
        } else {
          document.getElementById("winner").innerHTML  = 
            "Lizard poisons spock, you win"; 
          playerScore += 1
        }
      } else {
        if (choice2 === rock) {
          document.getElementById("winner").innerHTML  = 
            "Spock vaporises rock, you win"; 
          playerScore += 1
        } else if (choice2 === scissors) {
          document.getElementById("winner").innerHTML  = 
            "Spock smashes scissors, you win"; 
          playerScore += 1
        } else if (choice2 === paper) {
          document.getElementById("winner").innerHTML  = 
            "Paper disproves spock, computer wins"; 
          compScore += 1 
        } else {
          document.getElementById("winner").innerHTML  = 
            "Lizard poisons spock, computer wins"; 
          compScore += 1 
        }
      }

      document.getElementById("choice1").innerHTML  = choice1
      document.getElementById("choice2").innerHTML  = choice2
      document.getElementById("computerChoice").innerHTML  = computerChoice
      document.getElementById("playerScore").innerHTML  = playerScore
      document.getElementById("compScore").innerHTML  = compScore
      document.getElementById("round").innerHTML  = round

      roundUp()
    }

    </script>
  </head>

  <body>

    <h1>My Web Page</h1>

    <h3>Round</h3>
    <p id="round"></p>

    <h4>Player Choice</h4>
    <p id="choice1"></p>
    <h4>Player Score</h4>
    <p id="playerScore"></p>

    <h4>Computer Choice</h4>
    <p id="choice2"></p>
    <h4>Computer Score</h4>
    <p id="compScore"></p>

    <h4>And the winner is</h4>
    <p id="winner"></p>        

    <button type="button" onclick="compare(rock, choice2)">Rock</button>
    <button type="button" onclick="compare(paper, choice2)">Paper</button>
    <button type="button" onclick="compare(scissors, choice2)">scissors</button>
    <button type="button" onclick="compare(lizard, choice2)">lizard</button>
    <button type="button" onclick="compare(spock, choice2)">Spock</button>

  </body>
</html> 

      

+3


source to share


3 answers


You need to create round

as a global variable, as you did, with the help of rock

, paper

, scissors

etc. Identify the same side

var round = 0;

      



and your function roundUp

should work as expected.

EDIT . You also forgot to end your statements with semicolons. And I guess you don't need to send choice2

as a parameter on button click when you set it inside your function.

+1


source


You need to take var round = 1

out of compare () because every time you run the compare function, round falls back to reset back to 1. Instead, use var round = 0 with your other variable declarations instead. Also, I put the script at the bottom to make sure the page elements are loaded before your script. I highly recommend using semicolons after variable declarations. http://jsfiddle.net/ja4m0qoL/



+1


source


You need to run a function that will update the playerScore as you would for the round counter when the player makes a selection. I would pass a parameter that tells roundUp () which player has scored:

roundUp(winner){
    round++; //increments round
    if(winner === computer){
        compScore++; //increments score
        document.getElementById("compScore").innerHTML  = compScore; //updates HTML
    }
    else if(winner === player){
        playerScore++; //increments score
        document.getElementById("playerScore").innerHTML  = playerScore; //updates HTML
    }
};

      

+1


source







All Articles