跟踪胜利岩石剪刀

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方法中执行的函数在逻辑上是等效的，最好将其提取到一个函数中，以遵守编程的“不要重复自己” (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>