如何使我的Rock，Paper and Scissors JS游戏工作？

Question

I need your help to make the game of rock, paper and scissors work for a school assignment. 我需要您的帮助，使石头，纸和剪刀的游戏可以完成学校作业。 I need your suggestions to help me make this JS game app to work correctly. 我需要您的建议来帮助我使此JS游戏应用程序正常运行。

The more input from others for this application to work correctly, the better!! 为了使该应用程序正常工作，其他人输入的信息越多越好！！

The assignment requires three major things as so: * the getchoices function works to acquire the input from the user * the conditional statement below the variables computer_choice and player_choice that tests for the random values the computer generates and does the comparison and then prints out the correct value * the game works correctly 分配需要进行三项主要工作：* getchoices函数用于从用户获取输入*变量computer_choice和player_choice下面的条件语句，用于测试计算机生成的随机值并进行比较，然后打印出正确的值值*游戏正常运行

Thanks for all of the help in advance! 感谢您提前提供的所有帮助！

Sean 肖恩

 var $ = function (id) { return document.getElementById(id); } window.onload = function () { $("show").onclick = getChoices; } compare(player_choice,computer_choice); function getChoices() { computer_choice = Math.random(); player_choice = $("player_choice").onclick.value } if(computer_choice <= 0.33 ){ computer_choice = "Rock"; } else if(computer_choice <= 0.66){ computer_choice= "Paper"; } else { computer_choice = "Scissors"; } var compare = function(choice1, choice2){ if(choice1 == choice2){ return "The result is a tie!"; } else if(choice1 == "Rock"){ if(choice2 == "Scissors"){ return "Rock wins"; } else { return "Paper wins"; } if(choice1 == "Paper"){ if(choice2 == "Rock"){ return "Paper wins"; } } else{ return "Scissors wins"; } } else if(choice1 == "Scissors"){ if(choice2 == "Paper"){ return "Scissors wins"; } else{ return "Rock wins"; } } };

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Shipping Order Form</title> <link rel="stylesheet" href="assets/bootstrap.min.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="assets/game.js"></script> </head> <body> <p>&nbsp;</p> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="form-group"> <label for="player_choice">Select either rock, paper or scissors:</label> <select name="player_choice" id="player_choice" class="form-control"> <option value=""></option> <option value="rock">rock</option> <option value="paper">paper</option> <option value="scissors">scissors</option> </select> </div> <div class="form-group"> <input type="button" class="btn btn-default" value="Show" name="show" id="show" /> </div> </div> </div> </div> </body> </html>

Answer 1

Your formatting makes the code kinda hard to read but some things that I can spot: 您的格式设置使代码有点难以阅读，但我可以发现以下几点：

compare(player_choice,computer_choice);

It seems this is called globally in your .js file and will be called once when .js file is loaded, shouldnt this be called after the user makes a choice, eg at the end of the getChoices()?: 看来这在您的.js文件中被全局调用，并且在加载.js文件时将被调用一次，是否应该在用户做出选择后调用它，例如在getChoices（）的末尾？

function getChoices() {
  computer_choice = Math.random();
  player_choice = $("player_choice").onclick.value
  compare(player_choice,computer_choice);
}

Another obvious error would be that the second part of your compare() function. 另一个明显的错误是compare（）函数的第二部分。 The formatting makes this kinda hard to spot: 格式使得这种点很难发现：

var compare = function(choice1, choice2)
{
   if(choice1 == choice2)
   {
       return "The result is a tie!";
   }
   else if(choice1 == "Rock")
   {
       if(choice2 == "Scissors")
       {
           return "Rock wins";
       }
       else 
       {
           return "Paper wins";
       }
      if(choice1 == "Paper")
      {
          if(choice2 == "Rock")
          {
             return "Paper wins";
          }
       }
       else
       {
          return "Scissors wins";
       }
    }
    else if(choice1 == "Scissors")
    {
        if(choice2 == "Paper")
        {
            return "Scissors wins";
        }
        else
        {
            return "Rock wins";
         }
     }
};

As you can see it seems you've messed up your brackets a bit. 如您所见，似乎您已经把括号弄乱了。 The "if(choice1 == "Paper")" should be an else if on a level above where it is: 如果“ if（choice1 ==“ Paper”）“在高于该级别的位置，则应为else：

else if(choice1 == "Rock")
{
   if(choice2 == "Scissors")
   {
       return "Rock wins";
   }
   else 
   {
       return "Paper wins";
   }
}
else if (choice1 == "Paper")
{
  ....
}
else if (choice1 == "Scissors") // this could be an else
{
   ...
}

Other than that I would take Wolfies advice to heart, if you learn to format your code and ask a specific question with an explanation of why/what isnt working you are much more likely to get a good answer. 除此之外，如果您学会格式化代码并提出一个具体问题并解释为什么/什么不起作用，那么我会怀着Wolfies的建议，您很有可能会得到一个好的答案。

Good luck with your school project though. 不过，祝您的学校项目好运。

PS. PS。 The compare() function returns a result-string, you probably want to print that somewhere or set the text of some element to it because as it is now you will return the string but not do anything with the returned value. compare（）函数返回一个结果字符串，您可能希望将其打印在某个位置或将某个元素的文本设置为该字符串，因为现在您将返回字符串，但不对返回的值做任何事情。 DS DS

PSS. PSS。 player_choice = $("player_choice").onclick.value is probably not what you want to do, it's been a while since I used JQuery but I dont think .onclick.value is even valid? player_choice = $（“ player_choice”）。onclick.value可能不是您想要执行的操作，已经有一段时间了，因为我使用了JQuery，但我不认为.onclick.value甚至有效吗？ Your probably want something like $("player_choice").value or .selectedValue. 您可能想要类似$（“ player_choice”）。value或.selectedValue之类的东西。 You should also be careful of captilizing your options because in your compare function you compare against "Rock" etc but your values in the select-element are called "rock" etc. DSS. 您还应该谨慎选择选项，因为在比较功能中，您将与“ Rock”等进行比较，但在select元素中的值称为“ rock”等。DSS。

Answer 2

JSFiddle JSFiddle

 var choices = ['scissors', 'rock', 'paper'], _game = {}, gameNo = 0, combinations = { win: [ ['rock', 'scissors'], ['scissors', 'paper'], ['paper', 'rock'] ] }, wins = { cpu: 0, player: 0, draw: 0 }; _game.getRandomInt = function (min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; }; _game.computerChoice = function () { return choices[ _game.getRandomInt(0, choices.length) ]; }; _game.checkCombinations = function (a, b) { var playerWin = [a, b], winnerBlock = $('div.winner'), isPlayerWin = false; $('div.player-choice').text(a.toUpperCase()); $('div.cpu-choice').text(b.toUpperCase()); if (a === b) { wins.draw++; return winnerBlock.text('Game #' + gameNo + ' : Draw'); } $.each(combinations.win, function (c, d) { if (a == d[0] && b == d[1]) { wins.player++; return isPlayerWin = true; } }); if (!isPlayerWin) { wins.cpu++; } return isPlayerWin ? winnerBlock.text('Game #' + gameNo + ' : Player wins') : winnerBlock.text('Game #' + gameNo + ' : CPU wins'); }; _game.Play = function (choice) { return _game.checkCombinations( choice, _game.computerChoice() ); }; $('div.choice[data-choice]').click(function () { gameNo++; _game.Play($(this).data('choice')); $.each(wins, function (i, o) { $('td[data-winner="' + i + '"]').text(o) }); });

 div.container { width: 100% !important; text-align: center; } div.choice { width: 128px; text-align: center; background: yellow; padding: 16px; display: inline-block; margin: 0 8px; cursor: pointer; } div.choice > p { background: yellow; width: 100% !important; } div.choice:hover { background: green; transition-duration: 1.7s; } div.winner { margin: 10px 0; padding: 4px; } div.results { text-align: center; margin: 0 auto; width: 100%; } div.results table { margin: 0 auto; width: 468px; } div.results table tr td { width: 156px !important; padding: 8px; text-align: center; } div.choices div { width: 70px; text-align: center; display: inline-block; margin: 2px; }

 <body> <div class="container"> <div class='choice' data-choice='rock'> <img src='http://icons.veryicon.com/png/System/GANT%202/Rock.png'> Rock <br> </div> <div class='choice' data-choice='scissors'> <img src='https://image.flaticon.com/icons/png/128/124/124818.png'> Scissors <br> </div> <div class='choice' data-choice='paper'> <img src='http://icons.veryicon.com/png/Game/Larry%20Laffer/Toilet%20Paper.png'> Paper <br> </div> <div class='winner'> </div> <div class="choices"> <div class="player-choice"></div> <div><img src="http://www.whbqt.info/UserFiles/image/versus.png" width="32" height="32" alt=""></div> <div class="cpu-choice"></div> </div> <div class="results"> <table> <thead> <th>Player</th> <th>Draws</th> <th>CPU</th> </thead> <tr> <td data-winner="player">0</td> <td data-winner="draw">0</td> <td data-winner="cpu">0</td> </tr> </table> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何使我的Rock，Paper and Scissors JS游戏工作？

问题描述

2 个解决方案

解决方案1
1 2017-02-07 12:59:01

解决方案2
1 2017-02-07 13:57:15

如何使我的Rock，Paper and Scissors JS游戏工作？

问题描述

2 个解决方案

解决方案1 1 2017-02-07 12:59:01

解决方案2 1 2017-02-07 13:57:15

解决方案1
1 2017-02-07 12:59:01

解决方案2
1 2017-02-07 13:57:15