Conditional statement not functioning as expected: Javascript - javascript

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));
}

Related

Stuck on Rock, Paper, Scissors

I'm working through my first JS project and making a basic Rock, Paper, Scissors game. I get stuck when I attempt to play a single round. I don't know if my code accepts case-insensitive input from the user (rock, Rock, ROCK, rOcK).
My console seems to display a random result of the game. For example, if I input Rock, and the computer also inputs Rock, the console sometimes displays "You win!", and I don't know why that's happening.
Here is my code below. Any guidance is greatly appreciated!
function getComputerChoice() {
const randomNum = Math.floor(Math.random() * 3)
switch (randomNum) {
case 0:
return "rock";
case 1:
return "paper";
case 2:
return "scissors";
}
}
console.log(getComputerChoice());
function userInput() {
const ask = prompt("To begin game, select Rock, Paper, or Scissors");
return ask.toLowerCase();
}
function playRound(playerSelection, computerSelection) {
if (playerSelection == "rock" && computerSelection == "scissors") {
return "You win!";
} else if (playerSelection == "rock" && computerSelection == "paper") {
return "You lose";
} else if (playerSelection == "scissors" && computerSelection == "paper") {
return "You win!";
} else if (playerSelection == "scissors" && computerSelection == "rock") {
return "You lose";
} else if (playerSelection == "paper" && computerSelection == "rock") {
return "You win!";
} else if (playerSelection == "paper" && computerSelection == "scissors") {
return "You lose";
} else if (playerSelection == computerSelection) {
return "It's a tie";
} else {
return "Try again";
}
}
const playerSelection = userInput();
const computerSelection = getComputerChoice();
console.log(playRound(playerSelection, computerSelection));
It looks like you are displaying a random computer choice, then selecting again for the game. To fix this remove line 12 (console.log(getComputerChoice());) and add the following line right after you declare computerSelection:
console.log(computerSelection);
Here is the final code:
function getComputerChoice() {
const randomNum = Math.floor(Math.random() * 3)
switch (randomNum) {
case 0:
return "rock";
case 1:
return "paper";
case 2:
return "scissors";
}
}
function userInput() {
const ask = prompt("To begin game, select Rock, Paper, or Scissors");
return ask.toLowerCase();
}
function playRound(playerSelection, computerSelection) {
if (playerSelection == "rock" && computerSelection == "scissors") {
return "You win!";
} else if (playerSelection == "rock" && computerSelection == "paper") {
return "You lose";
} else if (playerSelection == "scissors" && computerSelection == "paper") {
return "You win!";
} else if (playerSelection == "scissors" && computerSelection == "rock") {
return "You lose";
} else if (playerSelection == "paper" && computerSelection == "rock") {
return "You win!";
} else if (playerSelection == "paper" && computerSelection == "scissors") {
return "You lose";
} else if (playerSelection == computerSelection) {
return "It's a tie";
} else {
return "Try again";
}
}
const playerSelection = userInput();
const computerSelection = getComputerChoice();
console.log(computerSelection);
console.log(playRound(playerSelection, computerSelection));

How to compare the ID of a clicked button to another string?

I am trying to compare a clicked button's ID to a random string output from another function and log the result in the console (it's a rock, paper, scissors game); Code depicted below
buttons.forEach((button) => {
button.addEventListener("click", () => {
console.log(playRound(event.srcElement.id));
});
});
function playRound(playerSelection) {
const computerSelection = computerPlay;
if (playerSelection === 'rock' && computerSelection === 'rock') {
return 'Tie Game!';
} else if (playerSelection === 'rock' && computerSelection === 'paper') {
return 'Paper beats rock! You lose!';
} else if (playerSelection === 'rock' && computerSelection === 'scissors') {
return 'Rock beats scissors! You win!';
} else if (playerSelection === 'paper' && computerSelection === 'rock') {
return 'Paper beats rock! You win!';
} else if (playerSelection === 'paper' && computerSelection === 'paper') {
return 'Tie Game!';
} else if (playerSelection === 'paper' && computerSelection === 'scissors') {
return 'Scissors beats paper! You lose!';
} else if (playerSelection === 'scissors' && computerSelection === 'rock') {
return 'Rock beats Scissors! You lose!';
} else if (playerSelection === 'scissors' && computerSelection === 'paper') {
return 'Scissors beats paper! You win!';
} else if (playerSelection === 'scissors' && computerSelection === 'scissors') {
return 'Tie Game!';
}
}
function computerPlay() {
const play = (Math.floor(Math.random() * 3));
if (play === 0) {
return 'rock';
}
else if (play === 1) {
return 'paper';
}
else if (play === 2) {
return 'scissors';
}
}
I know this code is a bit inefficient but my problem is that the playRound() function returns undefined when I execute this. I've tried logging the button's ID alone, which worked, I've tried passing the button's ID as a parameter to a dummy function, which worked, and I tried logging the computerPlay() output to make sure it was returning a string (it was). I can't tell why my playRound() function is unable to compare the two strings given and return a result string.

What is wrong with my if/else statements?

My first time and first project: Rock, Paper, Scissors. I have spent hours trying to figure out what could be wrong with my if/else statements. Regardless of conditions evaluated, it returns the first statement(It's a tie"). My code is as below;
const computerSelection = computerPlay();
const playerSelection = humanPlay();
function computerPlay() {
let gameItems = ["rock", "paper", "scissors"];
let randItem = gameItems[Math.floor(Math.random() * gameItems.length)];
return randItem.toLowerCase();
}
function humanPlay() {
let selectItem = prompt(
"Please pick one battle item: rock, paper, or scissors"
);
return selectItem.toLowerCase();
}
function playRound(playerSelection, computerSelection) {
if (playerSelection === computerSelection) {
return "It's a tie!";
} else if (computerSelection === "rock" && playerSelection === "scissors") {
return "You lose!";
} else if (computerSelection === "scissors" && playerSelection === "rock") {
return "You win";
} else if (computerSelection === "scissors" && playerSelection === "paper") {
return "You lose";
} else if (computerSelection === "paper" && playerSelection === "scissors") {
return "You win";
} else if (computerSelection === "paper" && playerSelection === "rock") {
return "You lose";
} else if (computerSelection === "rock" && playerSelection === "paper") {
return "You win";
} else {
return "Please play again";
}
}
console.log(computerSelection);
console.log(playerSelection);
console.log(playRound());
Add console.log(playerSelection, computerSelection) to the first line of the playRound() function. You'll see that both values are undefined, because you aren't passing those values into the function when you call it.
To fix, change the very last line to: console.log(playRound(computerSelection, playerSelection));

I can't assign a function of random numbers to appear when I enter the variable I set it as

I have created the below code so that the computer plays 3 different random outcomes
function computerPlay() {
let computerRandomNumber = Math.floor(Math.random() * 3)
if (computerRandomNumber === 0) {
return "rock";
} else if (computerRandomNumber === 1) {
return "paper";
} else(computerRandomNumber === 2)
return "scissors";
}
So far so good!, then I want to run another function where there will be player VS computer
function playRound() {
if (playerSelection === "rock" && computerSelection === "rock") {
return "It's a tie! Ties are lame and so are you for tying."
} else if (playerSelection === "rock" && computerSelection === "paper") {
return "Loooooser looooser nia nia nia! Paper wrapped your rock and threw it in the bin!"
} etc. etc.
I have declared these two variables for player and computer so that the above function works.
let playerSelection = ["rock", "paper", "scissors"];
let computerSelection = computerPlay();
When I console.log(computerSelection), I always get the same result and no random values, but when I console log computerPlay() it works just fine and I am getting random outcomes. Why is this happening to me? :(
Below is the whole code I have written so far
function computerPlay() {
let computerRandomNumber = Math.floor(Math.random() * 3)
if (computerRandomNumber === 0) {
return "rock";
} else if (computerRandomNumber === 1) {
return "paper";
} else(computerRandomNumber === 2)
return "scissors";
}
let playerSelection = ["rock", "paper", "scissors"];
let computerSelection = computerPlay();
function playRound() {
if (playerSelection === "rock" && computerSelection === "rock") {
return "It's a tie! Ties are lame and so are you for tying."
} else if (playerSelection === "rock" && computerSelection === "paper") {
return "Loooooser looooser nia nia nia! Paper wrapped your rock and threw it in the bin!"
} else if (playerSelection === "rock" && computerSelection === "scissors") {
return "Bravoooo you made it! Rock smashed the scissors! "
} else if (playerSelection === "paper" && computerSelection === "rock") {
return "Bravoooo you made it! Paper wrapped the rock and threw it in the bin! "
} else if (playerSelection === "paper" && computerSelection === "paper") {
return "It's a tie! Ties are lame and so are you for tying. "
} else if (playerSelection === "paper" && computerSelection === "scissors") {
return "Loooooser looooser nia nia nia! Scissors cut through your paper and made it look like an ugly origami swan"
} else if (playerSelection === "scissors" && computerSelection === "rock") {
return "Loooooser looooser nia nia nia! Rock smashed the scissors. "
} else if (playerSelection === "scissors" && computerSelection === "paper") {
return "Bravoooo you made it! Scissors cut through paper and made it look like an ugly origami swan"
} else(playerSelection === "scissors" && computerSelection === "scissors")
return "It's a tie! Ties are lame and so are you for tying. "
}
You assign a variable once and never change it.
if you want the computer to make a decision on each round, you could write something like this:
function computerPlay() {
let computerRandomNumber = Math.floor(Math.random() * 3)
if (computerRandomNumber === 0) {
return "rock";
} else if (computerRandomNumber === 1) {
return "paper";
} else {
return "scissors";
}
}
let playerSelectionVariants = ["rock", "paper", "scissors"];
function playRound() {
let computerSelection = computerPlay();
let playerSelection = /* request user input from playerSelectionVariants */
if (playerSelection === "rock" && computerSelection === "rock") {
return "It's a tie! Ties are lame and so are you for tying."
} else if (playerSelection === "rock" && computerSelection === "paper") {
return "Loooooser looooser nia nia nia! Paper wrapped your rock and threw it in the bin!"
} else if (playerSelection === "rock" && computerSelection === "scissors") {
return "Bravoooo you made it! Rock smashed the scissors! "
} else if (playerSelection === "paper" && computerSelection === "rock") {
return "Bravoooo you made it! Paper wrapped the rock and threw it in the bin! "
} else if (playerSelection === "paper" && computerSelection === "paper") {
return "It's a tie! Ties are lame and so are you for tying. "
} else if (playerSelection === "paper" && computerSelection === "scissors") {
return "Loooooser looooser nia nia nia! Scissors cut through your paper and made it look like an ugly origami swan"
} else if (playerSelection === "scissors" && computerSelection === "rock") {
return "Loooooser looooser nia nia nia! Rock smashed the scissors. "
} else if (playerSelection === "scissors" && computerSelection === "paper") {
return "Bravoooo you made it! Scissors cut through paper and made it look like an ugly origami swan"
} else {
return "It's a tie! Ties are lame and so are you for tying. "
}
}

Reset variable value to 0

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.

Categories