I have some functions and some variables. I would like to return a variable and the function outcome as text on my browser.
What I have done is I have made a HTML file with the text:
<SCRIPT SRC="rockpaper.js">
</SCRIPT>
And this refers to this javascript file:
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "Computer chooses rock";
} else if(computerChoice <= 0.67) {
computerChoice = "Computer chooses paper";
} else {
computerChoice = "Computer chooses scissors";
}
console.log(computerChoice);
var compare = function(choice1,choice2)
{
if(choice1===choice2)
{
return("The result is a tie!");
}
if(choice1==="Computer chooses rock")
{
if(choice2==="scissors")
{
return("rock wins");
}
else
{
return("paper wins");
}
}
if(choice1==="Computer chooses paper")
{
if(choice2==="rock")
return("paper wins");
else
{
return("scissors wins");
}
}
if(choice1==="Computer chooses scissors")
{
if(choice2==="rock")
{
return("rock wins");
}
else
{
return("scissors wins");
}
}
}
console.log(compare(computerChoice,userChoice))
However, when I open it with a browser, the text doesn't display, but the prompt does.
It works fine in Codecademy, though.
Here is a jsFiddle that logs data to the screen. I noticed your tie logic is flawed. You are cheking a big-ass string to the users simple one-word string. You need to tokenize; extract the state from the computer choice string.
Javascript
// Helpful utility function...
function logResultToScreen(result) {
var block = document.createElement('div');
var text = document.createTextNode(result);
var output = document.getElementById('output');
block.appendChild(text);
output.insertBefore(block);
}
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "Computer chooses rock";
} else if (computerChoice <= 0.67) {
computerChoice = "Computer chooses paper";
} else {
computerChoice = "Computer chooses scissors";
}
console.log(computerChoice);
logResultToScreen(computerChoice);
var compare = function (choice1, choice2) {
var tokens = choice1.split(' ');
if (tokens[2] === choice2) {
return ("The result is a tie!");
}
if (choice1 === "Computer chooses rock") {
if (choice2 === "scissors") {
return ("rock wins");
} else {
return ("paper wins");
}
}
if (choice1 === "Computer chooses paper") {
if (choice2 === "rock") {
return ("paper wins");
} else {
return ("scissors wins");
}
}
if (choice1 === "Computer chooses scissors") {
if (choice2 === "paper") {
return ("scissors wins");
} else {
return ("rock wins");
}
}
}
var output = compare(computerChoice, userChoice);
logResultToScreen(output);
console.log(output);
HTML
<div id="output"><strong>Results:</strong></div>
Your using console.log() so you should see output in the developer console (press F12 and open console tab).
To put it on the page, you have to create a DOM(html) element and add it to the page.
<SCRIPT SRC="rockpaper.js">
</SCRIPT>
<div id="container"></div>
in your script replace
console.log(compare(computerChoice,userChoice))
with
var container = document.getElementById("container");
container.innerHTML = compare(computerChoice,userChoice);
Happy coding!
Related
var gameFunction = function()
{
var userChoice = prompt("What do you choose: rock, paper, or scissors?")
var computerChoice = Math.random();
if (0 < computerChoice < 0.33)
{
computerChoice = "rock";
}
else if (0.33 < computerChoice < 0.67)
{
computerChoice = "scissors";
}
else
{
computerChoice = "paper";
}
console.log("Computer choice: ",computerChoice)
if (userChoice === computerChoice)
{
return "The result is a tie! Enter a new result?"
gameFunction();
}
else if (userChoice === "rock")
{
if (computerChoice === "scissors")
{
return "rock wins"
}
else if (computerChoice === "paper")
{
return "paper wins"
}
}
else if (userChoice === "paper")
{
if (computerChoice === "rock")
{
return "paper wins"
}
else if (computerChoice === "scissors")
{
return "scissors win"
}
}
else if (userChoice === "scissors")
{
if (computerChoice === "paper")
{
return "scissors wins"
}
else if (computerChoice === "rock")
{
return "rock win"
}
}
}
gameFunction();
This is the 9/9 section of the "Rock paper scissors" game from Codecademy: Javascript.
My problem is this:
When the User and Computer ties, it's supposed to re-run the entire "gameFunction" function, meaning it should ask a new input from the user and get a new input from the computer.
However, the program just prints out "The result is a tie!" without re-running "gameFunction." How can I fix this?
No line executed after return statement.. try
gameFunction();
return "The result is a tie! Enter a new result?"
The return statement exits the "gameFunction" function so it doesn't execute the next line. Try using a prompt instead like this:
if (userChoice === computerChoice)
{
prompt("The result is a tie! Enter a new result?");
gameFunction();
}
This way the user can respond to your prompt and you can use it to decide if the game is to continue. You could always just use an alert as well :)
Change return to alert(), like below:
From:
return "The result is a tie! Enter a new result?"
To:
alert("The result is a tie! Enter a new result?");
what about this: https://jsfiddle.net/41gcfL6g/
The thing here is adding a parameter to the function, so you can determine if have been a tie the last time you played. And then in the case of tie, instead of calling the function after the return, you return the result of the gameFunction
The recusive gameFunction() method inside the gameFunction() because the
control returns to the first calling function.
if (userChoice === computerChoice)
{
return "The result is a tie! Enter a new result?"
gameFunction();
}
So instead of return you can print a message there showing there is a tie.
if (userChoice === computerChoice)
{
alert("The result is a tie! Enter a new result?")
gameFunction();
}
and when the above condition is not met then it simply returns to the calling area and stop.
see fiddle, don't use return, console.log https://jsfiddle.net/o62vda05/
var userChoice;
function startGame()
{
userChoice = prompt("What do you choose: rock, paper, or scissors?");
gameFunction();
}
function gameFunction()
{
var computerChoice = Math.random();
if (0 < computerChoice < 0.33)
{
computerChoice = "rock";
}
else if (0.33 < computerChoice < 0.67)
{
computerChoice = "scissors";
}
else
{
computerChoice = "paper";
}
console.log("Computer choice: ",computerChoice)
if (userChoice === computerChoice) {
console.log( "The result is a tie! Enter a new result?");
startGame();
} else if (userChoice === "rock") {
if (computerChoice === "scissors")
{
console.log( "rock wins");
}
else if (computerChoice === "paper")
{
console.log( "paper wins");
}
} else if (userChoice === "paper") {
if (computerChoice === "rock") {
console.log( "paper wins");
} else if (computerChoice === "scissors") {
console.log ("scissors win");
}
} else if (userChoice === "scissors") {
if (computerChoice === "paper") {
console.log ("scissors wins");
} else if (computerChoice === "rock") {
console.log( "rock win");
}
}
}
startGame();
As a newbie, following the code academy course, I've come across a problem building a rock paper scissors game.
I've created 2 functions which contain the whole program, the program runs fine when the 2 choices are different but it returns undefined when the choices are the same and I can't understand why.
I can see that when the choices are tied, new choices keep being assigned until they are different and then the compare function is called on these different choices, which should return a winning result.
Just to add, I'd like to fix the code as it is, not rewrite the entire thing, I've completed this exercise on codeacademy but I'm just trying to do it in a different way as 2 self contained functions.
Thanks
var makeChoices = function() {
userChoice = "";
computerChoice = "";
userChoice = prompt("Do you choose rock, paper or scissors?");
computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log("Computer: " + computerChoice + " " + "User: " + userChoice);
};
var compare = function(choice1, choice2) {
if (choice1 === choice2) {
makeChoices();
compare(userChoice, computerChoice);
}
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";
}
}
else {
return "invalid choice by user";
}
};
makeChoices();
compare (userChoice, computerChoice);
You have to return the result of the recursive call. Try changing
...
compare(userChoice, computerChoice);
...
to
...
return compare(userChoice, computerChoice);
...
When it is equal, you have "compare(userChoice, computerChoice);". The variables userChoice and computerChoice were defined in the makeChoices() function. They won't be available in compare() function. You can make them as global variables or consider moving you the compare() function calls to the bottom of makeChoices().
We all start the same way this impressive language!, do not worry about being a novice, you will soon be a teacher if you do not surrender!,here is the complete code for this exercise below:
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(computerChoice, userChoice) {
if (computerChoice===userChoice) {
return("The result is a tie!");
}
if (userChoice === "rock"){
if (computerChoice === "paper") {
return("paper wins");
}
else if (computerChoice === "scissors") {
return("rock wins");
}
}
if (userChoice === "scissors") {
if (computerChoice==="paper") {
return("scissors wins");
}
else if (computerChoice === "rock") {
return("rock wins");
}
}
if (userChoice === "rock") {
if (computerChoice==="scissors") {
return "rock wins";
}
else if (computerChoice=== "paper") {
return "paper wins";
}
}
if (userChoice === "paper") {
if (computerChoice ==="scissors") {
return "scissors wins";
}
else if (computerChoice==="rock") {
return "paper wins";
}
}
};
compare();
I made such a game before:
var prsStatements = {
paperBeatsRock: 'Paper Beats Rock',
rockBeatsScissors: 'Rock Beats Scissors',
scissorsBeatsPaper: 'Scissors Beats Paper',
seperator: ' - ',
player1: 'Player One',
player2: 'Player Two',
wins: ' Wins!',
tie: "It's a Tie!",
tally: 'Final Tally: '
}
function PaperRockScissors(player1, player2){
var p = /^paper$/i, r = /^rock$/i, s = /^scissors$/i, prss = prsStatements, sep = prss.seperator, win = prss.wins;
var pbr = prss.paperBeatsRock+sep, rbs = prss.rockBeatsScissors+sep, sbp = prss.scissorsBeatsPaper+sep;
var plr1 = player1 ? player1 : prss.player1;
var plr2 = player2 ? player2 : prss.player2;
var p1w = plr1+win, p2w = plr2+win;
this.p1 = 0; this.p2 = 0;
this.rand = function(){
switch(Math.floor(Math.random()*3)){
case 0:
return 'rock';
case 1:
return 'paper';
case 2:
return 'scissors';
}
}
this.play = function(in1, in2){
var i2 = in2 || this.rand();
if(in1.match(p) && i2.match(r)){
++this.p1;
return pbr+p1w;
}
else if(i2.match(p) && in1.match(r)){
++this.p2;
return pbr+p2w;
}
else if(in1.match(r) && i2.match(s)){
++this.p1;
return rbs+p1w;
}
else if(i2.match(r) && in1.match(s)){
++this.p2;
return rbs+p2w;
}
else if(in1.match(s) && i2.match(p)){
++this.p1;
return sbp+p1w;
}
else if(i2.match(s) && in1.match(p)){
++this.p2;
return sbp+p2w;
}
else if(in1.match(i2r)){
return prss.tie;
}
else{
return this;
}
}
this.tally = function(){
var pt = prss.tally;
if(this.p1 > this.p2){
return pt+p1w;
}
else if(this.p2 > this.p1){
return pt+p2w;
}
else{
return pt+prss.tie;
}
}
}
var pr = new PaperRockScissors('Joe', 'Bob');
console.log(pr.play('paper', 'rock'));
console.log(pr.play('rock', 'Paper'));
console.log(pr.play('scissors', 'paper'));
console.log(pr.play('rock', 'Paper'));
console.log(pr.play('paper', 'rock'));
console.log(pr.play('Paper', 'Scissors'));
console.log(pr.play('Paper', 'paper'));
console.log(pr.play('paper', 'Rock'));
console.log(pr.tally());
If you want to make this web-functional you would simply pass user input values, like:
pr.play(someElement.value, anotherElement.value);
Of course, you would want to use an Event and pass the correct values of either 'paper', 'rock', or 'scissors'.
Computer play might look like:
var pc = new PaperRockScissors('Joe', 'Comupter');
console.log(pc.play('paper'));
console.log(pc.play('rock'));
console.log(pc.play('scissors'));
console.log(pc.play('rock'));
console.log(pc.play('paper'));
console.log(pc.play('Paper'));
console.log(pc.play('Paper'));
console.log(pc.play('paper'));
console.log(pc.tally());
Ok, so I'm sure this code is FILLED with inaccuracies, but I got really confused when I finished this lesson on the CodeAcademy website and then tried to copy/paste it into my own javascript.html file (where I keep stuff I'm learning) and the code wouldn't work! Then I plugged it in to jsfiddle to play with it and still couldn't get it to work.
here is the original code that I copy/pasted from CodeAcademy:
http://jsfiddle.net/p46pnwvx/
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("Player: " + userChoice);
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 win!";
}
}
else if (choise1 === "scissors") {
if (choice2 === "paper") {
return "Scissors win!";
}
else {
return "Rock wins!";
}
}
}
console.log(compare(userChoice, computerChoice));
When this loads, the PROMPT box comes up, but nothing else happens.
Here is what I was playing around with, trying to make the game start and reset with a button, which I thought would be more useful (and educational) than having a game just up and start on it's own.
http://jsfiddle.net/o9ckcy52/
HTML
<h1>Rock, Paper, Scissors Game!</h1>
<button id="start" type="button" onclick="startGame()">Wanna Play?</button>
<p id="choice"></p>
<p id="result"></p>
Javascript
function startGame(){
document.getElementById("start").innerHTML = "Play again?"; // reset's button
return prompt("Do you choose rock, paper or scissors?");
var userChoice = startGame(); // stores result of startGame as user's choice
var computerChoice = Math.random(); // randomly creates computer's choice
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
function compare(choice1, choice2) { //compares user's choice and computer's choice
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 win!";
}
}
else if (choise1 === "scissors") {
if (choice2 === "paper") {
return "Scissors win!";
}
else {
return "Rock wins!";
}
}
}
document.getElementById("choice").innerHTML= // prints user and computer selections
"Player: " + userChoice + /r
"Computer: " + computerChoice;
document.getElementById("result").innerHTML = // prints result of selection comparisons
(compare(userChoice, computerChoice));
}
Here the html works, but nothing happens when you click the button.
Any help given would be appreciated.
I updated your code. There were just some minor issues that were fixed. For example, the userChoice should be assigned to the prompt. Also, your regex /r is invalid and should also be wrapped in quotes, which becomes "\r". You also mispelled one of your choice1's.
Run the snippet below:
function startGame() {
document.getElementById("start").innerHTML = "Play again?"; // reset's button
var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random(); // randomly creates computer's choice
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
function compare(choice1, choice2) { //compares user's choice and computer's choice
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 win!";
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
return "Scissors win!";
} else {
return "Rock wins!";
}
}
}
document.getElementById("choice").innerHTML = // prints user and computer selections
"<pre>" +
"Player: " + userChoice + "\r" +
"Computer: " + computerChoice +
"</pre>";
document.getElementById("result").innerHTML = // prints result of selection comparisons
(compare(userChoice, computerChoice));
}
document.getElementById("start").onclick = startGame;
<h1>Rock, Paper, Scissors Game!</h1>
<button id="start">Wanna Play?</button>
<p id="choice"></p>
<p id="result"></p>
1- Use http://jsbeautifier.org/ to clean up your js code, you are mixing Spaces and Tabs. Also it will clean your code alignment.
2- return prompt("Do you choose rock, paper or scissors?");
will always return before any code get's executed.
3- You are calling startGame() from the button click right? then why you are calling it again from inside the function it self?
Which indicates that you have a missing closing bracket } for the function.
var userChoice = startGame();
<html>
<head></head>
<body><center><div id="output" style="width:500px; height:500px; background-color:blue;"></div></center></body>
<script>
var printOut = function(text) {
var output = document.getElementById("output");
output.innerHTML = text;
};
var userChoice = prompt("Do you choose Rock, Paper, or Scissors?")
console.log(printOut("You chose " + userChoice + "."));
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "Rock";
} else if (computerChoice <= 0.67) {
computerChoice = "Paper";
} else {
computerChoice = "Scissors";
}
console.log(printOut("The computer chooses " + computerChoice + "."));
var compareChoice = function(userChoice, computerChoice) {
if (userChoice === computerChoice) {
return "The result is a tie!";
}
if (userChoice === "Rock") {
if (computerChoice === "Scissors") {
return "Rock smashes Scissors!";
} else {
return "Paper covers Rock!";
}
}
if (userChoice === "Paper") {
if (computerChoice === "Rock") {
return "Paper covers Rock!";
} else {
return "Scissors cut Paper!"
}
}
if (userChoice === "Scissors") {
if (computerChoice === "Paper") {
return "Scissors cut Paper!";
} else {
return "Rock smashes Scissors!";
}
}
return console.log(printOut(compareChoice(userChoice, computerChoice)));
};
</script>
</html>
When I open this in the browser and type in my choice, It only tells me the computer's choice when it should tell mine, the computer's and the end result.
I think it has something to do with my tag, but I'm not sure.
Actually, your choice was also printed in the output area. It just gets replaced by the computer's choice. Try modifying your printOut method to be like this:
var printOut = function(text) {
var output = document.getElementById("output");
output.innerHTML += text;
};
I just started learning JavaScript and I am trying to improve a "Rock, Scissors, Paper" game I built(see code below).
I try to build the game without the last function, input(). But I learnt that I can only use "return" in a function. When I print the function using console.log() it worked without the input() function.
I want to learn how I can do this making use of the input() function and as well as be able to call the gamePlay() inside the input(). Any help will be appreciated.
var gamePlay = function (userGameChoice) {
var computerChoice = Math.random(0, 1);
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!";
}
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"
}
}
}
compare(userGameChoice, computerChoice);
}
var input = function (userChoice) {
if (userChoice === "rock") {
return gamePlay("rock");
} else if (userChoice === "paper") {
return gamePlay("paper");
} else if (userChoice === "scissors") {
return gamePlay("scissors");
} else {
return "Invalid input";
}
}
input(prompt("Do you choose rock, paper or scissors?"));
Your gamePlay function does not return a value. It calls compare which does return a value but because gamePlay doesn't have a return statement it actually return undefined.
If you were to console.log(gamePlay("rock")); you would see undefined.
Side notes: also the input function could use a switch statement instead of if/then/elses.
I think you want to do something like this:
var options = ["rock", "scissors", "paper"];
var userinput = prompt("Do you choose rock, paper or scissors?");
var gameResult = "Invalid Input";
if (options.indexOf(userinput) > -1) {
gameResult = gamePlay(userinput);
}
alert(gameResult);
This takes the user input and compares it to a list of valid options. If it exists (>-1) then it will run the gamePlay method, storing the result in the variable gameResult