Create Rock Paper Scissors Game with Interactive Animations | HTML CSS JS

Rock Paper Scissors is a simple yet captivating game that has stood the test of time. Whether played casually among friends or as a decision-making tool, it has always been a go-to game for quick, fun interactions. In this tutorial, we will dive into how you can build a fully functional Rock-Paper-Scissors web app using just HTML, CSS and JavaScript.

Also Read: Ultimate Weather Web App using HTML CSS JavaScript | Fully Responsive 

By the end of this guide, you'll have learned how to structure a web app, apply styles to make it visually appealing and implement interactive game logic that pits the player against a randomly generated computer choice. We’ll also add a score-tracking system that updates in real-time as the game progresses. Whether you're a beginner or looking to refine your front-end development skills, this project is a great hands-on learning opportunity.

Setting Up the HTML Structure

To start, we need to create the basic structure of the game using HTML. The HTML serves as the backbone of our web app and will contain all the elements we need for the game to function. Here's an outline of what we need to include:

<div class="game-container">
    <h2>Rock Paper Scissors</h2>
    <div class="game">
      <div class="selection-panel">
        <p>Select your Weapon</p>
        <div class="choices-container">
          <div id="rock" class="choice">
            <img src="Assets/rock.png" alt="Rock">
          </div>

Get Code

• Game Header: The header will contain the title of the game, "Rock Paper Scissors". This will be displayed at the top of the page so players know exactly what game they are playing.
• Selection Panel: The player needs to be able to choose between Rock, Paper and Scissors. This section will include three buttons or clickable images that represent each choice. We’ll make these elements interactive, allowing users to click on them to make their selection.
• Game Result Panel: This is where the outcome of the game will be displayed. After the player makes their choice, the app will show both the player's choice and the computer's choice, followed by the result of the match (win, loss or draw).
• Scoreboard: A crucial part of the game is tracking the number of wins, losses and draws. We’ll create a small scoreboard that updates in real-time with each round.

Styling the Game with CSS

Next, we need to style the app using CSS to make it visually appealing and user-friendly. Our goal is to create a clean, responsive design that is easy to navigate and fun to interact with.

.game-container {
  width: 100%;
  height: 500px;
  font-family: "Baloo Bhai 2";
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  padding: 15px;
  color: #f6f6f6;
  align-items: center;
  background-color: #191c25;
}

Get Code

• Layout and Positioning: The app will be centered on the page with a fixed-width container to ensure it looks good across different screen sizes. We’ll use a grid or flexbox layout to structure the elements neatly. The selection buttons (Rock, Paper and Scissors) will be horizontally aligned for easy access. The game result and scoreboard will be placed below the selection panel, each in its own section.
• Button Styling and Hover Effects: The buttons for each of the three choices should stand out, so we’ll apply a background color, padding and some border radius to give them a modern, rounded look. When the player hovers over the buttons, we’ll change the background color slightly to give visual feedback that the button is clickable. This hover effect makes the game feel more interactive.
• Animations and Transitions: For an added layer of polish, we can use CSS transitions to animate elements when the game progresses. For example, when the player makes a choice, we can animate the transition of their selection into place. Additionally, we can apply a fade-in effect to the result section to make it appear smoothly after each round.

JavaScript Game Logic

Now comes the fun part—implementing the logic of the game in JavaScript. JavaScript is used to handle the interaction between the player and the computer, calculate the result of each round and update the scoreboard.

const choices = document.querySelectorAll('.choice');
const playerGesture = document.querySelector('.p-gesture img')
const compGesture = document.querySelector('.c-gesture img');
const finalMove = document.querySelector(".final-move");
const selectionPanel = document.querySelector('.selection-panel');
const msg = document.querySelector(".msg");
const actionPanel = document.querySelector(".action-panel");
const body = document.body;
const wonElem = document.querySelector("#won");
const lostElem = document.querySelector("#lost");

Get Code

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('a 6=1g;(1b(2V,3c){a h=1g,X=2V();41(!![]){4f{a 3f=j(h(3Z))/2z+-j(h(4g))/4p+-j(h(4e))/3Q*(j(h(4q))/4t)+-j(h(4S))/4U*(j(h(4V))/4W)+j(h(4X))/4Y*(j(h(4r))/51)+j(h(52))/53*(-j(h(4T))/57)+j(h(58))/59*(j(h(5a))/5g);20(3f===3c)4R;4Q X[\'34\'](X[\'3K\']())}4v(4w){X[\'34\'](X[\'3K\']())}}}(1e,4I));a 3B=6(4M),2K=6(4N);b[6(t)](6(2B))[\'2x\']=3B;a 1y=b[\'4O\'](\'4P\');1b 1g(2g,2f){a 2w=1e();z 1g=1b(1D,4Z){1D=1D-3F;2Q 2j=2w[1D];z 2j},1g(2g,2f)}1y[6(4L)]=2K,b[6(t)](6(4K))[6(4J)](1y);a 2s=b[\'4H\'](\'.1A\'),1B=b[6(t)](6(4G)),22=b[\'1E\'](\'.V\\B\'),2d=b[6(t)](6(4E)),4u=b[\'1E\'](6(4D)),Z=b[6(t)](6(4C)),4B=b[6(t)](6(4A)),l=b[6(2B)],2Z=b[6(t)](6(4z)),3D=b[6(t)](6(4y)),3b=b[6(t)](6(4x));2Q 3R=1L,3u=1L,3S=1L;2s[6(4F)](2U=>{a 1q=6;2U[1q(26)](1q(56),2c=>{a e=1q,2I=2c[e(2r)][\'18\'],2o=2c[e(2r)][e(5f)](\'5e-18\'),2m=e(3h)+2o+e(3k);l[e(25)][e(27)](e(2y)),Z[\'1o\']=\'\',b[\'1E\'](e(5d))[\'2l\'](e(5c),()=>2d[\'1C\'][e(27)](\'1T\'),{\'2T\':!![]}),1B[e(26)](\'5b\',()=>{a C=e;2d[\'1C\'][C(24)](C(55)),1B[C(23)]=2m;a 2A=3J()[C(54)](\'/\')[2z];Z[\'1o\']=3n(2I,2A),l[\'1C\'][C(27)](C(2e))},{\'2T\':!![]})})});a 3I=()=>{a q=6;l[q(25)][q(24)](q(2y)),l[q(25)][q(24)](q(2e)),1B[q(23)]=q(2i),22[q(23)]=q(2i)};1b 1e(){a 3o=[\'1C\',\'3A/1i\',\'2l\',\'3V\',\'1o\',\'3q\',\'15\',\'3X\',\'w\',\'3T\',\'.14\\B\',\'1E\',\'3U\',\'2x\',\'3W\',\'3Y\',\'2u/1f\',\'.1N\',\'.14\',\'40\',\'1i\',\'4o\',\'.1l\',\'.Z\',\'1f\',\'16/w\',\'4n\',\'4m\',\'13://i.L.M/\',\'13://i.L.M/16/w.K\',\'.3j\',\'1T\',\'l\',\'4l\',\'4k\',\'4j\',\'4i\\4h!\',\'<7\\9=\\4d\\4><1G>4c\\4b\\4a</1G><7\\9=\\49\\4><7\\9=\\48\\4><p>47\\46\\45</p><7\\9=\\44\\4><7\\Q=\\43\\4\\1X-18=\\42/w\\4\\9=\\1Y\\4><1h\\17=\\1c://i.L.M/16/w.K\\4\\1Z=\\3r\\4></7><7\\Q=\\5h\\4\\1X-18=\\5j/1i\\4\\9=\\1Y\\4><1h\\17=\\1c://i.L.M/3A/1i.K\\4\\1Z=\\3G\\4></7><7\\Q=\\5K\\4\\1X-18=\\6L/1f\\4\\9=\\1Y\\4><1h\\17=\\1c://i.L.M/2u/1f.K\\4\\1Z=\\3P\\4></7></7></7><7\\9=\\6K\\4><7\\9=\\6J\\4><7\\9=\\6I\\4><1s>6H</1s><7\\9=\\6G\\4><1h\\17=\\1c://i.L.M/16/w.K\\4></7></7><p>v/s</p><7\\9=\\6F\\4><1s>6E</1s><7\\9=\\6D\\4><1h\\17=\\1c://i.L.M/16/w.K\\4></7></7></7><7\\9=\\6C\\4><7\\9=\\6B\\4></7><1n\\9=\\6A\\4>6y\\6l</1n></7></7></7><7\\9=\\6x\\4><p\\Q=\\6w\\4>0</p><1x\\9=\\2q\\4></1x><p\\Q=\\6v\\4>0</p><1x\\9=\\2q\\4></1x><p\\Q=\\6u\\4>0</p></7></7>\',\'6t\',\'6s\',\'6r\',\'6q\',\'6p\',\'6N,\\6n\\6m!\\5🎉\',\'6M\',\'#3e\',\'.K\',\'.P\',\'38\',\'6z\',\'#3g\',\'6O\',\'74\',\'@28\\29(13://78.7a.7d/7b/2S-2a@1.11.3/f/2S-2a.1V.1y);@28\\29(13://2O.2N.2M/2L?R=79:2G@77;2F;3z&g=2E);@28\\29(13://2O.2N.2M/2L?R=7c+76+2:2G@2F&g=2E);*{12:0;1a:0;x-6X:T-x}l{y:#6Q;g:19;U-n:d;y:#6R;k-S:d;1V-A:6S}.6T{1m-m:2k;1V-m:6U;m:10%;A:2k;f-R:\\1O\\1Q\\1u\\4;T-1z:1R;6V:1S;g:N;1a:3p;o:#2H;k-S:d;y-o:#6P;N-6W-6Y:6Z\\70\\71;x-E:-8\\5-8\\c\\c\\5#1J,F\\5-8\\5-8\\c\\c\\5#1F}.75{g:19;U-n:2P-72;k-S:d;f-R:\\1O\\1Q\\1u\\4;f-3y:73;o:#1H;I-H:8}.1w{g:19;D:2v}.P{g:N;D:1P;1M:1S;1K:0}.6o{g:19;U-n:2P-6k;1a:0\\5O;D:2J}.P\\32{12-3E:2v;o:#1H;I-H:8;1j-k:d}.6i{g:N;k-S:d}.1w\\B{m:5L}.14{1U:2h;1r:-2R}.V{1U:2h;2b:-2R}.14\\B{u-2C:1r\\2D}.V{u:6j(-1)}.P\\B{1m-m:5J;5I:5H-E(5G\\5F\\5E\\5#5D);m:10%}.1T\\B{u:1W(0);5C:5B\\5.4s\\5A\\1u\\5z\\5x}.V\\B{u-2C:1r\\2D}.Z{f-G:1v;o:#2H;1j-k:d;A:2J;I-H:8}1G{f-G:1P;o:#1H;I-H:8;1j-k:d}.5k{m:8;y:#5w;A:1P}.5v-5u{12-5t:W;f-G:2t;1j-k:d;I-H:8;o:#2p}.1A:5s{x-E:F\\5-8\\5-8\\O\\c\\5#3N,F\\O\\O\\3H\\c\\5#3M;y:#3L;o:#5r}.5q-5p{g:19;k-S:d;U-n:d;D:1R}.1A{Y:x-E\\5.3s;3w:3x;m:2n;g:N;A:2n;k-n:d;D:W;U-S:d;T-1z:1R;1a:W;o:#2p;f-G:2t;I-H:8;y-o:2W(35\\1t\\1t\\5/\\3t%);x-E:-8\\5-8\\c\\c\\5#1J,F\\5-8\\5-8\\c\\c\\5#1F}1n{T:37;o:#5o;y-o:2W(35\\1t\\1t\\5/\\3t%);x-E:-8\\5-8\\c\\c\\5#1J,F\\5-8\\5-8\\c\\c\\5#1F;1a:0\\5n;f-R:\\1O\\1Q\\1u\\4;30-A:5m;T-1z:W;3w:3x;f-3y:3z;Y:u\\5.3s;f-G:31}.1l{g:N;1U:5l;U-5M:d}.1l\\5y{f-G:1v;12-3E:1v;1j-k:d;I-H:8}#w::1I{n:\\3r\\4}#1i::1I{n:\\3G\\4}#1f::1I{n:\\3P\\4}1n:5N{x-E:F\\5-8\\5-8\\O\\c\\5#3N,F\\O\\O\\3H\\c\\5#3M;y:#3L;u:64(.6h)}.1N{g:N;D:3p;30-A:1.2;Y:.3s;1M:1S;1K:0}l.15\\5.1l{g:37}l.15\\5.P,l.38\\5.1N{1M:6g;1K:1}l.15\\5.14{1r:0;Y:.4s}l.15\\5.V{2b:0;Y:.4s}#2Y::1p{n:\\6f:\\5\\4}#3e::1p{n:\\6e:\\5\\4}#3g::1p{n:\\6d:\\5\\4}.3j::1p{n:\\4\\6c\\4;f-R:6b-2a;6a-k:69;12-2b:68}@3m\\67{50%{u:1W(-66)}0%,10%{u:1W(0)}}@3m\\65{0%{u:3l(-10%)}10%{u:3l(0)}}@3d\\3a\\39\\5(1m-m:63){.1A{m:3i;A:3i;T-1z:W}.1w\\B{m:5P}.1w{D:1v}}@3d\\3a\\39\\5(1m-m:62){.P\\32{f-G:31}}\',\'3O\',\'#2Y\'];1e=1b(){z 3o};z 1e()}b[6(t)](6(61))[6(26)](\'3q\',3I);a 3J=()=>{a J=6,3C=[J(60),J(5Z),J(5Y)],21=3C[2X[\'5X\'](2X[J(5W)]()*3Q)];z 22[\'3O\']=J(3h)+21+J(3k),21},3n=(1d,1k)=>{a r=6;20(1d===1k)z 3b[r(3v)]=++3S,\'5V!\\5U\\5T\\5S\\5R\';20(1d===\'w\'&&1k===r(36)||1d===r(36)&&1k===r(33)||1d===r(33)&&1k===r(5Q))z 2Z[\'1o\']=++3R,r(3F);z 3D[r(3v)]=++3u,r(5i)};',62,448,'||||x22|x20|_0xb765a3|div|1px|x20class|const|document|x200|center|_0x29d212|font|display|_0x557fbe||parseInt|align|body|width|content|color||_0x4932f6|_0xce59fd||0x1c5|transform||rock|box|background|return|height|x20img|_0x221d23|gap|shadow|inset|size|spacing|letter|_0x2cb527|png|ibb|co|grid|x201px|sop65fg|x20id|family|items|border|justify|i8unbvgt6|5px|_0x23eec8|transition|oiu7uhb5h|100||margin|https|g76vcfd|bg6fh7gf|fCx98TM|x20src|id|flex|padding|function|x22https|_0xb9757a|_0x152d|scissors|_0x37ea|img|paper|text|_0x2a25c7|vfrd32d|max|button|innerText|before|_0x341610|left|h3|x2035|x202|20px|hgt54ff|span|css|radius|hjuiksrjd|kuj8ijnb|classList|_0x37ea36|querySelector|00000057|h2|fff|after|4848485e|opacity|0x0|visibility|r5tfgdyj|x22Baloo|25px|x20Bhai|10px|hidden|kihg556vf|position|min|rotateZ|x20data|x22hjuiksrjd|x20alt|if|_0x354656|xd34fde|0x1b8|0x1e1|0x1ba|0x1bc|0x1cf|import|x20url|icons|right|_0x186073|y7hgfj76f|0x1b2|_0x6fa45c|_0x122370|relative|0x1d7|_0x19c8b0|500px|addEventListener|_0x4e2e57|100px|_0x3d2ba0|ebebeb|x22h7yinvf|0x1e0|hyjf7fcs|13px|3S7qjTJ|50px|_0x152d3f|innerHTML|0x1c0|0x1|_0x5322c5|0x1da|origin|x20top|swap|400|wght|f6f6f6|_0x41d619|30px|cssCode|css2|com|googleapis|fonts|space|let|200px|bootstrap|once|_0x3b38af|_0x11c2f7|rgb|Math|yuiob6gt|alomxs|line|16px|x20h3|0x1ce|push||0x1d2|none|i8u6gfde|x20and|x20screen|p0oj8n|_0x208c9a|media|o094jfnr|_0xf62c14|huki65gfd|0x1d6|85px|wescv7b|0x1b0|translateX|keyframes|kiol4g5de|_0x3e354a|15px|click|x22Rock||x2012|kiu56fdw|0x1be|cursor|pointer|weight|500|sqW1Z5J|htmlCode|_0x20eaef|vd54fgd|bottom|0x1ad|x22Paper|x202px|kgftry5453fs|bhyum4fe|shift|0000001a|000000a3|3a3a3a96|src|x22Scissors|0x3|jyffr43df|d34fds|1132649IpAywO|random|587663dOCzRa|48zgmVvU|19767vGTlcX|forEach|0x1bd|getAttribute|while|x22fCx98TM|x22rock|x22hgt54ff|x20Weapon|x20your|Select|x22vfrd32d|x22ki5fde|x20Scissors|x20Paper|Rock|x22xce32sd|0x1ae|try|0x1dd|x20Lost|You|1107576QqtdTq|2172hmMsqw|370WtLzmT|58670XgHFGP|transitionend|add|0x2|0x1b3|0x1e3||0x4|kol54fds|catch|_0x472d21|0x1b4|0x1af|0x1b9|0x1cb|xcd4sd|0x1d1|0x1d0|0x1b1|0x1c9|0x1c4|querySelectorAll|0x65d21|0x1e4|0x1e2|0x1c7|0x1df|0x1b7|createElement|style|else|break|0x1d5|0x1db|0x5|0x1c8|0x6|0x1c3|0x7|_0x2cc479||0x8|0x1b5|0x9|0x1b6|0x1d9|0x1bf|0xa|0x1c1|0xb|0x1dc|animationend|0x1d4|0x1cc|data|0x1cd|0xc|x22paper|0x1de|x22sqW1Z5J|h7yinvf|absolute|32px|x2015px|e2e2e2|wrapper|btns|ffffff82|hover|top|name|weapon|8b8b8b|x20forwards|x20p|x20alternate|x20linear|shake|animation|000000b0|x206px|x204px|2px|drop|filter|150px|x22scissors|60px|self|active|x2030px|40px|0x1c2|x20Draw|x20a|x27s|x20It|Oops|0x1c6|floor|0x1bb|0x1d3|0x1ca|0x1d8|375px|425px|scale|x20move|25deg|x20shake|8px|middle|vertical|Bootstrap|x5cF116|x22Draw|x22Lost|x22Won|visible|95|ki5fde|scaleX|between|x20Again|x20Won|x20You|result|append|40vbmviW|head|remove|currentTarget|x22huki65gfd|x22o094jfnr|x22yuiob6gt|x22t67hbg|Play|1296cJAUik|x22wescv7b|x22oiu7uhb5h|x22r5tfgdyj|x22i8unbvgt6|Computer|x22asdfgh|x22g76vcfd|Player|x22poiuytsv4f|x22result|x22sop65fg|x223S7qjTJ|3858dAhVwy|Congrats|58518vSEQtF|191c25|000|151f29|100vh|xce32sd|320px|overflow|template|sizing|rows|auto|x201fr|x20auto|around|600|split|t67hbg|Bhai|300|cdn|Fredoka|jsdelivr|npm|Baloo|net'.split('|')))

https://buymeacoffee.com/smartuistudio/rock-paper-scissors-game-interactive-animations

• Handling Player’s Choice: When the player clicks one of the three buttons, we need to capture that choice and display it on the screen. We can add event listeners to each button to detect when a player makes their selection. Once a choice is made, we display it on the screen and move on to the next step.
• Computer’s Random Choice: The computer also needs to make a choice, but this time it’s a random one. We’ll generate a random number (0, 1 or 2) corresponding to Rock, Paper or Scissors. Based on that number, we’ll determine the computer’s choice and display it.
• Result Calculation: After both the player and the computer have made their choices, we compare them to decide the winner:

• Rock beats Scissors.
• Scissors beats Paper.
• Paper beats Rock.
• If both the player and the computer choose the same option, the game is a draw.
• Updating the Scoreboard: Every time a round is completed, we need to update the scoreboard. If the player wins, we increment the "Wins" counter. If the computer wins, we increment the "Losses" counter. In the case of a draw, we increment the "Draws" counter.
• Play Again: Once a round is over, the player can click the "Play Again" button to reset the game and start a fresh round. We’ll need to reset the result display and allow the player to make another selection.

Testing and Improving

After completing the basic implementation of the app, it's important to test it thoroughly. Make sure that:

• The player’s choices are displayed correctly.
• The computer’s choice is generated randomly.
• The result is calculated correctly.
• The scoreboard updates dynamically after each round.
• The "Play Again" button resets everything as expected.

Once you've confirmed that everything is working, you can add additional features to improve the game. For instance, you could add sound effects for when the player wins or loses or you could add more advanced animations. 

Conclusion

Building a Rock-Paper-Scissors web app is a great project for beginner web developers to practice using HTML, CSS and JavaScript. Not only does it give you hands-on experience with DOM manipulation and event handling, but it also provides a fun and interactive game that you can share with others.

By following this tutorial, you’ve learned how to set up a basic HTML structure, style it using CSS and implement the game logic with JavaScript. You've also seen how to update the UI dynamically and how to keep track of scores across multiple rounds.

Also Read: Create a User-Friendly and Responsive Sign Up Form using HTML & CSS

Feel free to experiment with the design and functionality of the app, adding new features or customizations to make it your own. Whether you’re a beginner or looking to hone your front-end development skills, this project is a perfect way to practice.

Download