How can I make my JS game of Rock, Paper and Scissors Work?
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.
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
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> </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 answers
solution1
1 2017-02-07 12:59:01
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()?:
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. 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:
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.
Good luck with your school project though.
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. DS
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? Your probably want something like $("player_choice").value or .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.
solution2
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.