Rock, Paper and Scissor Game Version 2 using Jquery

In this tutorial, I'll show you how to make Rock, Paper and Scissor game using Jquery.

Click Here for DEMO

First thing, we need HTML to add options to click Rock, paper and scissor. Here is the code:

HTML

<h2>Rock, Paper and Scissor V2</h2>
<div class="game">
   <ul class="rps-v2">
      <li><a href="#">rock</a></li>
      <li class="paper"><a href="#">paper</a></li>
      <li class="scissor"><a href="#">scissor</a></li>
   </ul>
   <div class="game-holder">
      <div class="holder">
         <strong>User Choosed</strong>
         <span class="user-choose"></span>
      </div>
      <div class="holder">
         <strong>Computer Choosed</strong>
         <span class="comp-choose"></span>
      </div>
      <div class="game-result">Result will be shown here</div>
   </div>
</div>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS

.game-holder{
   overflow: hidden;
   margin: 0 -40px;

   .holder{
      float: left;
      width: 50%;
      padding: 0 40px;
      text-align: center;

      strong{
         display: block;
         width: auto;
      }
   }

   .game-result{
      border: none;
      text-align: center;
      padding: 0 40px;
      background: black;
      color: white;
      padding: 10px;
      margin: 80px 0 0;
      overflow: hidden;
   }
}

.rps-v2{
   margin: 0 0 30px;

   li{
      display: inline-block;
      vertical-align: top;
      width: 32%;
      text-align: center;

      a{
         display: block;
         text-indent: -9999px;
         background: url(../images/stone.png);
         width: 70px;
         height: 94px;
         margin: 0 auto;
      }

      &.paper{
         a{
            background: url(../images/paper.png);
            width: 70px;
            height: 100px;
         }
      }

      &.scissor{
         a{
            background: url(../images/scissor.png);
            width: 100px;
            height: 91px;
         }
      }
   }
}

Finally, we need Jquery Code to make rock, paper and scissor game. So, here's the Jquery below.
Jquery

$(function(){
 $('.game a').click(function(){
  // user choice
  var userChoice = $(this).html();
  $('.user-choose').text(userChoice);

  // computer choice
  var compChoice = Math.random();
  if(compChoice < 0.34) {
   compChoice = 'rock';
  } else if(compChoice < 0.67) {
   compChoice = 'paper';
  } else {
   compChoice = 'scissor';
  }
  $('.comp-choose').text(compChoice);

  // compare
  function compare(choice1, choice2) {
   if(choice1 === 'rock') {
    if(choice2 === 'scissor') {
     var result = 'rock';
    } else {
     var result = 'paper';
    }
   }

   if(choice1 === 'paper') {
    if(choice2 === 'rock') {
     var result = 'paper';
    } else {
     var result = 'scissor';
    }
   }

   if(choice1 === 'scissor') {
    if(choice2 === 'paper') {
     var result = 'scissor';
    } else {
     var result = 'rock';
    }
   }

   if(choice1 === result) {
    $('.game-result').text('User is winner');
   } else {
    $('.game-result').text('Computer is winner');
   }

   if(choice1 === choice2) {
    $('.game-result').text('This game is a tie. Lets challenge again.');
   }
  }
  compare(userChoice, compChoice);
  return false;
 });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below. Cheers!!