如何使我的Rock，Paper and Scissors JS游戏工作？
[英]How can I make my JS game of Rock, Paper and Scissors Work?
问题描述
我需要您的帮助，使石头，纸和剪刀的游戏可以完成学校作业。 我需要您的建议来帮助我使此JS游戏应用程序正常运行。
为了使该应用程序正常工作，其他人输入的信息越多越好！！
分配需要进行三项主要工作：* getchoices函数用于从用户获取输入*变量computer_choice和player_choice下面的条件语句，用于测试计算机生成的随机值并进行比较，然后打印出正确的值值*游戏正常运行
感谢您提前提供的所有帮助！
肖恩
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> </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>
2 个解决方案
解决方案1
1 2017-02-07 12:59:01
您的格式设置使代码有点难以阅读，但我可以发现以下几点：
compare(player_choice,computer_choice);
看来这在您的.js文件中被全局调用，并且在加载.js文件时将被调用一次，是否应该在用户做出选择后调用它，例如在getChoices（）的末尾？
function getChoices() {
computer_choice = Math.random();
player_choice = $("player_choice").onclick.value
compare(player_choice,computer_choice);
}
另一个明显的错误是compare（）函数的第二部分。 格式使得这种点很难发现：
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";
}
}
};
如您所见，似乎您已经把括号弄乱了。 如果“ 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
{
...
}
除此之外，如果您学会格式化代码并提出一个具体问题并解释为什么/什么不起作用，那么我会怀着Wolfies的建议，您很有可能会得到一个好的答案。
不过，祝您的学校项目好运。
PS。 compare（）函数返回一个结果字符串，您可能希望将其打印在某个位置或将某个元素的文本设置为该字符串，因为现在您将返回字符串，但不对返回的值做任何事情。 DS
PSS。 player_choice = $（“ player_choice”）。onclick.value可能不是您想要执行的操作，已经有一段时间了，因为我使用了JQuery，但我不认为.onclick.value甚至有效吗？ 您可能想要类似$（“ player_choice”）。value或.selectedValue之类的东西。 您还应该谨慎选择选项，因为在比较功能中，您将与“ Rock”等进行比较，但在select元素中的值称为“ rock”等。DSS。
解决方案2
1 2017-02-07 13:57:15
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>
如何让我的摇滚，纸张，剪刀游戏刷新按钮点击？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.