Rock, Paper and Scissor game using HTML, CSS, JS and Jquery

In this tutorial I will show you how to develop the popular game Rock, Paper and Scissor using HTML, CSS, Javascript and Jquery. However, you might need at least basic ideas on all of these. Its simple, so lets move ahead.

Click here for DEMO.

First, lets start with HTML structure.
HTML
<div class="game">
 <h2>Rock, Paper and Scissor</h2>
 <div class="wrap">
  <p><strong>User Choosed:</strong> <span class="user-choose"></span></p>
  <p><strong>Computer Choosed:</strong> <span class="comp-choose"></span></p>
  <p><strong>Result:</strong> <span class="game-result"></span></p>
  <a href="#" class="btn btn-start">Start</a>
 </div>
</div>

Then, we will go ahead styling them using some CSS Skills
CSS
body{
 font: 400 18px/24px 'Quicksand', sans-serif;
}

h2{
 font-weight: 400;
}

.game p{
 margin: 0 0 5px;
}

.game strong{
 font-weight: 700;
 display: inline-block;
 vertical-align: top;
 width: 200px;
}

.game span{
 text-transform: uppercase;
}

.game .game-result{
 border-bottom: 1px solid;
}

.game .btn-start{
 display: inline-block;
 vertical-align: top;
 background: green;
 color: white;
 padding: 5px 15px;
 margin: 5px 0 0;
 text-decoration: none;
}

Now, we'll add some scripts. I have added comments in the code to make it easy to understand.
JS
$(function(){
 $('.btn-start').click(function(){
  // user choice
  var userChoice = prompt('Choose / Write any one: Rock, Paper or Scissor.');
  userChoice = userChoice.toLowerCase(); // converting lowercase
  if(userChoice === 'rock' || userChoice === 'paper' || userChoice === 'scissor') {
   $('.user-choose').text(userChoice);
  } else {
   var userChoice = prompt('Please follow the rules. Choose / Write any one: Rock, Paper or Scissor.');
   userChoice = userChoice.toLowerCase(); // converting lowercase
   if(userChoice === 'rock' || userChoice === 'paper' || userChoice === 'scissor') {
    $('.user-choose').text(userChoice);
   } else {
    alert('You violate the rule. Game is closing now.');
    location.reload();
   }
  }

  // computer choice
  var compChoice = Math.random();
  if(compChoice < 0.34) {
   compChoice = "rock";
  } else if (compChoice < 0.68) {
   compChoice = "paper";
  } else {
   compChoice = "scissor";
  }
  compChoice = compChoice.toLowerCase(); // converting to lowercase
  $('.comp-choose').text(compChoice);

  // game function starts
  function compare(choice1, choice2) {
   // condition if user selects rock
   if(choice1 === "rock") {
    if(choice2 === "scissor") {
     var result = "rock";
    } else {
     var result = "paper";
    }
   } 

   // condition if user selects paper
   if(choice1 === "paper") {
    if(choice2 === "rock") {
     var result = "paper";
    } else {
     var result = "scissor";
    }
   }

   // condition if user selects scissor
   if(choice1 === "scissor") {
    if(choice2 === "paper") {
     var result = "scissor";
    } else {
     var result = "rock";
    }
   }

   // determine whether user or computer is winner
   if(choice1 === result) {
    $('.game-result').text("User is Winner");
   } else {
    $('.game-result').text("Computer is Winner");
   }

   // condition for tie result
   if(choice1 === choice2) {
    var result = "This game is a tie. Let's challenge again."
    $('.game-result').text(result);
   }
  }
  compare(userChoice, compChoice);
  return false;
 });
});

Share this

Related Posts