Śledzenie zwycięstw Nożyczki z papieru skalowanego

Question

Próbowałem zrobić grę w papier nożycowy w wersji Javascript. Doszedłem do punktu, w którym kod może dowiedzieć się, kto wygrywa, komputer lub ty.

Utknąłem w następujący sposób: Nie mogę śledzić, ile razy wygrałem i chcę, aby gra zakończyła się po 5 próbach. Następnie wyświetla ile razy wygrałem z 5 gier.

kod Mój JavaScript jest poniżej:

---

<script type="text/javascript"> 
    var computerChoice = Math.random(); 
    if (computerChoice < 0.33) { 
     computerChoice = "rock"; 
    } else if(computerChoice <= 0.66) { 
     computerChoice = "paper"; 
    } else { 
     computerChoice = "scissors"; 
    } 
    for(i=1; i<6; i++) { 
    var counter =0; 
    document.getElementById("box1").onclick= function(){ 
     if(computerChoice == "rock"){ 
      alert("It is a tie, You chose Rock, computer chose Rock, Lame!"); 
     } 
     else if(computerChoice =="paper"){ 
      alert("Sucker, YOU LOST! You chose Rock, COMPUTER OVERLORD chose paper"); 
     } 
     else if(computerChoice=="scissors"){ 
      alert("DANG! You Beat Computer OVERLORD cuz he chose scissors"); 
      counter++; 
     } 
    } 
    document.getElementById("box2").onclick= function(){ 
     if(computerChoice == "paper"){ 
      alert("It is a tie, You chose Paper, computer chose Paper, Lame!"); 
     } 
     else if(computerChoice =="scissors"){ 
      alert("Sucker, YOU LOST! You chose Paper, COMPUTER OVERLORD chose scissors"); 
     } 
     else if(computerChoice=="rock"){ 
      alert("DANG! You Beat Computer OVERLORD cuz he chose rock"); 
      counter++; 
     } 
    } 
    document.getElementById("box3").onclick= function(){ 
     if(computerChoice == "scissors"){ 
      alert("It is a tie, You chose scissors, computer chose scissors, Lame!"); 
     } 
     else if(computerChoice =="rock"){ 
      alert("Sucker, YOU LOST! You chose scissors, COMPUTER OVERLORD chose rock"); 
     } 
     else if(computerChoice=="paper"){ 
      alert("DANG! You Beat Computer OVERLORD cuz he chose paper"); 
      counter++; 
     } 
    } 
    i++; 
    return counter; 
} 
var computerWins = 5-counter; 
if (computerWins > counter) { 
    console.log("COMPUTER OVERLORD WINS, HE IS YOUR MASTER!"); 
} 
else { 
    console.log("Hey computer overlord and you can be friends, just dont tell anyone you lost, k"); 
} 
</script> 

Answer 1

To wymaga pewnych zmiennych (round, human, computer), które mają global scope i żyć poza cyklu życia onClick metody. Zaktualizuj te zmienne odpowiednio po zakończeniu każdego zdarzenia onClick. Zauważ, że stworzyłem metodę updateRound, aby to osiągnąć.

Biorąc pod uwagę, że funkcja wykonywana w każdej metodzie onClick jest logicznie równoważne, to najlepiej, aby wyodrębnić go do funkcji, aby stosować się do programowania na dry (DRY) dogmat.

Istnieje również inny błąd logiczny w kodzie. Podczas gry decyzja komputera będzie taka sama dla wszystkich 5 gier. Aby zaktualizować decyzję komputera w każdej rundzie, należy zawrzeć logikę "wyboru komputera" w funkcji, która może być uruchamiana w każdej rundzie.

Oto bardziej elegancki JSFiddle roztworowi

var counter = 0; 
 
var computerChoice = Math.random(); 
 
if (computerChoice < 0.33) { 
 
    computerChoice = "rock"; 
 
} else if (computerChoice <= 0.66) { 
 
    computerChoice = "paper"; 
 
} else { 
 
    computerChoice = "scissors"; 
 
} 
 

 
document.getElementById("box1").onclick = function() { 
 
    var victor = 'COMPUTER OVERLORD'; 
 
    if (computerChoice == "rock") { 
 
    victor = 'draw'; 
 
    alert("It is a tie, You chose Rock, computer chose Rock, Lame!"); 
 
    } else if (computerChoice == "paper") { 
 
    alert("Sucker, YOU LOST! You chose Rock, COMPUTER OVERLORD chose paper"); 
 
    } else if (computerChoice == "scissors") { 
 
    victor = 'HUMAN'; 
 
    alert("DANG! You Beat Computer OVERLORD cuz he chose scissors"); 
 
    } 
 
    updateRound(victor); 
 
} 
 
document.getElementById("box2").onclick = function() { 
 
    var victor = 'COMPUTER OVERLORD'; 
 
    if (computerChoice == "paper") { 
 
    victor = 'draw'; 
 
    alert("It is a tie, You chose Paper, computer chose Paper, Lame!"); 
 
    } else if (computerChoice == "scissors") { 
 
    alert("Sucker, YOU LOST! You chose Paper, COMPUTER OVERLORD chose scissors"); 
 
    } else if (computerChoice == "rock") { 
 
    victor = 'HUMAN'; 
 
    alert("DANG! You Beat Computer OVERLORD cuz he chose rock"); 
 
    } 
 
    updateRound(victor); 
 
} 
 
document.getElementById("box3").onclick = function() { 
 
    var victor = 'COMPUTER OVERLORD'; 
 
    if (computerChoice == "scissors") { 
 
    victor = 'draw'; 
 
    alert("It is a tie, You chose scissors, computer chose scissors, Lame!"); 
 
    } else if (computerChoice == "rock") { 
 
    alert("Sucker, YOU LOST! You chose scissors, COMPUTER OVERLORD chose rock"); 
 
    } else if (computerChoice == "paper") { 
 
    victor = 'HUMAN'; 
 
    alert("DANG! You Beat Computer OVERLORD cuz he chose paper"); 
 
    } 
 
    updateRound(victor); 
 
} 
 

 
var round = 0; 
 
var human = 0; 
 
var computer = 0; 
 
var maxGames = 5; 
 

 
function updateRound(victor) { 
 
    round = round + 1; 
 
    if (victor == "HUMAN") { 
 
    human = human + 1; 
 
    } else if (victor == 'COMPUTER OVERLORD') { 
 
    computer = computer + 1; 
 
    } else { 
 
\t // It was a draw 
 
    } 
 
    if (round >= maxGames) { 
 
    alert('You have won ' + human + ' out of ' + round + ' games.'); 
 
    // reset the score 
 
    round = 0; 
 
    human = 0; 
 
    computer = 0; 
 
    } 
 
}

<html> 
 
<body> 
 
    <button id='box1'>Rock</button> 
 
    <button id='box2'>Paper</button> 
 
    <button id='box3'>Scissors</button> 
 
</body> 
 
</html>