I am building a Javascript Rock, Paper, Scissors game and I have to reload the page every time I want to play another "round". Any suggestions on how to continue looping through the game without reloading the page and keeping the score?
var compChoice = "";
var userChoice = "";
//comp choice
compChoice = Math.random();
if(compChoice < 0.34) {
compChoice = 'rock';
}
else if(compChoice <= 0.67) {
compChoice = 'paper';
}
else {
compChoice = 'scissors';
};
//compare function
var compare = function(userChoice, compChoice) {
if(userChoice == compChoice) {
return("Draw");
}
else if(userChoice == "rock" && compChoice == "scissors") {
return("PLayer Wins");
}
else if (userChoice == "paper" && compChoice == "rock") {
return("Player Wins");
}
else if (userChoice == "scissors" && compChoice == "paper") {
return("Player Wins");
}
else {
return("Player loses");
}
};
//click events
$('#rock').click(function() {
var result = compare('rock', compChoice);
$('#decision').html(result);
})
$('#paper').click(function() {
var result = compare('paper', compChoice);
$('#decision').html(result);
})
$('#scissors').click(function() {
var result = compare('scissors', compChoice);
$('#decision').html(result);
})
If you turn the computers choice into a function which returns the value you can then call it every time and get a new value.
var userChoice = "";
//comp choice
var getCompChoice = function() {
var choice = Math.random();
if(choice < 0.34) {
return 'rock';
}
else if(choice <= 0.67) {
return 'paper';
}
else {
return 'scissors';
}
}
//compare function
var compare = function(userChoice) {
compChoice = getCompChoice();
if(userChoice == compChoice) {
return("Draw");
}
else if(userChoice == "rock" && compChoice == "scissors") {
return(`Player Wins. rock > ${compChoice}`);
}
else if (userChoice == "paper" && compChoice == "rock") {
return(`Player Wins. paper > ${compChoice}`);
}
else if (userChoice == "scissors" && compChoice == "paper") {
return(`Player Wins. scissors > ${compChoice}`);
}
else {
return(`Player Looses. ${userChoice} < ${compChoice}`);
}
};
//click events
$('#rock').click(function() {
var result = compare('rock');
$('#decision').html(result);
})
$('#paper').click(function() {
var result = compare('paper');
$('#decision').html(result);
})
$('#scissors').click(function() {
var result = compare('scissors');
$('#decision').html(result);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rock">rock</div>
<div id="scissors">scissors</div>
<div id="paper">paper</div>
<div id="decision"></div>
I've made a fiddle for you: https://jsfiddle.net/9uq19dtc/1/.
Basically you just needed to put your compChoice code in a place where it gets called for every button click, rather than only when the page loads.
To keep score, just make 2 more divs that have player score and comp score, and increment their values each time one of them wins.
Have your 'click' buttons do the compChoice logic instead of at the beginning, so it chooses a new result whenever you click Rock, Paper, or Scissors:
var userChoice = "";
//comp choice
var chooseCompChoice = function() {
compChoice = Math.random();
if(compChoice < 0.34) {
return 'rock';
}
else if(compChoice <= 0.67) {
return 'paper';
}
else {
return 'scissors';
}
};
//compare function
var compare = function(userChoice, compChoice) {
if(userChoice === compChoice) {
return("Draw");
}
else if(userChoice === "rock" && compChoice === "scissors") {
return("Player Wins");
}
else if (userChoice === "paper" && compChoice === "rock") {
return("Player Wins");
}
else if (userChoice === "scissors" && compChoice === "paper") {
return("Player Wins");
}
else {
return("Player loses");
}
};
//click events
$('#rock').click(function() {
var compChoice = chooseCompChoice();
var result = compare('rock', compChoice);
$('#decision').html(result);
})
$('#paper').click(function() {
var compChoice = chooseCompChoice();
var result = compare('paper', compChoice);
$('#decision').html(result);
})
$('#scissors').click(function() {
var compChoice = chooseCompChoice();
var result = compare('scissors', compChoice);
$('#decision').html(result);
})
I am creating Rock Paper Scissors for a class, and I'm trying to get it to log the winner in the console, but nothing happens when the button is pressed. I'm not sure why. Is there anything obviously wrong with my code here?
let playGame = function() {
let userChoice = prompt("Do you choose rock, paper or scissors?");
let computerChoice = Math.random();
let userWins = 0;
let compWins = 0;
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if (computerChoice <= 0.67 && computerChoice >= 0.34) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
let compare = function(choice1, choice2) {
if (choice1 === choice2) {
console.log("The result is a tie!");
} else if (choice1 === "rock") {
if (choice2 === "scissors") {
console.log("User wins!");
} else {
console.log("Computer wins!");
}
} else if (choice1 === "paper") {
if (choice2 === "rock") {
console.log("User wins!");
} else {
console.log("Computer wins!");
}
} else if (choice1 === "scissors") {
if (choice2 === "paper") {
console.log("User wins!");
} else {
console.log("Computer wins!");
}
}
};
compare(userChoice, computerChoice);
}
<button class="playGame" onclick="playGame()">Play!</button>
I'm trying to make a rock, paper, scissors game for class, but I'm stuck with creating a counter. I declared global variables and thought it would be simple to just add +1 every time somebody wins, but it doesn't seem to be working. Here's my code of what I'm using now. What should I add to make the counter work?
var game = false;
var playerScore = 0;
var compScore = 0;
while (game != true){
var userChoice = prompt("Pick your poison: Rock, paper, or scissors. Type 'exit' to quit.").toLowerCase();
if (userChoice === "rock" || userChoice === "paper" || userChoice === "scissors"){
var computerChoice = randomizeComputer();
console.log("You chose: " + userChoice);
console.log("Computer chose: " + computerChoice);
compare(userChoice);
} else if (userChoice === "exit"){
console.log("Thanks for playing");
game = true;
} else {
console.log("Sorry, you typed something we couldn't recognize");
}
}
function compare (choice){
//If it's the same thing
if (choice === computerChoice){
return console.log("It's a tie");
}
//If user chooses rock
if (choice === "rock"){
if (computerChoice === "scissors"){
return console.log("You win!");
counter(1);
} else if (computerChoice === "paper"){
return console.log("You lose!");
}
}
//If user chooses paper
if (choice === "paper"){
if (computerChoice === "rock"){
return console.log("You win!");
} else if (computerChoice === "scissors"){
return console.log("You lose!");
}
}
//If user chooses scissors
if (choice === "scissors"){
if (computerChoice === "paper"){
return console.log("You win!");
} else if (computerChoice === "rock"){
return console.log("You lose!");
}
}
}
//Randomizes
function randomizeComputer () {
var i = Math.floor(Math.random() * 3 + 1);
if (i === 1){
return "rock";
} else if (i === 2){
return"paper";
} else {
return "scissors";
}
}
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());
<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;
};