RPS游戏的复仇（这次是jquery！）

Question

是的，我知道我是 "that guy"。对不起。

问题是：我玩了剪刀石头布游戏，并决定尝试让它与 jQuery 一起使用。基本思想是，您应单击一个按钮为自己做出选择（石头、布或剪刀），然后当您单击 "go" 按钮时，您的选择将与随机生成的计算机选择进行比较。之后，将出现一个模式，说明您是赢了、输了还是平局。我已经完成并在 JS 中放置了点击侦听器，按钮似乎工作正常（它们将控制台记录它们应该记录的内容）。我不确定是什么问题。我猜我的 "compare" 函数没有传递正确的变量，因为模态将加载但它只是说 "ERROR!"。

这是HTML

  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <button id="rock">Rock</button>
      </div>
      <div class="col-sm-4">
        <button id="paper">Paper</button>
      </div>
      <div class="col-sm-4">
        <button id="scissors">Scissors</button>
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-sm-4 col-sm-offset-4">
        <button id="go" data-toggle="modal">Fight!</button>
      </div>
    </div>
  </div>

  <div id="bigWin" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;  </button>
          <h4 class="modal-title">Results!</h4>
        </div>
        <div class="modal-body">
          <p id="result"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

这是JS

 $( document ).ready(function() {
   //computer choice logic
  function computerChoice(){
    var choices = ['rock', 'paper', 'scissors'];
    var computerRando = choices[Math.floor(Math.random()* choices.length)];
    return computerRando;
  } 

  //button functions
  $("#rock").click(function(){
    choose("rock");
    });
  $("#paper").click(function(){
    choose("paper");
    }); 
  $("#scissors").click(function(){
    choose("scissors");
    }); 
  $("#go").click(function(){
    compare(choose, computerChoice);
  $("#bigWin").modal('show')
  });

  function choose(userChoice){
    if (userChoice === "rock"){
      return "rock";
    } else if(userChoice === "paper"){
      return "paper";
    } else if(userChoice === "scissors"){
      return "scissors";
    }
  }

  //fire off game
  var compare = function(choice1, choice2) {
    if (choice1 === choice2) {
      document.getElementById("result").innerHTML = "Tie!  Train harder!";
    }
    else if (choice1 === "rock") {
      if (choice2 === "scissors") {
        document.getElementById("result").innerHTML = "You have vanquished your enemy!";
      }
      else {
        document.getElementById("result").innerHTML = "You have brought shame upon your dojo!!";
      }
    }
    else if (choice1 === "paper") {
      if (choice2 === "rock") {
        document.getElementById("result").innerHTML = "You have vanquished your enemy!";
     }
      else if (choice2 ==="scissors") {
        document.getElementById("result").innerHTML = "You have brought shame upon your dojo!!";
      }
    }
    else if (choice1 === "scissors") {
      if (choice2 === "rock") {
        document.getElementById("result").innerHTML = "You have brought shame upon your dojo!!";
      }
      else if (choice2 === "paper") {
        document.getElementById("result").innerHTML = "You have vanquished your enemy!";
      }
    }
    else {
      document.getElementById("result").innerHTML = "ERROR!";
    }
  }
});

感谢任何帮助。

Answer 1

您调用 choose() 但从未将返回值赋给变量。

然后你调用 compare(choose, computerChoice); 但 'choose' 永远不会作为变量存在。

您可能还应该进一步研究 Javascript/JQuery 中的变量范围。

您的代码中还有一些错误。但是请尝试自己找到它们。

RPS游戏的复仇（这次是jquery！）

Revenge of the RPS game (this time with jquery!)

javascript

jquery

bootstrap-modal