跟踪wins岩石剪刀

Question

我想在Javascript做一个石头剪刀游戏。我已经到了这样的地步，代码可以分辨出谁赢了，电脑还是你。

，我被困在以下几个方面：，我无法跟踪我赢了多少次，我希望在5次尝试之后游戏结束。然后它输出了我在5场比赛中赢了多少次。

我的Javascript代码如下：

<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

这需要一些变量(round, human, computer)，这些变量具有全球范围，并且处于onClick方法的生命周期之外。在每个onClick事件完成后相应地更新这些变量。注意，我创建了一个updateRound方法来完成这个任务。

假设在每个onClick方法中执行的函数在逻辑上是等价的，那么最好将其提取到一个函数中，以遵守编程的--不要重复 (干)的教条。

您的代码中还有另一个可能的逻辑错误。当它坐在那里，电脑的决定将是相同的，对所有的5个游戏。为了每一轮更新计算机的决策，必须将“计算机选择”逻辑封装在一个可以每一轮触发的函数中。

这里有一个更优雅的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 {
	// 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>

​