Tenere traccia delle vittorie Forbici di carta rock

Question

Stavo cercando di creare un gioco di forbici con carta di roccia in Javascript. Sono arrivato a un punto in cui il codice può capire chi vince, il computer o te.

Sono bloccato al seguente: Non riesco a tenere traccia di quante volte ho vinto e voglio che il gioco finisca dopo 5 tentativi. Quindi emette quante volte ho vinto su 5 giochi.

codice Javascript Il mio è qui sotto:

---

<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

Questo richiede alcune variabili (round, human, computer) che hanno un global scope e vivere al di fuori del ciclo di vita del metodo del onClick. Aggiorna queste variabili di conseguenza dopo ogni evento onClick. Notare il metodo updateRound che ho creato per ottenere ciò.

dato che la funzione svolta in ogni metodo onClick è logicamente equivalente, è meglio per estrarlo in una funzione per aderire alla programmazione del Non Repeat Yourself (DRY) dogma.

C'è anche un altro errore logico possibile nel codice. Poiché si trova, la decisione del computer sarà la stessa per tutti e 5 i giochi. Per aggiornare la decisione del computer ad ogni round, è necessario avvolgere la logica "scelta del computer" in una funzione che può essere attivata ogni round.

Ecco una soluzione più elegante 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>