I cant seem to figure out why I cant calculate the points and keep them for each user totals.. Any suggestions? Please help. I was able to build this game using prompts etc.. but trying to bring it to life in a browser has been a challenge..
Here is the code:
function getName() {
var name = document.getElementById('fName').value;
// console.log(name);
$(".greetingPlayer").append("<h3 class='greeting'>Greetings " + name + "!</h3><br><h4>Please choose from the following Weapons...</h4>");
$(".statsA").css("display", "none");
}
var userChoice;
function choices(weapon) {
userChoice = weapon;
// console.log(userChoice);
$(".greetingPlayer").append("<h4 class='userChoice'>Users Choice : " + userChoice + "!</h4>");
var computerChoice = Math.random();
if (computerChoice <= 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
// console.log(computerChoice);
$(".greetingPlayer").append("<h4 class='computerChoice'>Computers Choice : " + computerChoice + "!</h4>");
function compare(choice1, choice2) {
var playing = true;
var human = 0;
var comp = 0;
while (playing) {
if (choice1 === choice2) {
console.log("The result is a tie!");
human = score;
comp = score;
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
console.log("rock wins!");
} else {
console.log("paper wins!");
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
console.log("paper wins!");
} else {
console.log("scissors wins!");
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
console.log("scissors wins!");
} else {
console.log("rock wins!");
}
} else {
console.log("That's not an option! Do it over " + name + " and try again!");
}
playing = false;
}
console.log("human : " + human);
console.log("comp : " + comp);
var numpoints = 0;
function points() {
if (++score >= str.length) {
numpoints++;
document.getElementByClassName("points").textContent = "Score: " + numpoints;
}
}
}
compare(userChoice, computerChoice);
}
// $(".greetingPlayer").append("<h4 class='userWeapon'> " + name + "! You win!</h4>");
I figured it out, my scope was all wrong and I have no idea why I was attempting to add a loop on the bottom. However this seemed to solve...
function getName(){
var name = document.getElementById('fName').value;
// console.log(name);
$(".greetingPlayer").append("<h3 class='greeting'>Greetings " + name + "!</h3><br><h4>Please choose from the following Weapons...</h4>");
$(".statsA").css("display", "none");
}
// Here we declare a variable to represent a User's Choice outside of the function scope
var userChoice;
var computerChoice;
//These variables are created to keep score and are declared w/ zero for addition.
var compScore = 0;
var userScore = 0;
// Here we declare a function to compare a userChoice vs compChoice
var choices = function(weapon){
userChoice = weapon;
// console.log(userChoice);
computerChoice = Math.random();
// console.log(computerChoice);
if (computerChoice <= 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
$(".toolChoice").html(" " + userChoice + "!");
// console.log(computerChoice);
$(".toolChoiceB").html(" " + computerChoice + "!");
function compare(choice1, choice2){
if(choice1 === choice2){
console.log("The result is a tie!");
}else if(choice1 === "rock"){
if(choice2 === "scissors"){
console.log("rock wins!");
userScore++;
}else{
console.log("paper wins!");
compScore++;
}
}else if(choice1 === "paper"){
if(choice2 === "rock"){
console.log("paper wins!");
userScore++;
}else{
console.log("scissors wins!");
compScore++;
}
}else if(choice1 === "scissors"){
if(choice2 === "paper"){
console.log("scissors wins!");
userScore++;
}else{
console.log("rock wins!");
compScore++;
}
}else{
console.log("That's not an option! Do it over "
+ name + " and try again!");
}
}
// end of compare function
// compare function called
compare(userChoice, computerChoice);
// This consoles the score, use this as a start point for displaying the score.
// console.log("human : " + userScore);
// console.log("comp : " + compScore);
// This jQuery displays the score for each party
// This is the score for Humans
$('.scoreA').html(" " + userScore);
// This is the score for Computers
$('.scoreB').html(" " + compScore);
}
Related
I've created a Rock Paper scissors game using JavaScript, I want to show an image of element that won in the end.
For example:
If rock wins: show a image/jpg of a rock
If paper wins: show a image/jpg of a paper
Below is the code:
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 chooses: " + computerChoice);
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!" + " " + "Lets play again.";
}
else if (choice1 === "rock") {
if (choice2 === "scissors") {
return "rock wins" + "<br>" + "You beat the computer, nice job!";
}
else {
return "paper wins" + "<br>" + "Your really smart computer beat you.";
}
}
else if (choice1 === "paper") {
if (choice2 === "rock") {
return "paper wins" + "<br>" + "You beat the computer, nice job!";
}
else {
return "scissors wins" + "<br>" + "Your really smart computer beat you.";
}
}
else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins" + "<br>" + "Your really smart computer beat you.";
}
else {
return "scissors win" + "<br>" + "You beat the computer, nice job!";
}
}
} //closes compare function
document.write("Computer chose: " + computerChoice + "<br>");
document.write(compare(userChoice, computerChoice));
Basically you can just use the following selector / method to change the src image of an HTML img tag:
document.getElementById("your-img").src = 'rock.jpg';
Of course you have to set the image path and the id accordingly.
Instead of using
computerChoice = Math.random()
Use math.floor()
computerChoice = Math.floor((Math.random() * 3) + 1)
Now use this to tell what the computer meant:
if(computerChoice == '1') { computerChoice = 'stone' };
if(computerChoice == '2') { computerChoice = 'paper' };
if(computerChoice == '3') { computerChoice = 'scissors' };
I have a rock, paper, scissors game set up with the user clicking on the buttons labeled "Rock", "Paper", "Scissors" which results in the userChoice.
When I run the program the compareChoices() function always returns "The result is a tie, let's play again!", I don't understand why.
< article >
< button onclick = "rockPaperScissors('Rock')" > Rock < /button>
<button onclick="rockPaperScissors('Paper')">Paper</button >
< button onclick = "rockPaperScissors('Scissors')" > Scissors < /button>
</article >
< script type = "text/javascript" >
function rockPaperScissors(userchoice) {
alert("You chose " + userchoice + " ...the computer chose " + getComputerChoice() + ".");
compareChoices();
}
function getComputerChoice() {
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "Rock";
} else if (computerChoice < 0.67) {
computerChoice = "Paper";
} else {
computerChoice = "Scissors";
}
return computerChoice;
}
function compareChoices(userChoice, ComputerChoice) {
if (userChoice === ComputerChoice) {
alert("The result is a tie, let's play again!");
} else if (userChoice === "Rock") {
if (ComputerChoice === "Scissors") {
alert("Congratulations, you win!");
} else {
alert("The computer wins! Care to play again?");
}
} else if (userChoice === "Scissors") {
if (ComputerChoice === "Rock") {
alert("The computer wins, let's play again!");
} else {
alert("Yippie! You win!");
}
} else if (userChoice === "Paper") {
if (ComputerChoice === "Rock") {
alert("The computer wins. Don't give up, try again!");
} else {
alert("Hail the all mighty visitor. Give it another go!");
}
}
} < /script>
You aren't passing anything into compareChoices
< article >
< button onclick = "rockPaperScissors('Rock')" > Rock < /button>
<button onclick="rockPaperScissors('Paper')">Paper</button >
< button onclick = "rockPaperScissors('Scissors')" > Scissors < /button>
</article >
< script type = "text/javascript" >
function rockPaperScissors(userchoice) {
var computerChoice = getComputerChoice();
alert("You chose " + userchoice + " ...the computer chose " + computerChoice + ".");
compareChoices(userChoice, computerChoice);
}
function getComputerChoice() {
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "Rock";
} else if (computerChoice < 0.67) {
computerChoice = "Paper";
} else {
computerChoice = "Scissors";
}
return computerChoice;
}
function compareChoices(userChoice, ComputerChoice) {
if (userChoice === ComputerChoice) {
alert("The result is a tie, let's play again!");
} else if (userChoice === "Rock") {
if (ComputerChoice === "Scissors") {
alert("Congratulations, you win!");
} else {
alert("The computer wins! Care to play again?");
}
} else if (userChoice === "Scissors") {
if (ComputerChoice === "Rock") {
alert("The computer wins, let's play again!");
} else {
alert("Yippie! You win!");
}
} else if (userChoice === "Paper") {
if (ComputerChoice === "Rock") {
alert("The computer wins. Don't give up, try again!");
} else {
alert("Hail the all mighty visitor. Give it another go!");
}
}
} < /script>
you have to put the computerchoice into variable, and call comparechoices function with same computerchoice.
function rockPaperScissors(userchoice) {
var computerchoice = getComputerChoice();
alert("You chose " + userchoice + " ...the computer chose " + computerchoice + ".");
compareChoices(userchoice, computerchoice);
}
You need to pass the arguments to compareChoices().
function rockPaperScissors(userchoice) {
alert("You chose " + userchoice + " ...the computer chose " + getComputerChoice() + ".");
compareChoices(userchoice, getComputerChoice());
}
You should only alert one time since they are going to come so close together. Something like this:
function compareChoices(userChoice, ComputerChoice) {
var message;
if (userChoice === ComputerChoice) {
message = "Computer: " + ComputerChoice + ", User: " + userChoice + " - The result is a tie, let's play again!";
} else if (userChoice === "Rock") {
if (ComputerChoice === "Scissors") {
message = "Computer: " + ComputerChoice + ", User: " + userChoice + " - Congratulations, you win!";
} else {
message = "Computer: " + ComputerChoice + ", User: " + userChoice + " - The computer wins! Care to play again?");
}
} else if (userChoice === "Scissors") {
if (ComputerChoice === "Rock") {
message = "Computer: " + ComputerChoice + ", User: " + userChoice + " - The computer wins, let's play again!";
} else {
message = "Computer: " + ComputerChoice + ", User: " + userChoice + " - Yippie! You win!";
}
} else if (userChoice === "Paper") {
if (ComputerChoice === "Rock") {
message = "Computer: " + ComputerChoice + ", User: " + userChoice + " - The computer wins. Don't give up, try again!";
} else {
message = "Computer: " + ComputerChoice + ", User: " + userChoice + " - Hail the all mighty visitor. Give it another go!";
}
}
alert(message);
}
<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 have been stuck on this problem on the codeacademy website (Javascript, chapter 4 section 8, rock paper scissors) for almost 3 weeks now, and I can't seem to figure out what it means.
Error message is SyntaxError: Unexpected token else:
var userChoice = prompt("Do you choose rock, paper or scissors?");
var gameTimes = 0;
var computer = functions(); {
gameTimes = gameTimes + 1;
var computerChoice = Math.random();
if (computerChoice <= 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
console.log(gameTimes + ".Computer:" + computerChoice);
return computerChoice;
}
var compare = function (choice1, choice2) {
if (choice1 === choice2) {
console.log("Your choice: " + userChoice);
console.log("The result is a tie!");
userChoice = prompt("Please make the choice again!");
compare(userChoice, computerChoice());
} else if (choice1 === "rock") {
return "paper wins";
} else {
return "scissors wins";
}
console.log("Your choice: " + userChoice);
if (choice2 === "scissors")
console.log("You win!");
else
console.log("Computer wins!");
};
else if (choice1 === "paper") {
console.log("Your choice: " + userChoice);
if (choice2 === "rock")
console.log("You win!");
else
console.log("Computer wins!");
} else {
console.log("Your choice: " + userChoice);
console.log("The choice is invalid!");
userChoice = prompt("Please enter valid choice again!");
compare(userChoice, computerChoice());
}
Your syntax isn't right. Take a look at
var computer = functions();{
should be
var computer = functions() {
and there is no if statement at the bottom before
else if(choice1 === "paper")
{
console.log("Your choice: "+ userChoice);
if(choice2 === "rock")
console.log("You win!");
else
console.log("Computer wins!");
}
else
{
console.log("Your choice: "+userChoice);
console.log("The choice is invalid!");
userChoice=prompt("Please enter valid choice again!");
compare(userChoice,computerChoice());
}
There are multiple misplaced semicolons:
On line 3:
var computer = functions();{
Towards the end (probably the one giving the unexpected else token error):
};
else if
var computer = functions();{ in line 3 should be var computer = function(){
That's because your else if has no if before it.
You can use else or else if only if it is prepended by a if statement.
Also, you've some syntax errors, which you should correct.
if result is tie i need to run this code again by asling "Do you choose rock, paper or scissors?"
but there's a wrong with this code.
after this Massage "The result is a tie! Would you like to play new game?(yes or no)", i used "compare(userChoice, computerChoice);" to run again this code. its not working.
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) {
var newChoice = prompt ("The result is a tie! Would you like to play new game?(yes or no)");
if ( newChoice === "yes"){
compare(userChoice, computerChoice);
}
else {
return "Have a nice day!";
}
}
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);
Well yes, that's because you call again
compare(userChoice, computerChoice);
at the forth line inside compare function.
try this:
var choices = ['rock', 'paper', 'scissors'];
var makeRandom = function() {
return parseInt(Math.random()*3);
}
function game() {
var userChoice = prompt("Do you choose rock, paper or scissors?");
var index = choices.indexOf(userChoice);
if(index === -1) {
var bl = confirm('Your choice is outof range, would you like to play Again?');
if(bl) game();
}
var computerChoice = makeRandom();
if(index === computerChoice) {
var bl = confirm('It is a tie, would you like to play Again?');
if(bl) { game(); }
} else if((index === 0 && computerChoice === 1) || (index === 1 && computerChoice === 2) || (index === 2 && computerChoice === 0)) {
alert('you loose');
} else {
alert('you win');
}
}
game();