我需要一個JavaScript的圓形計數器和我的遊戲的得分計數器

我試圖教自己使用codeacademy.com編碼。我決定嘗試應用我學到的一些東西來構建基於網絡的岩石，紙張，剪刀，蜥蜴，spock遊戲。遊戲的代碼運行良好，我知道可能有更好的方法來做到這一點，但我後來想到了這一點，但我想爲玩家和計算機加上一個圓形計數器的分數。任何人都可以告訴我如何讓計數器工作，我已經嘗試了一些事情，但無法弄清楚。我需要一個JavaScript的圓形計數器和我的遊戲的得分計數器

一旦我有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>

來源

2014-09-30 Marc

至少你錯過了一個分號。 – Roope 2014-09-30 16:36:49

如果你使用[jQuery]（http://jquery.com/），這將會少得多的代碼。使用'document.getElementById（）'是非常黑客。至少編寫你自己的包裝函數來讓這些減少冗長。你也迫切需要一個'switch'語句而不是整個'if's堆。 – tadman 2014-10-01 16:08:44

嗨tadman，感謝您的反饋。我對JavaScript非常陌生，上個星期六我只開始了codeacademy.com java模塊，並且在創建大部分遊戲後纔開始瞭解交換機。我應該在4到5天內到達jquery模塊，所以一旦我學到更多東西，我可能會重寫它。 – Marc 2014-10-01 19:47:48

您需要創建round爲全局變量，你與rock，paper做到了，scissors等定義輪以同樣的方式

var round = 0;

，並按照預期的roundUp功能應該工作。

編輯：你也忘了用分號結束你的語句。我想你不需要在按鈕點擊時將choice2作爲參數發送，而將它設置在你的功能中。

來源

2014-09-30 16:41:29 TheFrozenOne

您需要將var round = 1從compare（）中移出，因爲每次運行compare函數時，round都會重置回1.取而代之的是將var round = 0與其他變量聲明放在頂部。另外，我會將腳本粘貼在底部，以確保在腳本之前加載頁面元素。我強烈建議在變量聲明之後使用分號。 http://jsfiddle.net/ja4m0qoL/

來源

2014-09-30 16:43:28

這工作得很好，我已經將鏈接中添加的代碼轉移到鏈接中，以確保我完全明白我出錯的位置。感謝您花時間回答我的問題並在jsfiddle.net中創建代碼 – Marc 2014-10-01 19:54:55

你需要運行一個函數來更新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 
    } 
};

來源

2014-09-30 16:48:46

我需要一個JavaScript的圓形計數器和我的遊戲的得分計數器

回答

相關問題