Rock, paper, scissors jQuery game not working

Question

Doing a Rock, paper, scissors, spock, lizard game, and it's not working. Im sure i wasnt writing it correctly, but wanted to do as much as i could before i asked for help. So yeah, it doesnt work :/

Jsfiddle - http://jsfiddle.net/yo5Lnmqn/

html -

<body>
<div id="wrapper">
<h1>Lizard, paper, scissors, spock, rock</h1>

<div id="images">
<img class="game-image" src="Images/lizard.jpg" width="150" height="150" alt="" data-value="1"/>
<img class="game-image" src="Images/paper.jpg" width="150" height="150" alt="" data-value="2"/>
<img class="game-image" src="Images/scissors.jpg" width="150" height="150" alt="" data-value="3"/>
<img class="game-image" src="Images/spock.jpg" width="150" height="150" alt="" data-value="4"/>
<img class="game-image" src="Images/rock.jpg" width="150" height="150" alt="" data-value="5"/>
</div>

<div id="win">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="unit2.js"></script>
</body>

JS-

$(function(){

    $(document).on('click', '.game-image', function(event) {
    var value = event.target.data('value');
    var comproll = 1 + Math.floor(Math.random() * 5);   
        //$('#comproll').html('Result: '+comproll)
        if (#comproll === 1) {
            comp = "Lizard";
        }
        else if (#comproll === 2) {
            comp = "paper";
        }
        else if (#comproll === 3) {
            comp = "scissors";
        }
        else if (#comproll === 4) {
            comp = "Spock";
        }
        else if (#comproll === 5) {
            comp = "Rock";
        }

        if (#game-image === comproll) {
            #win = "This ends in a tie"
        }
        else if (game-image === 1) {
            if (comproll === 2, 4) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 3, 5){
            #win = "You lose, comp choose " + comp + ".";
            }

        else if (game-image === 2) {
            if (comproll === 4, 5) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 1, 3){
            #win = "You lose, comp choose " + comp + ".";
            }
        else if (game-image === 3) {
            if (comproll === 1, 2) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 4, 5){
            #win = "You lose, comp choose " + comp + ".";
            }
        else if (game-image === 4) {
            if (comproll === 3, 5) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 1, 2){
            #win = "You lose, comp choose " + comp + ".";
            }
        else if (game-image === 5) {
            if (comproll === 1, 3) {
            #win = "You win, comp choose" + comp + ".";
            } else if (comproll === 2, 4){
            #win = "You lose, comp choose " + comp + ".";
            }

    });//closes play function

});// closes function

as usual, thanks, u guys are awesome.

Awesome we may be, but psychic we are not. 'It doesn't work' is not a suitable description of your problem. — , Nov 04 '14 at 01:15
always look at the javascript console first for error messages — Patrick Evans, Nov 04 '14 at 01:17

score 1 · Accepted Answer · edited May 23 '17 at 12:13

As Robby Cornelissen said, your variable names are not valid. See this previously asked question about this topic : What characters are valid for JavaScript variable names?

That being said, you do have quite a few errors popping so before coming to us, try investigating them. That's how you'll make some progress, instead of having someone do the job for you.

Once those errors are solved, you get something that works (see snippet below). However your method is awfully painful and bulky. I don't have the whole what-beats-what in rock-paper-scissors-lizard-spock, but to write elegant code, you should try to find a way to decide who is the winner without describing each particular case with an if statement.

Maybe there's something worth looking into with having your values inside an array, comparing the indexes of your values (your user's and the computer's) and i'm thinking about permutation cycles on the array to have the values in the correct order.

$(function() {

  $(document).on('click', '.game-image', function(event) {
    var value = $(event.target).data('value');
    var win;
    var comproll = 1 + Math.floor(Math.random() * 5);
    //$('#comproll').html('Result: '+comproll)
    if (comproll === 1) {
      comp = "Lizard";
    } else if (comproll === 2) {
      comp = "paper";
    } else if (comproll === 3) {
      comp = "scissors";
    } else if (comproll === 4) {
      comp = "Spock";
    } else if (comproll === 5) {
      comp = "Rock";
    }

    if (value === comproll) {
      win = "This ends in a tie"
    } else if (value === 1) {
      if (comproll === 2, 4) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 3, 5) {
        win = "You lose, comp choose " + comp + ".";
      }
    } else if (value === 2) {
      if (comproll === 4, 5) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 1, 3) {
        win = "You lose, comp choose " + comp + ".";
      }
    } else if (value === 3) {
      if (comproll === 1, 2) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 4, 5) {
        win = "You lose, comp choose " + comp + ".";
      }
    } else if (value === 4) {
      if (comproll === 3, 5) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 1, 2) {
        win = "You lose, comp choose " + comp + ".";
      }
    } else if (value === 5) {
      if (comproll === 1, 3) {
        win = "You win, comp choose" + comp + ".";
      } else if (comproll === 2, 4) {
        win = "You lose, comp choose " + comp + ".";
      }

    }

    $('#win').text(win);
  }); //closes play function

}); // closes function

<body>
  <div id="wrapper">

    <h1>Lizard, paper, scissors, spock, rock</h1>

    <div id="images">
      <img class="game-image" src="Images/lizard.jpg" width="150" height="150" alt="" data-value="1" />
      <img class="game-image" src="Images/paper.jpg" width="150" height="150" alt="" data-value="2" />
      <img class="game-image" src="Images/scissors.jpg" width="150" height="150" alt="" data-value="3" />
      <img class="game-image" src="Images/spock.jpg" width="150" height="150" alt="" data-value="4" />
      <img class="game-image" src="Images/rock.jpg" width="150" height="150" alt="" data-value="5" />
    </div>
    <div id="win"></div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="unit2.js"></script>
</body>

I agree this is bulky, but if/else statements are what we are currently working on in class, so it's what i need to go with. I compared your work with what i had, and then fixed the problems. Im now well ahead of where i was previously, and can now continue working since i have most of it working. Thank you greatly for your help! — Kyle Schmelzer, Nov 04 '14 at 03:01
No problem. I must say this piqued my interest :) so if you're interested in a much cleaner way, take a look at this: [jsfiddle](http://jsfiddle.net/13rkk4j9/). I noticed a pattern, and that if you keep your values in that order: [scissors, lizard, paper, spock, rock] (or any cyclic permutation of this), then the 2 values on the right of your value will beat you and the 2 values on the left will be beaten. (note that this will only work with a set of 5 values) — Antoine Combes, Nov 04 '14 at 03:09

Robby Cornelissen · Answer 2 · 2014-11-04T01:31:02.133

0

Unclear what you're trying to do here, but

#comproll
#game-image
game-image

are not valid variable names. And even if they were, the variables are not being declared anywhere.

edited Nov 04 '14 at 01:31

answered Nov 04 '14 at 01:17

Robby Cornelissen

91,784
22
134
156

score 0 · Answer 3 · answered Nov 04 '14 at 02:34

There you go

HTML

<div class="item" id="rock" data-val="0">
    <img src="" alt="rock"></img>    
</div>
<div class="item" id="paper" data-val="1">
    <img src="" alt="paper"></img>
</div>
<div class="item" id="scissors" data-val="2">
    <img src="" alt="scissors"></img>
</div>
<div class="item" id="lizrd" data-val="3">
    <img src="" alt="lizrd"></img>
</div>
<div class="item" id="spock"  data-val="4">
    <img src="" alt="spock"></img>
</div>

JS

$.fn.versus = function() {
    var you = $(this).data('val');
    var oponent = getRandomInt(0, 4); 

    // Instead of using a lot if/else stuff
    // we can use some kind of versus result matrix
    // where rows are your selection (first index)    
    // and columns are your oponent's selection (second index)
    //     0 : you win
    //     1 : you lose
    //     2 : tie
    var versusMatrix = [
    //    0  1  2  3  4
    //    r  p  s  l  sp
        [ 2, 1, 0, 0, 1 ],  //0. rock
        [ 0, 2, 1, 1, 0 ],  //1. paper
        [ 1, 0, 2, 0, 1 ],  //2. scissors
        [ 1, 0, 1, 2, 0 ],  //3. lizard
        [ 0, 1, 0, 1, 2 ]   //4. spock
    ];

    var result = versusMatrix[you][oponent];
    return getResultMessage(you, oponent, result);
}

function getRandomInt(bottom, top) {
    return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
}

function getResultMessage(you, oponent, result) {
    var items = ["rock", "paper", "scissors", "lizard", "spock"];
    var results = ["You won!", "You lost!", "It's a tie!"]

    return 'You: ' + items[you] + '\nOponent: ' + items[oponent] + '\n\n' + results[result];
}

$(document).ready(function(){
    initGame();    
});

function initGame() {
    var items = $('.item');

    items.click(function(){
        alert($(this).versus());
    });
}

Although this is pretty awesome, this is also way above my head. The reason we're using if/else statements to do this is because thats simply what we're learning at the moment. No arrays or matrixes, so i sadly dont think i should use this. TY though. — Kyle Schmelzer, Nov 04 '14 at 02:56

Rock, paper, scissors jQuery game not working

3 Answers3