跟踪胜利岩石剪刀

时间:2015-12-18 03:35:45

标签: javascript

我试图在<RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/fragment1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginTop="-20dp" android:visibility="gone" /> <FrameLayout android:id="@+id/fragment2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginTop="-20dp" android:visibility="gone" /> </RelativeLayout> 制作一个石头剪刀游戏。我已经达到了这样的程度,即代码可以确定谁赢了,计算机还是你。

我陷入了以下困境:我无法跟踪我赢了多少次,我希望游戏在5次尝试后结束。然后它输出我在5场比赛中赢了多少次。

我的Javascript代码如下:

android:layout_above

1 个答案:

答案 0 :(得分:3)

这需要一些变量(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>

相关问题