Überblick über Gewinne Rock Papier Schere

Question

Ich habe versucht, ein Stein Papier Schere Spiel in Javascript zu machen. Ich bin an einen Punkt gelangt, an dem der Code herausfinden kann, wer gewinnt, der Computer oder Sie.

Ich bin bei der folgenden fest: Ich kann nicht verfolgen, wie oft ich gewonnen habe und ich möchte das Spiel nach 5 Versuchen beenden. Dann gibt es aus, wie oft ich aus 5 Spielen gewonnen habe.

Mein Javascript-Code ist unten:

---

<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

Dies erfordert einige Variablen (round, human, computer), die eine global scope haben und außerhalb des onClick Methode des Lebenszyklus leben. Aktualisieren Sie diese Variablen entsprechend, nachdem jedes onClick Ereignis abgeschlossen ist. Beachten Sie die updateRound Methode, die ich zu dem Zweck erstellte.

Da die Funktion in jedem onClick Verfahren durchgeführt logisch äquivalent ist, ist es am besten, es zu einer Funktion extrahieren auf die Programmierung des haften Sie selbst (DRY) Dogma nicht wiederholen.

Es gibt auch einen anderen möglichen logischen Fehler in Ihrem Code. Wie es sitzt, wird die Entscheidung des Computers für alle 5 Spiele gleich sein. Um die Entscheidung des Computers in jeder Runde zu aktualisieren, ist es notwendig, die "Computerauswahl" -Logik in eine Funktion einzubinden, die jede Runde ausgelöst werden kann.

Hier ist eine elegantere Lösung JSFiddle

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>