My rock,paper scissors jQuery is not producing losses

Question

I have a simple rock, paper, scissors, spock, lizard game. I have it to pick a picture, then upon picking, playing the game. Much like rock, paper, scissors, certain situations wins, some lose, some tie. Problem im having is, it works on ties, then everything else is a win. So i need some help finding out what is my problem where the losses aren't being registered.

JSfiddle - http://jsfiddle.net/c11rxxb8/

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

Thanks in advance!

You should use your browser's console to check for errors. Something like this will show every time — Zach Saucier, Nov 04 '14 at 05:31
The syntax is valid, it just doesn't do what you intend. See http://stackoverflow.com/questions/5347995/why-does-javascript-accept-commas-in-if-statements — bengoesboom, Nov 04 '14 at 05:31

Arun P Johny · Accepted Answer · 2014-11-04T05:44:22.920

You don't have a syntax like if (comproll === 3, 5) { to compare 2 values you need to use

if (comproll === 3|| comproll == 5) {

or you can use an indexOf() like

if([3, 5].indexOf(comproll)>-1)

But have a look at this implementation

$(function() {
  var compMap = {
      1: "Lizard",
      2: "paper",
      3: "scissors",
      4: "Spock",
      5: "Rock"
    },
    winMap = {
      1: [2, 4],
      2: [4, 5],
      3: [1, 2],
      4: [3, 5],
      5: [1, 3]
    };

  $(document).on('click', '.game-image', function(event) {
    var value = $(this).data('value');
    var win;
    var comproll = 1 + Math.floor(Math.random() * 5);
    //$('#comproll').html('Result: '+comproll)
    var comp = compMap[comproll];

    if (value === comproll) {
      win = "This ends in a tie"
    } else {
      var wins = winMap[value];
      if (wins && wins.indexOf(comproll) == -1) {
        win = "You win, comp choose " + comp + ".";
      } else {
        win = "You lose, comp choose " + comp + ".";
      }
    }

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

}); // closes function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  <h1>Lizard, paper, scissors, spock, rock</h1>

  <div id="images">
    <img class="game-image" src="//placehold.it/150x150&text=lizard" width="150" height="150" alt="" data-value="1" />
    <img class="game-image" src="//placehold.it/150x150&text=paper" width="150" height="150" alt="" data-value="2" />
    <img class="game-image" src="//placehold.it/150x150&text=scissors" width="150" height="150" alt="" data-value="3" />
    <img class="game-image" src="//placehold.it/150x150&text=spock" width="150" height="150" alt="" data-value="4" />
    <img class="game-image" src="//placehold.it/150x150&text=rock" width="150" height="150" alt="" data-value="5" />
  </div>
  <div id="win"></div>
</div>

As usual, Arun you nailed it. Thank you, you've helped me multiple times here. You are a Javascript and jQuery master! — Kyle Schmelzer, Nov 04 '14 at 05:44

My rock,paper scissors jQuery is not producing losses

1 Answers1