Why doesn't it say I win when I do in rock, paper, scissors, lizard, spock?

Question

My game works fine except when I win when lizard or spock is involved, I can't figure out why because when I lose it displays that I lose which is correct. I tried to look for typos but couldn't find any. If anyone can see what's wrong I'd appreciate it.

Here is a fiddle so you can see the problem: http://jsfiddle.net/5RGwv/

Here is my HTML:

<div id="center">

<button id="button" onclick="play()">Play</button>
<p>You rolled:</p><span id="myroll"></span>
<p>Your opponent rolled:</p><span id="opproll"></span>

<p id="outcome"></p>
</div>

Javascript:

function play() {

var ROCK = 0;
var PAPER = 1;
var SCISSORS = 2; 
var LIZARD = 3;
var SPOCK = 4;

var choices = ['rock', 'paper', 'scissors', 'lizard', 'spock'];

var myRoll = Math.floor(Math.random()*choices.length);
var opponentRoll = Math.floor(Math.random()*choices.length);

document.getElementById("myroll").innerHTML=choices[myRoll];
document.getElementById("opproll").innerHTML=choices[opponentRoll];

if (myRoll == opponentRoll) {
document.getElementById("outcome").innerHTML="It's a draw.";
return;
} //end of if

switch(myRoll) {

case ROCK:
    document.getElementById("outcome").innerHTML=(opponentRoll == SCISSORS ? 'You win!' : 'You lose!');
    return;

case ROCK:
    document.getElementById("outcome").innerHTML=(opponentRoll == LIZARD ? 'You win!' : 'You lose!');
    return;

case PAPER: 
    document.getElementById("outcome").innerHTML=(opponentRoll == ROCK ? 'You     win!' : 'You lose!');
    return;

case PAPER:
    document.getElementById("outcome").innerHTML=(opponentRoll == SPOCK ? 'You win!' : 'You lose!');
    return;

case SCISSORS:
    document.getElementById("outcome").innerHTML=(opponentRoll == PAPER ? 'You win!' : 'You lose!');
    return;

case SCISSORS:
    document.getElementById("outcome").innerHTML=(opponentRoll == LIZARD ? 'You win!' : 'You lose!');
    return;

case LIZARD:
    document.getElementById("outcome").innerHTML=(opponentRoll == SPOCK ? 'You win!' : 'You lose!');
    return;

case LIZARD:
    document.getElementById("outcome").innerHTML=(opponentRoll == PAPER ? 'You win!' : 'You lose!');
    return;

case SPOCK:
    document.getElementById("outcome").innerHTML=(opponentRoll == SCISSORS ? 'You win!' : 'You lose!');
    return;

case SPOCK:
    document.getElementById("outcome").innerHTML=(opponentRoll == ROCK ? 'You win!' : 'You lose!');
    return;

} //end of switch(myRoll)


} //end of play()

Wanted to add more elements than rock, paper, scissors. So this would be a good way to do it :P — Duplo W, Feb 18 '14 at 09:44
"I can't figure out why because when I lose it displays that I lose which is correct." Than what is the problem exactly? — PeeHaa, Feb 18 '14 at 09:44
In you switch the options appear multiple times. JS will just execute the first finding and omit the others. — Sirko, Feb 18 '14 at 09:44
@PeeHaa the problem is in the topic, it doesn't display that I win when I do. — Duplo W, Feb 18 '14 at 09:45
Combine the different `case` commands for the same case into one and then use an `if` to distinguish further. — Sirko, Feb 18 '14 at 09:47
@Sirko is this the way I would write it? case ROCK: document.getElementById("outcome").innerHTML=(opponentRoll == SCISSORS ? 'You win!' : 'You lose!'); if (opponentRoll == LIZARD) { document.getElementById("outcome").innerHTML=(opponentRoll == LIZARD ? 'You win!' : 'You lose!'); } return; — Duplo W, Feb 18 '14 at 09:51
@DuploW Take a look at the given answer. From a first glance, this is pretty much, what I meant. — Sirko, Feb 18 '14 at 09:54
@Sirko I tried what u said and my code worked like a charm. Big thanks — Duplo W, Feb 18 '14 at 10:08
possible duplicate of [Rock, Paper, Scissors, Lizard, Spock in JavaScript](http://stackoverflow.com/questions/22623331/rock-paper-scissors-lizard-spock-in-javascript) — Mke Spa Guy, Sep 09 '14 at 15:02

Cerbrus · Accepted Answer · 2014-02-18T09:59:09.317

Replace your switch statement with this:

var result = false;
switch(myRoll) {
    case ROCK:
        result = opponentRoll == SCISSORS || opponentRoll == LIZARD;
        break;
    case PAPER: 
        result = opponentRoll == ROCK     || opponentRoll == SPOCK;
        break;
    case SCISSORS:
        result = opponentRoll == PAPER    || opponentRoll == LIZARD;
        break;
    case LIZARD:
        result = opponentRoll == SPOCK    || opponentRoll == PAPER;
        break;
    case SPOCK:
        result = opponentRoll == SCISSORS || opponentRoll == ROCK;
        break;
}

document.getElementById("outcome").innerHTML = result ?  'You win!' : 'You lose!';

This piece of code uses the switch only to check if you won, or not. Then, at the end the value is set.

Since you win if you roll 'rock' and the opponent rolls 'scissors' OR 'lizard', I combined those statements.

You could shorten the code even more, by just checking for win cases, like this:

var result =  myRoll == ROCK     && (opponentRoll == SCISSORS || opponentRoll == LIZARD) ||
              myRoll == PAPER    && (opponentRoll == ROCK     || opponentRoll == SPOCK)  ||
              myRoll == SCISSORS && (opponentRoll == PAPER    || opponentRoll == LIZARD) ||
              myRoll == LIZARD   && (opponentRoll == PAPER    || opponentRoll == SPOCK)  ||
              myRoll == SPOCK    && (opponentRoll == ROCK     || opponentRoll == SCISSORS);

document.getElementById("outcome").innerHTML = result ?  'You win!' : 'You lose!';

If any of those 5 lines is true, you've won.

Replace `return` with `break` or you will never reach the end of the statement — Valentin D, Feb 18 '14 at 09:50
I went with an if statement but I'm sure this would also work so gonna accept it as an answer. — Duplo W, Feb 18 '14 at 10:08
@DuploW: thanks! As usual, there's multiple ways to code something, just go with whatever is most convenient for you :) — Cerbrus, Feb 18 '14 at 10:11
Was easier to add a simple if statement than changing the whole Case :P — Duplo W, Feb 18 '14 at 11:00

Why doesn't it say I win when I do in rock, paper, scissors, lizard, spock?

1 Answers1