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