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
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 a question about my returns in the compare ,
i cant see the rusault in the console.
and ill be happy for advice where i can run codes like that?
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 (chice2 ==="cissors") {
return "rock wins"; }
else{
return "paper wins";}
}
else if (choice1 === "paper") {
if (chice2 ==="rock") {
return "paper wins"; }
else{
return "cissors wins";}
}
else if (choice1 === "cissors") {
if (chice2 ==="paper") {
return "cissors wins"; }
else{
return "rock wins";}
}
else if (choice1 !="cissors","paper","rock") {
return "You Are So Funny!!...."; }
};
If you are returning, then you have to return to something.
A return statement in a function will return to whatever is on the left hand side of the call to the function.
var foo = some_function();
If your code isn't in a function, then returning is an error.
If you want to log something to the console, then use console.log().
You spell choice2 wrong in many places and you have to store returned value to a variable.
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 data = compare(userChoice,computerChoice);
console.log(data);
console.log(compare(userChoice,computerChoice));
function compare(choice1, choice2) {
if(choice1 === choice2) {
return "The result is a tie!";
}
else if (choice1 === "rock") {
if (choice2 ==="cissors") {
return "rock wins"; }
else{
return "paper wins";}
}
else if (choice1 === "paper") {
if (choice2 ==="rock") {
return "paper wins"; }
else{
return "cissors wins";}
}
else if (choice1 === "cissors") {
if (choice2 ==="paper") {
return "cissors wins"; }
else{
return "rock wins";}
}
else if (choice1 !="cissors","paper","rock") {
return "You Are So Funny!!...."; }
};
I have made a function called "compare" and want to run it from a button with the id "start"
<input type="button" id="start" onClick="compare(userChoice, computerChoice)" value="Start">
but when it's pressed the function does not load, also I tried to display it in this
document.getElementById("score").innerHTML = compare(userChoice, computerChoice);
but the problem with it is that it starts as the page loads
<script>
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";
}
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"
}
}
};
document.getElementById("player").innerHTML = userChoice;
document.getElementById("computer").innerHTML = computerChoice;
document.getElementById("score").innerHTML = compare(userChoice, computerChoice) ;
</script>
Thank you for reading
your function compare returns a string, so, calling it from onclick will result in nothing happening, you haven't specified what you want to do with the return of the function
rather than all your "returns" in that function, you could replace them with
document.getElementById("score").innerHTML =
a better way would be something like
var compare = function() {
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";
}
var check = function () {
if (userChoice === computerChoice) {
return "The result is a tie!"
} else if (userChoice === "rock") {
if (computerChoice === "scissors") {
return "rock wins";
} else {
return "paper wins"
}
} else if (userChoice === "paper") {
if (computerChoice === "rock") {
return "paper wins";
} else {
return "scissors wins"
}
} else if (userChoice === "scissors") {
if (computerChoice === "paper") {
return "scissors wins";
} else {
return "rock wins"
}
}
}
document.getElementById("score").innerHTML = check();
};
or even
var compare = function() {
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";
}
document.getElementById("score").innerHTML = function () {
if (userChoice === computerChoice) {
return "The result is a tie!"
} else if (userChoice === "rock") {
if (computerChoice === "scissors") {
return "rock wins";
} else {
return "paper wins"
}
} else if (userChoice === "paper") {
if (computerChoice === "rock") {
return "paper wins";
} else {
return "scissors wins"
}
} else if (userChoice === "scissors") {
if (computerChoice === "paper") {
return "scissors wins";
} else {
return "rock wins"
}
}
}(); // IIEF
};
(code edited based on comment question)
in both cases you can change the button to
<input type="button" id="start" onClick="compare()" value="Start"/>
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>
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);