I'm kind of new to JavaScript. I just started learning it, and I decided to make a 'Rock, Paper, Scissors, Lizard, Spock' game. Here is the code:

var userChoice = prompt("Do you choose rock, paper, scissors, lizard, or spock?")
var puterChoice = Math.random();
if (puterChoice < 0.2) {
    puterChoice = "rock";
} else if (puterChoice <= 0.4) {
    puterChoice = "paper";
} else if (puterChoice <= 0.6) {
    puterChoice = "scissors";
} else if (puterChoice <= 0.8) {
    puterChoice = "lizard";
} else {
    puterChoice = "spock";
}

alert("The puter chose " + puterChoice);

var pare = function(choice1, choice2){
    if (choice1 === choice2) {
        alert("And... It's a tie!");
    }

//If the user chose rock...
else if (choice1 === "rock") {
    if (choice2 === "scissors") {
        alert("Rock wins!");
    } else if (choice2 === "paper") {
        alert("Paper wins!");
    } else if (choice2 === "lizard") {
        alert("Rock wins!");
    } else {
        alert("Spock wins!");
    }
}

//If the user chose paper...
else if (choice1 === "paper") {
    if (choice2 === "scissors") {
        alert("Scissors wins!");
    } else if (choice2 === "rock") {
        alert("Paper wins!");
    } else if (choice2 === "lizard") {
        alert("Lizard wins!");
    } else {
        alert("Paper wins!");
    }
}

//If the user chose scissors...
else if (choice1 === "scissors") {
    if (choice2 === "paper") {
        alert("Scissors wins!");
    } else if (choice2 === "rock") {
        alert("Rock wins!");
    } else if (choice2 === "lizard") {
        alert("Scissors wins!");
    } else {
        alert("Spock wins!");
    }
}

//If the user chose lizard...
else if (choice1 === "lizard") {
    if (choice2 === "scissors") {
        alert("Scissors wins!");
    } else if (choice2 === "rock") {
        alert("Rock wins!");
    } else if (choice2 === "paper") {
        alert("Lizard wins!");
    } else {
        alert("Lizard wins!");
    }
}

//If the user chose spock...
else if (choice1 === "spock") {
    if (choice2 === "scissors") {
        alert("Spock wins!");
    } else if (choice2 === "rock") {
        alert("Spock wins!");
    } else if (choice2 === "lizard") {
        alert("Lizard wins!");
    } else {
        alert("Paper wins!");
    }
}
};
pare(userChoice, puterChoice);

There are 2 main things that I want to add to my code but I don't know how to:

1. Right now, if the user inputs, for example, 'Rock' with a capital 'R', it doesn't get recognized as one of the five valid inputs (rock, paper, scissors, lizard, and spock). Is there a way to make it so that if the user inputs something valid with a capital letter (or letters) it will still be valid?

2. I want to add something so that whenever someone puts in something invalid (e.g. "sloth") it will alert them that their input is invalid and will ask them, again, to put in rock, paper, scissors, lizard, or spock.

I'm kind of new to JavaScript. I just started learning it, and I decided to make a 'Rock, Paper, Scissors, Lizard, Spock' game. Here is the code:

var userChoice = prompt("Do you choose rock, paper, scissors, lizard, or spock?")
var puterChoice = Math.random();
if (puterChoice < 0.2) {
    puterChoice = "rock";
} else if (puterChoice <= 0.4) {
    puterChoice = "paper";
} else if (puterChoice <= 0.6) {
    puterChoice = "scissors";
} else if (puterChoice <= 0.8) {
    puterChoice = "lizard";
} else {
    puterChoice = "spock";
}

alert("The puter chose " + puterChoice);

var pare = function(choice1, choice2){
    if (choice1 === choice2) {
        alert("And... It's a tie!");
    }

//If the user chose rock...
else if (choice1 === "rock") {
    if (choice2 === "scissors") {
        alert("Rock wins!");
    } else if (choice2 === "paper") {
        alert("Paper wins!");
    } else if (choice2 === "lizard") {
        alert("Rock wins!");
    } else {
        alert("Spock wins!");
    }
}

//If the user chose paper...
else if (choice1 === "paper") {
    if (choice2 === "scissors") {
        alert("Scissors wins!");
    } else if (choice2 === "rock") {
        alert("Paper wins!");
    } else if (choice2 === "lizard") {
        alert("Lizard wins!");
    } else {
        alert("Paper wins!");
    }
}

//If the user chose scissors...
else if (choice1 === "scissors") {
    if (choice2 === "paper") {
        alert("Scissors wins!");
    } else if (choice2 === "rock") {
        alert("Rock wins!");
    } else if (choice2 === "lizard") {
        alert("Scissors wins!");
    } else {
        alert("Spock wins!");
    }
}

//If the user chose lizard...
else if (choice1 === "lizard") {
    if (choice2 === "scissors") {
        alert("Scissors wins!");
    } else if (choice2 === "rock") {
        alert("Rock wins!");
    } else if (choice2 === "paper") {
        alert("Lizard wins!");
    } else {
        alert("Lizard wins!");
    }
}

//If the user chose spock...
else if (choice1 === "spock") {
    if (choice2 === "scissors") {
        alert("Spock wins!");
    } else if (choice2 === "rock") {
        alert("Spock wins!");
    } else if (choice2 === "lizard") {
        alert("Lizard wins!");
    } else {
        alert("Paper wins!");
    }
}
};
pare(userChoice, puterChoice);

There are 2 main things that I want to add to my code but I don't know how to:

1. Right now, if the user inputs, for example, 'Rock' with a capital 'R', it doesn't get recognized as one of the five valid inputs (rock, paper, scissors, lizard, and spock). Is there a way to make it so that if the user inputs something valid with a capital letter (or letters) it will still be valid?

2. I want to add something so that whenever someone puts in something invalid (e.g. "sloth") it will alert them that their input is invalid and will ask them, again, to put in rock, paper, scissors, lizard, or spock.

• javascript

• 1 choice1.toLowerCase() – Stephen P Commented Mar 25, 2014 at 0:38
• 3 consider using a switch statement, makes things much clearer and you can specify a "default" which runs whenever none of the other selections are true, so you would set under default: alert("sorry your selection was invalid") break; – Matthew Pigram Commented Mar 25, 2014 at 0:40
• Is the question really about rock paper scissors or is it about how to make JavaScript recognize an upper case input as a lowercase input? – George Stocker Commented Mar 25, 2014 at 1:00
• Recent Too many 'if' statements? about simplifying a swith statement when two players fight with 4 options each. It's really similar and has many good answers. I remend the matrix method for representing your data. Also, it's PHP, but it's almost the same for this case. – Francisco Presencia Commented Mar 25, 2014 at 2:33

6 Answers 6

Simplify result function with math. http://jsfiddle/afrievalt/qBbJn/

var options = ["paper", "rock", "lizard", "spock", "scissors"],
  result = [" ties ", " beats ", " loses to "],
  bigBang = function(choice1, choice2) {
      var index1 = options.indexOf(choice1), //spock => 3
          index2 = options.indexOf(choice2), //rock=> 1
          dif = index2 - index1; // 1 - 3 => -2
      if(dif < 0) { // -2 < 0 => truthy
          dif += options.length; // -2 + 5 => 3
      }
      while(dif > 2) { //3 > 2 => truthy
          dif -= 2; // 3 - 2 => 1
      }
      return choice1 + result[dif] + choice2; //spock beats rock
  };

.

  bigBang("spock", "paper");  // spock losses to paper 

  var i = Math.floor(Math.random() * 5),
      randomChoice = options[i];
  bigBang(randomChoice, userChoice);

this function will also work with options = ["cockroach", "nuke", "shoe"], (from that 70s show) or any odd length array like options = ["water", "fire", "paper", "rock", "tree", "metal", "mud"] //todo: throw error if any index = -1

Lets go object oriented on this. It will reduce repitition in the logic:

//Set up the choices with what they can beat
//This is a hash table of objects you can referecne by name
var choices  =  {rock : {name: "Rock", defeats: ["scissors","lizard"]},
                 paper: {name: "Paper", defeats: ["rock", "spock"]},
                 scissors: {name: "Scissors", defeats: ["paper", "lizard"]},
                 lizard: {name: "Lizard", defeats:["paper","spock"]},
                 spock: {name: "Spock", defeats:["scissors","rock"]}
                };


//Get the puters choice
var puterChoice = Math.random();
if (puterChoice < 0.2) {
    puterChoice = "rock";
} else if (puterChoice <= 0.4) {
    puterChoice = "paper";
} else if (puterChoice <= 0.6) {
    puterChoice = "scissors";
} else if (puterChoice <= 0.8) {
    puterChoice = "lizard";
} else {
    puterChoice = "spock";
}


//Get the users choice, normalising to lower case    
var userChoice = prompt("Do you choose rock, paper, scissors, lizard, or spock?").toLowerCase();

alert("The puter chose " + puterChoice);    

//Check for a tie
if(puterChoice == userChoice){
    alert("It's a tie");
//Check for a valid choice
}else if(choices[userChoice] === undefined){
    alert("Invalid Choice");
}else{
    //Get the chosen one as an object
    userChoice = choices[userChoice];



    //Check For a win
    /*var victory = false;
    for(var i = 0; i < userChoice.defeats.length; i++){
        if(puterChoice == userChoice.defeats[i])
        {
            victory = true;
            break;
        }
    }*/

    //Improved check, inspired by Mke Spa Guy
    var victory = userChoice.defeats.indexOf(puterChoice) > -1;

    //Display result
    if(victory) {
        alert("Vitory! " + userChoice.name + " wins!")
    }else{
        alert("Defeat, " + puterChoice + " wins!");
    }   
}

Thats it, and Spocks' your uncle.

Demo

Demo with full action : e.g: Paper Covers Rock;

More Reading:

https://developer.mozilla/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

https://developer.mozilla/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

http://www.mojavelinux./articles/javascript_hashes.html

I would write a function to get the correct response instead of doing it all inline.. that's just me..

function getUserChoice(){
    var invalidPin = true;
    var response;
    while(invalidPin){
        response = prompt("choose your thing..");
            if(response == "rock" || response == "paper" || response == "scizerz"){
                invalidPin = false;
            }
        }
    }
    return response;
}

then you can get the user's choice simply by calling the function

var userChoice = getUserChoice();

As several users have mentioned, your best bet for paring is to convert the input to lowercase.

For your second point, I would wrap the input parsing in a loop, like this:

while(true){
    var input = getInput();

    if(isValid(input)){
        // check for the winner
        break;
    }else{
        // tell the user that their input is invalid
    }
}

I would do something like the following (please note that the syntax may be off slightly):

var pare = function (choice1, choice2)
{
    switch (choice1.tolower())
    {
        case "rock"
            RockPicked(choice2);
            break;
        case "scissors"
            ScissorsPicked(choice2);
            break;
        ....
        ....
        case default
            alert ("Selection was invalid")
            break;
    }

}

// if the user picked rock then we pare the puters choice and decide winner
var RockPicked = function(choice2)
{
    if (choice2 === "scissors") 
    {
        alert("Rock wins!");
    } 
    else if (choice2 === "paper") 
    {
        alert("Paper wins!");
    } 
    else if (choice2 === "lizard") 
    {
        alert("Rock wins!");
    } 
    else 
    {
        alert("Spock wins!");
    }
}

If you help yourself with a table of binations like this one -
https://mons.wikimedia/wiki/File:Normal_form_matrix_of_Rock-paper-scissors-lizard-Spock.jpg

I use 2 instead of -1 (0 - Tie; 1 - row win; 2 - row looses)

Then your code bees:

    var options=["Rock","Paper","Scissors","Lizard","Spock"]
    var outes=[[0,2,1,1,2],[1,0,2,2,1],[2,1,0,1,2],[2,1,2,0,1],[1,2,1,2,0]]

    function RPSLS(user){

    var puter=Math.floor(Math.random()*5);

    if (outes[user][puter]==0){alert("Tie");}
    if (outes[user][puter]==1){alert("User Wins");}
    if (outes[user][puter]==2){alert("Computer Wins");}
    txt1.value=options[user];
    txt2.value=options[puter];}

Then the HMTL part of the output:

    Please choose:<br>
    <button onclick="RPSLS(0)">Rock</button>
    <button onclick="RPSLS(1)">Paper</button>
    <button onclick="RPSLS(2)">Scissors</button>
    <button onclick="RPSLS(3)">Lizard</button>
    <button onclick="RPSLS(4)">Spock</button>
    <button onclick="RPSLS(Math.floor(Math.random()*4))">Random    Game</button><P>
    <textarea id="txt1"></textarea><textarea id="txt1"></textarea>