I'm trying to make a rpsls game using javascript and jquery. I have most of it functioning, but I can't seem to get the variables to reset to 0 at the end of 5 throws. I used an if statement to reset the round variable to 0, but I can't seem to figure out how to reset the two scores to 0 after 5 rounds.
$(document).ready(function() {
var round = 0
var yourScore = 0
var compScore = 0
$(".shoot").on("click", function() {
var choiceRPS = ['rock', 'paper', 'scissor','lizard','spock'];
var ranNum = Math.floor(Math.random() * choiceRPS.length);
var compChoice = choiceRPS[ranNum];
var userChoice = this.id;
round++;
$("#round").html(round);
var compChoice = choiceRPS[ranNum];
console.log(userChoice);
console.log(compChoice);
if (compChoice == userChoice) {
};
if (userChoice === "rock") {
if (compChoice === "lizard" || compChoice === "scissor") {
yourScore++;
$("#yourScore").html(yourScore);
} else {
if (compChoice === "paper" || compChoice === "spock") {
compScore++;
$("#computerScore").html(compScore);
}
}
};
if (userChoice === "paper") {
if (compChoice === "rock" || compChoice === "spock") {
yourScore++;
$("#yourScore").html(yourScore);
} else {
if (compChoice === "scissor" || compChoice === "lizard") {
compScore++;
$("#computerScore").html(compScore);
}
}
};
if (userChoice === "scissor") {
if (compChoice === "paper" || compChoice === "lizard") {
yourScore++;
$("#yourScore").html(yourScore);
} else {
if (compChoice === "rock" || compChoice === "spock") {
compScore++;
$("#computerScore").html(compScore);
}
}
};
if (userChoice === "lizard") {
if (compChoice === "spock" || compChoice === "paper") {
yourScore++;
$("#yourScore").html(yourScore);
} else {
if (compChoice === "rock" || compChoice === "scissor") {
compScore++;
$("#computerScore").html(compScore);
}
}
};
if (userChoice === "spock") {
if (compChoice === "rock" || compChoice === "scissor") {
yourScore++;
$("#yourScore").html(yourScore);
} else {
if (compChoice === "lizard" || compChoice === "paper") {
compScore++;
$("#computerScore").html(compScore);
}
}
};
if (round === 5) {
round -=5;
yourScore -= yourScore;
compScore -= compScore;
if (yourScore>compScore) {
$('#win').modal({
keyboard: false
});
} else if (yourScore<compScore) {
$('#lose').modal({
keyboard: false
});
} else if (yourScore==compScore) {
$('#tie').modal({
keyboard: false
});
};
};
});
});
I made a plnkr and realized that your issue is that you're only updating the #yourScore and #computerScore elements when the respective element wins. You should move the element updates to outside your if statements. This also simplifies your code a bit too.
if (userChoice === "rock") {
if (compChoice === "lizard" || compChoice === "scissor") {
yourScore++;
} else {
if (compChoice === "paper" || compChoice === "spock") {
compScore++;
}
}
};
if (userChoice === "paper") {
if (compChoice === "rock" || compChoice === "spock") {
yourScore++;
} else {
if (compChoice === "scissor" || compChoice === "lizard") {
compScore++;
}
}
};
if (userChoice === "scissor") {
if (compChoice === "paper" || compChoice === "lizard") {
yourScore++;
} else {
if (compChoice === "rock" || compChoice === "spock") {
compScore++;
}
}
};
if (userChoice === "lizard") {
if (compChoice === "spock" || compChoice === "paper") {
yourScore++;
} else {
if (compChoice === "rock" || compChoice === "scissor") {
compScore++;
}
}
};
if (userChoice === "spock") {
if (compChoice === "rock" || compChoice === "scissor") {
yourScore++;
} else {
if (compChoice === "lizard" || compChoice === "paper") {
compScore++;
}
}
};
$("#yourScore").html(yourScore);
$("#computerScore").html(compScore);
http://plnkr.co/edit/FofGShFtTMED8IY4fP1b?p=preview
Also, in your win checking, you should reset the variables after you check who won, or else it will always be a tie since yourScore and compScore will both be 0.
Also, this looks like some good exercise so I'm going to optimize your solution a bit :)
Have you tried moving your declarations outside of your document.ready? You can still initialise them inside it.
i.e.
var round = 0;
var yourScore = 0;
var compScore = 0;
$(document).ready(function() {
...
I've just tried your solution and it seems to be working. It resets to 0, then on next button click it increments to 1 again.
Related
I am trying to make a small rock, paper and scissors program between a user and the computer. Everything seems to work fine except the gameRound() conditional statement. It doesn't matter what the user input is. It just runs the (else) statement.
// a function that determines what the computer's choice is
const getComputerChoice = () => {
let compChoice = Math.random();
if(compChoice > 0.5) {
return "Rock";
} else if(compChoice < 0.5) {
return "scissors";
} else if(compChoice == 0) {
return "paper";
}
}
// prompts the user to enter rock, paper or scissors
let playerSelection = prompt();
let computerSelection = getComputerChoice();
// the logic that decides who wins and loses
const gameRound = (playerSelection, computerSelection) => {
if(playerSelection === "rock" && computerSelection === "rock" || playerSelection === "paper" && computerSelection === "paper" || playerSelection === "scissors" && computerSelection === "scissors") {
return "It's a tie!!!";
} else if(playerSelection === "rock" && computerSelection === "paper") {
return "Computer wins!!!";
} else if(playerSelection === "rock" && computerSelection === "scissors") {
return "You win!!!";
} else if(playerSelection === "paper" && computerSelection === "scissors") {
return "Computer wins!!!";
} else if(playerSelection === "paper" && computerSelection === "rock") {
return "You win!!!";
} else if(playerSelection === "scissors" && computerSelection === "rock") {
return "Computer wins!!!";
} else if(playerSelection === "scissors" && computerSelection === "paper") {
return "You win!!!";
} else {
return "Winner undecided";
}
}
// the function that begins the game
const game = () => {
for(let i = 0; i < 5; i++) {
return gameRound();
}
}
console.log(game());
gameRound conditional statement doesn’t function as expected due to the newly declared parameters playerSelection, computerSelection. So it has to be a function statement rather than the inline arrow function.
Then, Javascript code would be as follows:
// a function that determines what the computer's choice is
const getComputerChoice = () => {
let compChoice = Math.random();
if(compChoice > 0.5) {
return "Rock";
} else if(compChoice < 0.5) {
return "scissors";
} else if(compChoice == 0) {
return "paper";
}
}
// the logic that decides who wins and loses
function gameRound(playerSelection, computerSelection) {
if(playerSelection === "rock" && computerSelection === "rock" || playerSelection === "paper" && computerSelection === "paper" || playerSelection === "scissors" && computerSelection === "scissors") {
return "It's a tie!!!";
} else if(playerSelection === "rock" && computerSelection === "paper") {
return "Computer wins!!!";
} else if(playerSelection === "rock" && computerSelection === "scissors") {
return "You win!!!";
} else if(playerSelection === "paper" && computerSelection === "scissors") {
return "Computer wins!!!";
} else if(playerSelection === "paper" && computerSelection === "rock") {
return "You win!!!";
} else if(playerSelection === "scissors" && computerSelection === "rock") {
return "Computer wins!!!";
} else if(playerSelection === "scissors" && computerSelection === "paper") {
return "You win!!!";
} else {
return "Winner undecided";
}
}
// prompts the user to enter rock, paper or scissors
let playerSelection = prompt();
let computerSelection = getComputerChoice();
for (let i = 0; i < 5; i++) {
console.log(gameRound(playerSelection, computerSelection));
}
Or if you mean to play 5 rounds of the rock-paper-scissors, the allocation of playerSelection and computerSelection variables should be inside the for loop as follows:
// a function that determines what the computer's choice is
const getComputerChoice = () => {
let compChoice = Math.random();
if(compChoice > 0.5) {
return "Rock";
} else if(compChoice < 0.5) {
return "scissors";
} else if(compChoice == 0) {
return "paper";
}
}
// the logic that decides who wins and loses
function gameRound(playerSelection, computerSelection) {
if(playerSelection === "rock" && computerSelection === "rock" || playerSelection === "paper" && computerSelection === "paper" || playerSelection === "scissors" && computerSelection === "scissors") {
return "It's a tie!!!";
} else if(playerSelection === "rock" && computerSelection === "paper") {
return "Computer wins!!!";
} else if(playerSelection === "rock" && computerSelection === "scissors") {
return "You win!!!";
} else if(playerSelection === "paper" && computerSelection === "scissors") {
return "Computer wins!!!";
} else if(playerSelection === "paper" && computerSelection === "rock") {
return "You win!!!";
} else if(playerSelection === "scissors" && computerSelection === "rock") {
return "Computer wins!!!";
} else if(playerSelection === "scissors" && computerSelection === "paper") {
return "You win!!!";
} else {
return "Winner undecided";
}
}
for (let i = 0; i < 5; i++) {
// prompts the user to enter rock, paper or scissors
let playerSelection = prompt();
let computerSelection = getComputerChoice();
console.log(gameRound(playerSelection, computerSelection));
}
i'm learning javascript and currently making a rock, paper, scissor game using only javascript. the game will have 1 round mode and 3 rounds mode but as i finished to code the 1 round mode i found out having problem display result, whoever win the game it display "the game is tie" and can't find where s the mistake, can anybody help me?
// Player choice
var getPlayerChoice = function() {
var playerChoice = prompt("Choose rock, paper, or scissors");
while (playerChoice !== 'rock' && playerChoice !== 'paper' && playerChoice !== 'scissors') {
if (playerChoice === null) {
break;
}
playerChoice = prompt("Invalid ! you have to choose rock, paper, or scissors");
}
return playerChoice;
}
// Computer Choice
var getComputerChoice = function () {
var randomNum = Math.random();
if ( randomNum < 0.3333 ) {
return "rock";
} else if ( randomNum > 0.3333 && randomNum < 0.6666 ) {
return "scissors";
} else {
return "paper";
}
}
// Winner Function
var getWinner = function (playerChoice, computerChoice) {
if (computerChoice === playerChoice) {
return "The Game is Tie";
} else if (computerChoice === "paper") {
if (playerChoice === "scissors") {
return "player win";
} else if (playerChoice === "rock") {
return "computer win";
}
} else if (computerChoice === "rock") {
if (playerChoice === "scissors") {
return "computer win";
} else if (playerChoice === "paper") {
return "player win";
}
} else if (computerChoice === "scissors") {
if (playerChoice === "rock") {
return "player win";
} else if (playerChoice === "paper") {
return "computer win";
}
}
}
// Single game mode
var singleRound = function() {
var playerChoice = getPlayerChoice();
if (playerChoice === null) {
return;
}
var computerChoice = getComputerChoice();
var winner = getWinner(playerChoice, computerChoice);
var message = " You chose: " + playerChoice + "\n Computer chose: " + computerChoice;
if (winner === "player") {
alert(message + "\nYou won!");
} else if (winner === "computer") {
alert(message + "\nYou lost!");
} else {
alert(message + "\nThe Game is Tie");
}
return winner;
}
var mode = prompt("Welcome!\n \nplease insert 1 for single round mode\n2 for 3 rounds mode");
if (mode === '1') {
singleRound();
} else if (mode === '2') {
threeRoundsMode();
}
Your getWinner() function returns player win or computer win, but your code that calls it is looking for return values of player or computer.
Because the code never gets what it's looking for it defaults to `'The Game is Tie'
This is happening because of a mistake in the singleRound() function. if (winner === "player") { should be if (winner === "player win") { and similarly the if (winner === "computer") { should say if (winner === "computer win") { so that the text being compared matches. Right now, it is comparing "player" and "player win", then "computer" and "computer win" so then the else clause is reached regardless of actual game outcome.
<script>
console.log("enter \game()\ to start the game");
function computerPlay(){
let a = ['rock','paper','scissors'];
let b = a[Math.floor(Math.random * a.length)];
return b;
}
function humanPlay(){
let c = prompt('rock,paper or scissors');
return c;
}
function playRound ( computerSelection,humanSelection){
if (computerSelection == humanSelection) {
console.log("Its a tie");
}
if (computerSelection == 'rock' && humanSelection.toLowerCase() == 'paper') {
return 'human wins';
}
else if (computerSelection == 'rock' && humanSelection.toLowerCase() == 'scissors') {
return 'computer wins';
}
else if ( computerSelection == 'paper' && humanSelection.toLowerCase() == 'rock') {
return 'computer wins';
}
else if (computerSelection == 'paper' && humanSelection.toLowerCase() == 'scissors') {
return 'human wins';
}
else if (computerSelection == 'scissors' && humanSelection.toLowerCase() == 'rock') {
return 'human wins';
}
else if (computerSelection == 'scissors' && humanSelection.toLowerCase() == 'paper') {
return 'computer wins'
}
else if (computerSelection == 'rock' && humanSelection.toLowerCase() == 'scissors') {
return 'computer wins';
}
}
function game(){
computerSelection = computerPlay();
humanSelection = humanPlay();
let results = playRound(computerSelection,humanSelection);
console.log(results);
}
</script>
I've been trying to code this simple game from the Odin project for 2 hours and i can't wrap my head around why isn't the code working. I have looked at a few student solutions and tried to write my code again and again but it just doesn't seem to work each time. what am i doing wrong in this script?
I think your problem is in this line:
let b = a[Math.floor(Math.random * a.length)];
It should be:
let b = a[Math.floor(Math.random() * a.length)];
Also, you can test your code here: https://js.do/
Hope it helps!
I am making a game for RockPaperScissors. I have a function that generates the computers choice, then have a function that reacts to the clicking of a button, then a function for playing the game combining both functions.
I have tried accessing it through the functions, and have been doing research but cant find a way to get the variable to make its way to the last function. Do I have to combine all of them to a single function in order to get the variable.
/*This function generates the computer's choice and then presents a rock image, removing it after 2 seconds.*/
function computerChoice() {
let compChoice = Math.random();
if (compChoice < 0.33) {
compChoice = "rock";
cpuChoice.classList.add(rockImage, rockImage2);
setTimeout(function () {
cpuChoice.classList.remove(rockImage, rockImage2);
}, 2000);
} else if (compChoice < 0.66 && compChoice > 0.33) {
compChoice = "paper";
cpuChoice.classList.add(paperImage, paperImage2);
setTimeout(function () {
cpuChoice.classList.remove(paperImage, paperImage2);
}, 2000);
} else {
compChoice = "scissors";
cpuChoice.classList.add(scissorImage, scissorImage2);
setTimeout(function () {
cpuChoice.classList.remove(scissorImage, scissorImage2);
}, 2000);
}
}
/*Here is the function thats having issues, I cant seem to get the gameResults innerHTML to change since it wont gather the compChoice.*/
function playGame(humanChoice, compChoice) {
if (humanChoice === compChoice) {
gameResults.innerHTML = "tie";
} else if (humanChoice === "rock" && compChoice === "scissor") {
gameResults.innerHTML = "You won!";
} else if (humanChoice === "rock" && compChoice === "paper") {
gameResults.innerHTML = "The computer won!";
} else if (humanChoice === "paper" && compChoice === "rock") {
gameResults.innerHTML = "You won!";
} else if (humanChoice === "paper" && compChoice === "scissor") {
gameResults.innerHTML = "The computer won!";
} else if (humanChoice === "scissor" && compChoice === "rock") {
gameResults.innerHTML = "The computer won!";
} else if (humanChoice === "scissor" && compChoice === "paper") {
gameResults.innerHTML = "You won!";
} else {
gameResults.innerHTML = "Not Possible";
}
}
/*This function generates the human's choice from a click and then presents an image of the choice, removing it after 2 seconds. Then calls for computerChoice(), and attempts to call the playGame functions.*/
allButtons.forEach(function (e) {
e.addEventListener("click", function () {
const choice = e.dataset.play;
if (choice === "rock") {
humanChoice = "rock";
computerChoice();
yourChoice.classList.add(rockImage, rockImage2);
setTimeout(function () {
yourChoice.classList.remove(rockImage, rockImage2);
}, 2000);
playGame(humanChoice, compChoice);
} else if (choice === "paper") {
humanChoice = "paper";
computerChoice();
yourChoice.classList.add(paperImage, paperImage2);
setTimeout(function () {
yourChoice.classList.remove(paperImage, paperImage2);
}, 2000);
playGame(humanChoice, compChoice);
} else if (choice === "scissors") {
humanChoice = "scissors";
computerChoice();
yourChoice.classList.add(scissorImage, scissorImage2);
setTimeout(function () {
yourChoice.classList.remove(scissorImage, scissorImage2);
}, 2000);
playGame(humanChoice, compChoice);
}
});
});
I am expecting the gameResults.innerHTML to change, but it wont because it wont gather the CompChoice's variable to compare to the HumanChoices.
How do i stop the function from executing if the userChoice is null or a word apart from rock,paper or scissors.
I've tried to use return but i couldn't get it to work.
Any help is appreciated.
Thanks
JS Fiddle Link = http://jsfiddle.net/Renay/d9bea2ra/1/
var userChoice = prompt('Do you choose rock, paper or scissors?');
var compChoice = Math.random();
if (compChoice <= 0.34) {
compChoice = 'rock';
} else if (compChoice <= 0.67) {
compChoice = 'paper';
} else {
compChoice = 'scissors';
}
function compare() {
if (userChoice == compChoice) {
console.log( 'The result is a tie!');
} else if ((userChoice == 'rock' && compChoice == 'scissors') || (userChoice == 'paper' && compChoice == 'rock') || (userChoice == 'scissors' && compChoice == 'paper') ) {
console.log( 'You win!');
} else {
console.log('You lose!');
}
if (userChoice === null) {
console.log('Please select an option');
} else if (userChoice !== 'rock'&&'paper'&&'scissors') {
console.log('Please select rock, paper or scissors');
}
}
console.log('Your choice = ' + userChoice);
console.log('Computer Choice = ' + compChoice);
compare();
The condition in your if statement is wrong. It should be:
if (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors')
An expression of the form e1 && e2 && e3 && ... evaluates to last eN sub-expression if all of them truthy. So your test was equivalent to:
if (userChoice !== 'scissors')
You should put that check before displaying the result of the game, and return from the function then. So it should be:
function compare() {
if (userChoice === null) {
console.log('Please select an option');
return;
} else if (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors') {
console.log('Please select rock, paper or scissors');
return;
}
if (userChoice == compChoice) {
console.log( 'The result is a tie!');
} else if ((userChoice == 'rock' && compChoice == 'scissors') || (userChoice == 'paper' && compChoice == 'rock') || (userChoice == 'scissors' && compChoice == 'paper') ) {
console.log( 'You win!');
} else {
console.log('You lose!');
}
}
Just do return;
function compare() {
if(!userChoice)
return;
// (...) more code
}
A return call exits the function. But note that you can only use return inside a function
If i understand correctly, you want to return to the beginning of the code. You should wrap the entire thing in a function, then call that function again:
function rockPaperScissors() {
var userChoice = prompt('Do you choose rock, paper or scissors?');
var compChoice = Math.random();
if (compChoice <= 0.34) {
compChoice = 'rock';
} else if (compChoice <= 0.67) {
compChoice = 'paper';
} else {
compChoice = 'scissors';
}
function compare() {
if (userChoice == compChoice) {
console.log( 'The result is a tie!');
} else if ((userChoice == 'rock' && compChoice == 'scissors') || (userChoice == 'paper' && compChoice == 'rock') || (userChoice == 'scissors' && compChoice == 'paper') ) {
console.log( 'You win!');
} else {
console.log('You lose!');
}
if (userChoice === null) {
console.log('Please select an option');
rockPaperScissors();
} else if (userChoice !== 'rock' && userChoice !== 'paper' && userChoice !== 'scissors') { // fixed
console.log('Please select rock, paper or scissors');
rockPaperScissors();
}
}
console.log('Your choice = ' + userChoice);
console.log('Computer Choice = ' + compChoice);
compare();
}
rockPaperScissors();
You also had an error with checking if it isn't one of rock, paper, or scissors, so i fixed that. (It seems Barmar got to it before me.)
I updated each if/else part of your function to exit when it match if/else condition with return false. In addition I changed the if (userChoice === null) check to if (userChoice === "") because it looks like that prompt('Do you choose rock, paper or scissors?'); returns an empty string when the user doesn't enter any value. Fiddle Also, I just updated the beginning of the function to work accordingly to **Barmar'**s suggestion (he got it right first time around).
function compare() {
if (userChoice === "") {
console.log('Please select an option');
return false;
} else if ((userChoice !== 'rock') && (userChoice !=='paper') && (userChoice !=='scissors')) {
console.log('Please select rock, paper or scissors');
return false;
}
if (userChoice == compChoice) {
console.log('The result is a tie!');
return false;
} else if ((userChoice == 'rock' && compChoice == 'scissors') || (userChoice == 'paper' && compChoice == 'rock') || (userChoice == 'scissors' && compChoice == 'paper')) {
console.log('You win!');
return false;
} else {
console.log('You lose!');
return false;
}
}