I am new to js, I just wrote the basic function below based on the rock, paper, scissors game. For some reason the result of the compare function is always showing up as a
"draw" rather than the other results. What am I doing wrong here?
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
choice1 = userChoice;
choice2 = computerChoice;
var compare = function (choice1, choice2) {
if (choice1 == choice2) {
return "draw!";
}
if (choice1 == "rock") {
if (choice2 == "scissors") {
return "rock wins!";
} else {
return "paper wins!";
}
}
if (choice1 == "paper") {
if (choice2 == "scissors") {
return "scissors wins!";
} else {
return "paper wins!";
}
}
if (choice1 == "scissors") {
if (choice2 == "rock") {
return "rock wins!";
} else {
return "scissors wins!";
}
}
};
compare();
Thanks, Us
You're calling compare without parameters:
compare();
Therefore choice1 and choice2 both equals undefined and your game will always end up as draw.
You should try calling your compare function like this:
compare(userChoice, computerChoice);
If you define a function, the parameter list defines the names of the given variables within the scope of the function. It's not a naming convention for the variables which should be available in the function itself.
You have defined the function with two arguments:
var compare = function (choice1, choice2)
However you have invoked it with 0.
Try specifying the choices:
compare("rock", "paper");
You can't turn on function only by typing func_name() without arguments, thats like "dry shot". Read about function declaring
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
choice1 = userChoice;
choice2 = computerChoice;
function compare (choice1, choice2) {
if (choice1 == choice2) {
return "draw!";
};
if (choice1 == "rock") {
if (choice2 == "scissors") {
return "rock wins!";
} else {
return "paper wins!";
}
}
if (choice1 == "paper") {
if (choice2 == "scissors") {
return "scissors wins!";
} else {
return "paper wins!";
}
}
if (choice1 == "scissors") {
if (choice2 == "rock") {
return "rock wins!";
} else {
return "scissors wins!";
}
}
};
compare(choice1, choice2);
Related
I have no idea where the error is anymore. It was first saying that I had an unexpected identifier, then I had an unmatched }, now I have an illegal return statement. I just need some help. Thanks.
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
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 (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
}
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
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 (choice2 === "rock") {
return "paper wins";
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
}
}
}
Properly indented code can help find missing curly braces. By the time that something is indented 4 times, it's time to see if it can be refactored.
For example:
The first if has a return. There is no reason to have an "else if" after that. That will get rid of one indent. Same can be said of ("choice2 === "rock"). Trust that when a return is written that it will actually return.
I have the code for a basic "rock, paper, scissor" game in JS. It works with a promt but I would like to be able to make your choices with buttons. I would like to use "getElementById" and "addEventListener("click")". Could anyone point me in the right direction?
HTML:
<button id ="rock"> Rock </button>
Paper
Scissor
JavaScript:
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
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";
} if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else if (choice2 === "paper") {
return "scissors wins";
}
}
}
}
}
compare (userChoice, computerChoice);
Use the onclick event handler (documentation) in several blocks like this:
document.getElementById('rock').onclick = function(e){
userChoice = 'rock'
}
Here is an example (click "run code snippet"):
document.getElementById('rock').onclick = user;
document.getElementById('paper').onclick = user;
document.getElementById('scissors').onclick = user;
function user(){
var userChoice = this.id;
console.log("User: " + userChoice)
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
}else if(computerChoice <= 0.67) {
computerChoice = "paper";
}else{
computerChoice = "scissors";
};
console.log("Computer: " + computerChoice);
console.log(compare(userChoice, computerChoice));
function compare(choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
}
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";
}
}
if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else {
return "scissors wins";
}
}
}
}
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissor</button>
PS: your function compare was returning undefined for some cases.
I'm trying to learn javascript and this lesson is having me create a rock, paper, scissors game. It is asking for me to:
Call your function and pass in userChoice and computerChoice as your two arguments.
I am not sure how to pass in userChoice and computer Choice. I tried doing this:
console.log(compare + userChoice + computerChoice)
But obviously it isn't correct.
What am I doing wrong??
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
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 {
"paper wins";
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
} else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
} else {
return "scissors wins";
}
}
}
console.log(compare + userChoice + computerChoice)
You're VERY close, arguments are passed to functions like this:
compare(userchoice, computerChoice);
I am learning JavaScript through Codecademy. There I was asked to make a rock paper and scissor game. I did it by coding the following:
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
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"
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins"
} else {
return "scissors wins"
}
} else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins"
} else {
return "scissors wins"
}
};
};
compare(userChoice, computerChoice);
but later I myself added a code to stop unavailable choices like if any one choosed "egg"
var a = function() {
if (userchoice !== "scissors") {
if (userChoice !== "rock") {
if (userChoice !== "paper") {
console.log "unavilable"
};
};
};
};
to check I typed "dog" but it didn't display"unavailable"
console.log "unavilable"
should be
console.log("unavilable")
Also you need to call the function a:
compare(userChoice, computerChoice);
a();
Update:
if (userchoice !== "scissors") { //Problem is here "userChoice" and not "userchoice"
See the fiddle.
It would be better to concat the conditions
if(userchoice!="..." && userchoice!="...")
console.log(...)
or even use
switch(userchoice)
case: "rock":
case: "paper":
console.log(...);
break;
You have mistyped userChoice with userchoice.
I would recommend you to implement a method inArray. The code will be more readable this way. Here is the code for it:
function inArray(needle, haystack){
var length = haystack.length;
for(var i = 0; i < length; i++) {
if(haystack[i] == needle) return true;
}
return false;
}
Then you are just calling it in your code. Here is a jsFiddle with the complete code: jsFiddle.net
Obviously, this will print out rock/paper/scissors wins or it's a tie.
What is the best way to achieve a result like "Rock beats scissors -- Computer wins!" and such?
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);
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";
}
} else 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";
}
}
}
compare(userChoice,computerChoice);
I have some knowledge of functions and variables that I think is enough to solve this -- I just can't figure it out. I have less than 8 hours of javascript experience.
Also, this is not my homework, I just finished a lesson in codecademy and wondered this.
I would look into changing the strings in the program so instead of just "scissors wins" I would change that to "Scissors beats (insert corresponding choice here) - Player wins!!!"
You can find the corresponding choice by trial and error debugging or by following the logic of the nested if's and else's.
Hope this helps ;)
Here is a simple way to do it by appending to the DOM.
This example uses a do {} while () loop to keep asking the player if he wants to play, and if so asks for his choice. It then displays the result (tie or player / cpu wins) to the output element on the page. This method is nice because it keeps track of the plays for you, so if you need to do a "best 3 of 5" you can see who ultimately wins!
jQuery jsFiddle example: http://jsfiddle.net/edahqpho/3/
Pure javascript jsFiddle example: http://jsfiddle.net/edahqpho/1/
HTML
<div id='output'></div>
Javascript (pure JS example)
function play() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
return compare(userChoice, computerChoice);
}
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";
}
} else 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";
}
}
}
var output = document.getElementById('output');
do {
var result = play();
var display = document.createElement("DIV");
var text = document.createTextNode(result);
display.appendChild(text);
output.appendChild(display);
}
while (window.confirm("Play again?"));
This next snippet demonstrates a more advanced visualization of the game using similar DOM injecting techniques (which are waaaay easier with a library like jQuery).
function play() {
do {
var userChoice = prompt("Do you choose rock, paper or scissors?").toLowerCase();
} while (userChoice != "rock" && userChoice != "paper" && userChoice != "scissors");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice);
var playResult = {
User: userChoice,
CPU: computerChoice,
Winner: compare(userChoice, computerChoice)
};
return playResult;
}
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
return "tie";
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "player";
} else {
return "cpu";
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
return "player";
} else {
return "cpu";
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
return "player";
} else {
return "cpu";
}
}
}
function getIcon(shape) {
var url = "";
switch (shape) {
case "paper":
url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-paper-icon.png";
break;
case "rock":
url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-rock-icon.png";
break;
case "scissors":
url = "http://megaicons.net/static/img/icons_sizes/8/178/256/rock-paper-scissors-scissors-icon.png";
break;
}
return url;
}
function game() {
var $output = $("#output");
var result = play();
$output.append("<tr><td><img src='" + getIcon(result.User) + "'/></td><td><img src='" + getIcon(result.CPU) + "'/></td><td>" + result.Winner.toUpperCase() + "</td></tr>");
setTimeout(function () {
if (window.confirm("Play again?")) {
game()
}
}, 10);
}
// start the game of all games...
game();
#output th, #output td {
margin: 10px;
padding: 10px;
font-size: 14px;
font-family:"Segoe UI", Arial, "Sans serif";
}
img {
width: 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='output'>
<tr>
<th>Player</th>
<th>CPU</th>
<th>Winner</th>
</tr>
</table>