Javascript Rock, paper, scissors game. Whats wrong with my code? - javascript

I want the code to grab the value that the user has entered in the input field and pass it to a variable userChoice. I have no idea why this code isn't working and the only way to learn is to ask you guys.
HTML:
<h3> Choose your destiny !</h3>
<form>
<input type="text" id="form" />
<input type="button" id="button" value="Click Me!" onclick="clickMe();" />
</form>
JavaScript:
var computerChoice = Math.random();
var userChoice = "";
function clickMe() {
document.getElementById("form").value === userChoice;
}
if (computerChoice < 0.33) {
computerChoice = "rock";
};
if (computerChoice < 0.66) {
computerChoice = "paper";
};
if (computerChoice < 1) {
computerChoice = "scissors";
};
if (userChoice === "rock" && computerChoice === "rock") {
alert("It's a tie!");
} else if (userChoice === "rock" && computerChoice === "paper") {
alert("Computer Wins!");
} else if (userChoice === "rock" && computerChoice === "scissors") {
alert("You WIN!");
};
if (userChoice === "paper" && computerChoice === "rock") {
alert("You WIN!");
} else if (userChoice === "paper" && computerChoice === "paper") {
alert("It's a TIE!");
} else if (userChoice === "paper" && computerChoice === "scissors") {
alert("Computer Wins!");
};
if (userChoice === "scissors" && computerChoice === "rock") {
alert("Computer Wins!");
} else if (userChoice === "scissors" && computerChoice === "paper") {
alert("You WIN!");
} else if (userChoice === "scissors" && computerChoice === "scissors") {
alert("It's a TIE!");
};
Fiddle

Your function clickMe doesn't work like you'd expect I guess:
function clickMe() {
userChoice = document.getElementById("form").value;
// ... rest of your code goes inside clickMe
}
To assign a value to a variable you need a single =

Here is the simple way
<div id="Result"></div>
<div id="sellection">
Rock
Paper
Scissors
</div>
and the script is:
function result(users){
var choices = ["Rock","Paper","Scissors"];
var succesResult = "You Loose :(";
var machines = Math.floor((Math.random() * 3));
var dif = users-machines;
if(dif>0&&dif!=2||dif==-2){
succesResult = "You Win :)";
}else if(dif==0){
succesResult = "You Draw";
}
var resultText = "You Selected "+choices[users]+", Computer Selected "+choices[machines]+" and "+succesResult;
document.getElementById("Result").innerHTML = resultText;
}

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

use my 1 round code to make a 3 rounds "Rock Paper Scissors" game - Javascript

I'm building a rock paper scissors game with Javascript, i did a 1 round mode of the game and it work, now i want to add a second mode " best of three rounds" but after trying many things i got my code messy and can't figure out what to do exactly.
i try to add a count = 0; count < 3; count = count + 1but don't know exactly where to put it
can someone help me please?
var mode = prompt("Please press 1 for single game mode or 2 for best out of 3 mode");
if (mode === '1') {
oneRound;
}
if (mode === '2') {
bestOfThree;
}
// set Computer Choice
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";
}
// Compare value for oneRound mode
var oneRound = function(computerChoice, userChoice) {
if (computerChoice === userChoice) {
return "The result is tie!";
}
if (computerChoice === "rock") {
if (userChoice === "scissors") {
return "Computer wins";
} else {
if (userChoice === "paper")
return "Player wins";
}
}
if (computerChoice === "paper") {
if (userChoice === "scissors") {
return "Computer wins";
} else {
if (userChoice === "rock")
return "Player wins";
}
}
if (computerChoice === "scissors") {
if (userChoice === "rock") {
return "Computer wins";
} else {
if (userChoice === "scissors")
return "Player wins";
}
}
};
console.log("Player Choice: " + userChoice);
console.log("Computer Choice: " + computerChoice);
console.log(oneRound(computerChoice, userChoice));
Have look at this
I use setTimeout to allow the screen to show the result
const play = () => {
// set Computer Choice
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 Choice: " + userChoice);
console.log("Computer Choice: " + computerChoice);
if (computerChoice === userChoice) {
return "The result is tie!";
}
if (computerChoice === "rock") {
if (userChoice === "scissors") {
return "Computer wins";
} else {
if (userChoice === "paper")
return "Player wins";
}
}
if (computerChoice === "paper") {
if (userChoice === "scissors") {
return "Computer wins";
} else {
if (userChoice === "rock")
return "Player wins";
}
}
if (computerChoice === "scissors") {
if (userChoice === "rock") {
return "Computer wins";
} else {
if (userChoice === "scissors")
return "Player wins";
}
}
};
const round = () => {
const res = play();
console.log(res)
cnt--
wins[cnt] = res.startsWith("Player") ? 1 : 0;
if (cnt === 0) {
const total = wins.reduce((a, b) => a + b)
console.log(`You beat the computer ${total} time${total===1?"":"s"}`)
return
}
setTimeout(round, 10) // else go again
}
let cnt = 1,
wins = [];
const mode = prompt("Please press 1 for single game mode or 2 for best out of 3 mode");
if (mode === '2') {
cnt = 3;
}
round()

Only getting "draw" result in Rock, Paper, Scissors game

I'm currently writing a Rock, Paper, Scissors game in Javascript, and for some reason, no matter what the player input is, I always get a "draw" result. I've been trying to figure it out for the last hour but no dice. Any help is really appreciated. I've put my code below.
let computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
let playerPrompt = prompt("Rock, paper, or scissors?")
let playerChoice = String(playerPrompt).toLowerCase
function playRound(playerChoice, computerChoice) {
if (playerChoice === computerChoice) {
return "Draw!"
} else if (playerChoice === "rock" && computerChoice === "scissors") {
return "Player wins!"
} else if (playerChoice === "paper" && computerChoice === "rock") {
return "Player wins!"
} else if (playerChoice === "scissors" && computerChoice === "paper") {
return "Player wins!"
} else {
return "Computer wins!"
}
}
let results = playRound()
console.log(results)```
If I'm not mistaken, you're not passing any arguments to playRound(), it should probably be:
let results = playRound(playerChoice, computerChoice)
Edit: As mentionned by Quentin (and Alon Eitan) it is not the only problem:
let playerChoice = String(playerPrompt).toLowerCase
actually assigns the function String.toLowerCase to playerChoice, if you want the lower case value of playerPrompt the syntax should be
let playerChoice = playerPrompt.toLowerCase()
or directly
let playerChoice = prompt("Rock, paper, or scissors?").toLowerCase()
The error is toLowerCase instead of toLowerCase(), you missed the parenthesis. Try running this snippet, it works
let computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
}
let playerPrompt = prompt("Rock, paper, or scissors?")
let playerChoice = String(playerPrompt).toLowerCase()
function playRound(playerChoice, computerChoice) {
if (playerChoice === computerChoice) {
return "Draw!"
} else if (playerChoice === "rock" && computerChoice === "scissors") {
return "Player wins!"
} else if (playerChoice === "paper" && computerChoice === "rock") {
return "Player wins!"
} else if (playerChoice === "scissors" && computerChoice === "paper") {
return "Player wins!"
} else {
return "Computer wins!"
}
}
let results = playRound(playerChoice, computerChoice)
console.log(results)

Exiting out of a function in Javascript. Simple rock, paper, scissors game

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

Basic JavaScript Rock-Paper-Scissors game not working properly

I need a bit of help with a basic JavaScript version of Rock-Paper-Scissors I'm working on. I just started learning today and would like to keep the code as intact as possible, if possible.
The main problem I'm having is with the loop. It continues despite me setting 'again' to 'no' (through the prompt). Also, the computer always seems to choose Rock... I have a feeling that I'm just missing something simple:
<html>
<script type="text/javascript">
var myChoice = "";
var compChoice = "";
var again;
while (again = "yes")
{
myChoice = prompt("Do you choose rock, paper or scissors?");
compChoice = Math.random();
if (compChoice < 0.33)
{
compChoice = "rock";
}
else if(compChoice < 0.67)
{
compChoice = "paper";
}
else
{
compChoice = "scissors";
}
if (compChoice = myChoice)
{
alert("It's a tie!");
again = prompt("Would you like to play again?(yes/no)");
}
else if (compChoice = "rock")
{
if(myChoice = "scissors")
{
alert("You lose!");
again = prompt("Would you like to play again?(yes/no)");
}
else if (myChoice = "paper")
{
alert("You win!");
again = prompt("Would you like to play again?(yes/no)");
}
}
else if (compChoice = "paper")
{
if (myChoice = "rock")
{
alert("You lose!");
again = prompt("Would you like to play again?(yes/no)");
}
else if (myChoice = "scissors")
{
alert("You win!");
again = prompt("Would you like to play again?(yes/no)");
}
}
else if (compChoice = "scissors")
{
if (myChoice = "rock")
{
alert("You win!");
again = prompt("Would you like to play again?(yes/no)");
}
else if (myChoice = "paper")
{
alert("You lose!");
again = prompt("Would you like to play again?(yes/no)");
}
}
};
</script>
</html>
You are using = instead of == in the while statement and same in all the if statements also
= is the assignment operator, while == is the comparison operator
var myChoice = "";
var compChoice = "";
var again;
do
{
myChoice = prompt("Do you choose rock, paper or scissors?");
compChoice = Math.random();
if (compChoice < 0.33)
{
compChoice == "rock";
}
else if(compChoice < 0.67)
{
compChoice = "paper";
}
else
{
compChoice == "scissors";
}
if (compChoice == myChoice)
{
alert("It's a tie!");
}
else if (compChoice == "rock")
{
if(myChoice == "scissors")
{
alert("You lose!");
}
else if (myChoice == "paper")
{
alert("You win!");
}
}
else if (compChoice == "paper")
{
if (myChoice == "rock")
{
alert("You lose!");
}
else if (myChoice == "scissors")
{
alert("You win!");
}
}
else if (compChoice == "scissors")
{
if (myChoice == "rock")
{
alert("You win!");
}
else if (myChoice == "paper")
{
alert("You lose!");
}
}
again = prompt("Would you like to play again?(yes/no)");
}while (again == "yes");
Demo: Fiddle
One major issue is that you are assigning values instead of comparing values in multiple places.
a = 2 // assigns a to value 2, and evaluates to true
a == 2 // compares a to 2, only evaluates to true if a has value 2

Categories