Question

我试图使用codeacademy.com自学编码。我决定尝试应用我学到的一些东西，建立一个基于网络的摇滚，纸，剪刀，蜥蜴，spock游戏。游戏的代码运作良好，我知道可能有更好的方法，但我稍后会想到，但我想为玩家和计算机以及圆形计数器添加分数。任何人都可以告诉我如何使计数器工作，我已经尝试了几件事情，但无法弄清楚。

一旦我开始使用javascript，我就会构建一个单页网站来练习HTML和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>

Answer 1

您需要创建round作为全局变量，就像使用rock，paper，scissors等一样。以相同的方式定义

var round = 0;

并且您的roundUp函数应该按预期工作。

编辑：您也忘了用分号结束语句。我认为当你在功能中设置它时，你不需要在按钮点击时发送choice2作为参数。

Answer 2

你需要将var round = 1从compare（）中取出，因为每次运行compare函数时，round将重置为1.而是将var round = 0放在顶部，并使用其他变量声明。此外，我将脚本放在底部，以确保在脚本之前加载页面元素。我强烈建议在变量声明后使用分号。 http://jsfiddle.net/ja4m0qoL/

Answer 3

您需要运行一个更新playerScore的功能，就像您在玩家做出选择时为圆形计数器所做的那样。我会传递一个参数，告诉roundUp（）哪个玩家得分：

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
    }
};

我需要一个javascript圆形计数器和我的游戏得分计数器

3 个答案: