跟踪胜利 石头剪刀布

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)，它们具有 global scope 并且位于 onClick 方法的生命周期之外。在每个onClick 事件完成后相应地更新这些变量。请注意我创建的用于完成此操作的 updateRound 方法。

鉴于在每个onClick 方法中执行的函数在逻辑上是等价的，最好将其提取为一个函数以遵守编程的不要重复自己(DRY) 教条。

您的代码中还有另一个可能的逻辑错误。就目前而言，计算机的决定对于所有 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>