How to Create Rock Paper Scissors Game Using HTML CSS and JavaScript

Hi there... Today we are going to create a  classic game of rock paper scissor using HTML   CSS and JavaScript whether you are new to coding  or looking for a fun project this tutorial as   something for everyone I upload unique project  videos every week make sure to subscribe our   channel Sharathchandar K and hit that notification  Bell to stay updated with the latest content First let's take a look at what we be creating  today our game will allow players to choose   rock paper or scissor once we click the tool  will automatically make the selection and it   starts the animation with two human shaking  their hands it feels like we are playing a   real game and then computer will pick a random  choice will display the results and determine   the winner with color change of the winner and  top will display number of wins by user and CPU   if we select any other option tool will reset  the results we'll get the animation effect and   will display the results as well here we can  select or play a n number of times with CPU if you really enjoy this video please give it   a thumbs up and leave a comment below if you  have any questions or suggestions make sure   to subscribe your support means a lot that  helps me to create more content for you now let's jump into the code let's open this project  folder in my favorite code editor Visual Studio   code let me know your favorite and why in our  comment box below inside the directory I have   already created the index.html style.css and  script.js in the index.html I have added the   HTML boiler plate with the help of exclamation  mark along with that I have changed the title   to rock paper scissor by Sharathchandar K and  below I have linked other two files and then   below I have linked other files to use the font  awesome icons with the help of font awesome CDN Inside the body I'm going to add the div   with class of container in Visual Studio code we  have a embed abbreviation to use dot container if   I hit enter it will automatically create the  div tag with class attribute with the value   of container inside this container I'm going  to add one more div with game score inside   the game score I'm going to create to H3  for that I will use H3 and then * with 2 if I H enter it will create a 2 H3 element here  first one as user and inside that I will add   one span tag with Id of user score default I  will set to zero the same thing I will add for   CPU I will add the span tag inside this with a  value of zero and we'll set the ID of CPU score   below to this game score We'll add one more div  with class of playground insert this I will add   one more div with result field inside this result  field we need to add two more div one is for user   select and another one is for CPU select for the  user select I will create a div with user select   inside this I will add the id tag this will help  us to set the icons with fa solid fa back first   then same thing I will copy this div and I will  place below to this instead of user I will change   to bot select then icon will be the same below  to the result feed we need to add one more H1   with the idea of results this will contains  what is the determined results for the user   or computer we'll say let's play as default  based on the selection it will automatically   change and will display who is the winner  and what is the result of that game and below   to this I will add one more div with play option  inside this play option we are going to create   three more cards with card * of three inside  the first card I will add the same icon what   above I'm using and I will paste it here below  to this I will use H4 element to mention this   is Rock for the same thing I will add to the  second card and then I will change the icon cck   class and below I will add one more H4  will say this is a paper third card as one   more icon with fa and scissors and again  one more H4 element and we say scissors let us see our HTML file in action for  that in Visual Studio code we have a   extension called go live the status bar  once we click the tool will automatically   load our project into the default browser  here we can see the icon of user and CPU   for the score and this is what the icon  we have used for fa and fa and these are   the three cards now we need to style this  for that I need to jump to the style.css I have already added the import URL of font family  Poppins and I have used the global selector of   store will reset the margin to 0 padding to 0  box sizing border box and font family Poppins   along with that I need to add the styles to  the body with the help of element selector   name called body we'll set the background color  of blue color Min height to 100vh display flex   align items to be center this will help us to  set this entire content into the center of the   screen and we'll set the justify content  to be Center flex Direction to be column if I save if I go to the browser here we  can see the content is set to center of   the screen and we can see the background  color also here I have not refreshed the   page it will automatically refresh the page  based on the changes whatever we are doing   in the visual studio code that is how the  live server will work now we need to add   the styles to The container so for that here  we are using as a class we need to set the   class with the class selector of dot with that  value of container for this container we'll set   the background color as white border radius to  10px padding 25px box shadow 14px 14px 0 and 0   of that position and then color of black margin  top two 10px will set the text align to be Center if I save if I go to the browser here we can see  the container Style with box Shadow now we'll   add the styles to this game score with the help  of dot with class selector we'll set display to   flex align items to be center justify content to  be space around this will help to set the space   around to this next thing we'll add the styles to  this playground for this playground also we'll set   the display to flex we set the grid gap of 30px  flex direction to be column because we need to   set this two cards into the both side next  thing I will add the styles to this result   field for this result field we'll set the  display Flex again align items to be Center   just if I content to be Center will set the  gap of 60px if I save if I go to the browser   here we can see the difference it was set to the  flex direction of grid previously it was in the   list view now we can able to see the column  wise here now we'll add the styles to this I   icon for that inside this result Fields we'll  have that I element for this I element we set   the cursor to pointer font size 2rem will set  the color of same blue color of the back ground if I save we'll get the styles here we need to  rotate the and like both users shaking their   hands to face to face so for that first we'll  set that user select with the help of result   field and then user select of this I icon we  need to set we'll set that transform rotate   to 90° if I save if I go to the browser  now it is rotated to opposite player side   so the same thing I need to rotate the CPU  also with dot result fills dot bot select of   I will set the transform rotate to minus 90°  if I save if I go to the browser here we can   see the icon is rotated to opposite player but  the thumb finger is below we need to rotate this   on top then only they are facing both ends  for that we can set the rot rate y of 180° if I save now we can see the rotation of both and  is facing to the same now we'll add the styles to   this playground with the help of class selector  dot playground will set the display to flex this   will help to set this in a single line so if I  save we can see this we'll set the gap of 25px of   each code if I save now we can see this next  thing we'll add the styles to this code for   this we'll use the same glass selector we'll set  the Border radius to same 10px on that container   it will be uniform text line to be Center  cursor to pointer we'll set the Box shadow   of 10px 10px 5px of Shadow with light blue color  will set the padding of inner spacing to be 10px if I save if I go to the browser here we can  see the card with box shadow now we'll set the   styles to this H4 element called with H4 we'll  set the letter spacing 2px we'll set the color   of white if I save we can't able to see this once  we hover then only we need to display that before   that we'll add the styles to this icons we'll  use this fa solid because we have this is a   common class else we need to use all this separate  separate class so I will use this common class of   f solid this will applicable to all the fonts  we'll set the font size to 3rem padding inner   spacing of 1rem top and bottom and right and left  to 1.5rem we'll set the color of light blue color if I save if I go to the browser here we can  see the icon colors with font size once we over   we need to change the color of this called as  well as the icon color for that we'll add that   dot card of hover we'll set that effect and  we'll set the background color to Black the   same thing dot card of hover we'll set that  icon of fa solid color of that blue color if I save if I go to the browser if I hover  on the card we'll get that background color   as well as the icon color the same thing once  we click the same color should be set to this   for that I will use the same of dot card and  dot active whenever we set these things to   active we'll set the background color to that  card the same thing to this also dot card dot   active of fa solid whenever we have using this  JavaScript and we set to this active we'll change   the background color as as the icon we show you  how this will work I will insert element I will   go to this element selector of this card and  for this card I will add the active from here if I hit enter here we can see the active color  is set to permanent here so I can remove from   here if I hit enter it will not set again so this  functionality we need to do from JavaScript and   once we click we need to shake this hands and we  need to get the results for that we need to jump   to the the script.js the script.js we are going  to declare the Declaration with the help of const   we'll set the const value of playground equal to  document dot query selector with dot and I will   use the class of playground here because if this  is a class we need to use for DOT as same as CSS   and we'll set the console.log to check what this  contains if I save if I go to the browser here   in the insert element in the console we can see  the playground entire div with sub elements also   that is how the Dom Tree will work now with the  help of this declaration we need to click and   we need to set the active and we need to do the  shake effect and we'll get the results as well I   will declare all the Declarations here what I  am using in this current projects if you want   you can pause the video and you can declare  it by your own the first declaration contains   we'll get all the icons inside this playground  and then second declaration as playground as   we already seen and this is what the results  we are going to set and this is what the user   selection of I what we'll get from selection  and then cpu selection and this is for user   score and CPU score now we need to add one more  Global Declaration of let user score data comma   core data we set this value of 0 comma 0 this  will help us to add the scores and display it   here on the top the next thing we need to  add the selection for that we have already   added the Declaration of Select options  do for this will help us to get all the   selectors inside this we'll check what's present  inside this I will add this parameter of element   Comm index add the function inside this I will  add the console. log of this element and index if I save if I go to the browser here in the  insert we'll get this all selectors inside   this playground here this is the first off Rock  and this is what the paper and this is what the   scissor with index of 0 1 and two with the help  of this we need to add the event listener of   on click for this I will clear this we set  that element of dot add event listener off   click we'll set the function of e inside  this we need to set the active class to   the selection of the card so we'll check this  what this function e contains console. log of e if I save if I go to the browser if I click on  this rock we'll get that pointer event instead   of e we'll set that e. Target this will get that  Target element and if I click again we'll get that   icon if I click again we'll get that and icon if  I click this we'll get that scissor once we click   we need to set the active class to the card how  we can set that so here we have a option to get   the parent element of dot parent element if I save  again if I go to the browser if I click on this   rock we'll get this card of this parent element  same as paper and same as scissor if you go on   check we'll get that over on that element what  we are hovering below in the console here we have   get this card now we need to set the styles  to this with dot class list dot add of that   active class what we have already added here I  will use this here I will remove this console if I save if I go to the browser if I click this  first card now we can see the active is added if   I go to the browser for this card here we can  see this if I click on second card we can see   this the active is added and then color also  changed if I click this here we have added now   all the three cards is selected so as a user  we need to select only one options the other   options will CPU pick once we click other option  the other active class should be removed that   is very simple so we can do this of the select  option already we have the select option with for   each we'll get that element inside here we'll  directly remove the class from here El dot   parent element of same dot class list dot remove  of that active this will work once we click this   so I will cut this I will paste inside this  once we click this icon this should run this   forage and we'll remove all the active class  of that card and we set the active class to the   selected one so I will go to the browser if  I click now we can see the active class is   added from here if I click on paper will  remove it on the top and it is adding to   the second card the same as if I click it  will added based on the selection so now   we can't able to see the all card is selecting  here now once we click we need to start adding   the animation effect to this right for that we  need to add one more class to this playground   what we have already added the Declaration  here do class list do add of class start if I save if I go to the browser here this  is the playground if I click this now the   class start is added to the playground but  the animation is not happen we need to add   the styles to this for that I will jump to  the style.css here next to the playground   I will add the playground. start if this  start class is present for for this user   select we'll set the transform origin off  right and we'll set the animation of user   Shake of 0.8 second is infinite if I save if  I go and click nothing will happen because we   need to add this animation so I will copy the  same and I will paste it below instead of user   I will set to the bot select same as instead  of right when need to set to the left instead   of user we'll set for bot select now we need  to add the key frames for this animation at   Key frame with identifier of user Shake we'll  set the 50% of this transform to rotate 10° if I save if I go to the browser we can see  the animation is automatically added because   here the playground start is appended here  so the same thing I will copy from here and   I will set to bot select instead of user  shake I will change to bot shake If I save   if I go to the browser here we can see the  animation of shake so we know need this we   need a shake effect on both side instead of  10 I will set to minus 10° if I save if I go   to the browser now we can see the - 10° and  it was shaking like both hands same as once   we select the other option should not be select  for that here with dot playground dot start do   fa solid fa card will set this both class will  set the property of pointer events to be none if I save if I go to the browser if I refresh  now the an was not shaking once we click this   option now we can see the animation and we  can select a other options here so once we   get the results and again we need to reset so  we need to do that with the help of JavaScript   so I will jump to the script.js we add  one const with check result of function   with index of the parameter and we'll set  for Arrow function we'll get the random   selection of the CPU right for that I will  create one more Let with random number equal   to math. floor of math. random into 3 because here  we have only three cords we need to get option of   anyone from here so I will use this console.log  to check this random number and I will call this   function inside this on click whenever we  are clicking this and we need to call this   and I will pass the index to this function  I will let you know what this index will do if I save if I go to the browser here in the  console if I click on paper we'll get that two   if I refresh if I click on other thing we get that  zero if I click again we'll get one this will pick   a random number into three with the help of this  random number we can pick a CPU select and we'll   match the following for that we need to add the  set time mode because we need to use some time   for this animation and we'll show the results for  that we need to use this set time out we need to   delay for 2,500 milliseconds inside this we'll  remove this playground dot classless do remove   off start if I save if I go to the browser if  I click on paper it will run we can't click   again after 2.5 second the animation is stopped  because we have removed the class off start and   now we can make make the selection of rock  it is start the animation after 2.5 second   it stop that is how the thing will work once  we click this we need to pick the user select   and we need to change the icon here right for  that first we need to remove the icons from   here of user select do class list do remove of  this class of fa solid instead of fa solid we   can directly remove this class I will copy this  this I will do this for same of Bot select also if I save if I go to the browser if I click on  paper after 2.5 second we'll remove the class   now we need to set the user selection as well  as the computer selection for that user select   do class list we need to add the class list to  your right of dot how we can add this class for   that already we have this icon group based on  the selection I will use the same select option   of this index so only we have passed this index  what is this index contains this index based on   the selection will get the index of the card  so we'll get this index if I save if I go to   the browser if I click this paper after 2.5  second we'll get that end of this icon right   now we ignore this error because we have set  this add off empty so only we are getting the   error if I save if I go to the browser if I click  on scissor we'll get that scissor icon here this   is a scissor if I click on Rock after 2.5 second  we'll get that rock we need to set this icon for   here so for this only we need to pick the class  right of dot get attribute of class I will copy   this and I will place this class inside this  user class list if I save if I go to the browser if I click on rock it is loading the animation  and we'll get the error here the token provided   fa and Fa and back fist it is saying the  contains of space character which are not   valid in tokens here we have get this  fa solid and space and Fa icon so this   is saying this space is not applicable  anyway we need to set only this class   right for that simply we can split this with  space and we'll set the first option to this if I save if I go to the browser if I click on  Rock we'll get that fa and and back Rock again   it is getting an error sorry this is not an array  this is a function of split I will change this if   I save if I go to the browser if I click  on Rock now we'll get that back here the   rock is fixed if I click on paper it will set  the paper here if I click on scissor it will   set the scissor here the same as we need to set  the value of CPU also for the CPU we have already   get this random value so I will copy this and  I will paste it below instead of user we'll set   this as a bot select for the index we'll set the  random number the same thing we set as a class if I save if I go to the browser if I click  on paper now the animation will get now this   is paper and now this is scissor this time the  user is win we need to change the results also   so again I will click on scissors now we'll get  the results but the direction is on the top we   need to fix this on facing of the two users so if  I click on paper again we are not getting that and   icon that also we need to fix first we'll fix the  scissors for this I need to jump to the style.css   for this user select of fa and scissors I  will copy this class whenever this class   and we need to set the transform rotate to  0° if I save if I go to the browser still   it is not fixed because we have already added the  class on top for this I need to set for import if   I save if I go to the browser now we can see  this now it's rotate to 0° now again we need   to change to the rotation of rotate y with  the direction of 180° if I save here we can   see this the same thing I need to do for the bot  selection of Bot select and then same Anor will   set for 0° and Y to 0° if I save if I go to  the browser now we can see the scissors it's   showing opposite sides of the users if I click on  paper still the icon is same so I need to change   that so if I clicking the paper still this is  scissors why because I will go here I I will   check this user select here we have and as well  as the scissor if I click on this rock here it   is Rock scissor and first all the three classes  added here we need to remove that again I will   jump to the script.js whenever we click we need  to remove this entire class of that user select   do remove attribute of class this will help us to  remove the entire class because it was appending   on the class for multiple times so I will use this  for bot select also first we'll remove this once   we remove and we need to set the user select of  class list do add we need to set the icons here   of fa solid comma we'll set the same icon what we  are using for this rock I will copy and paste here   I will copy this entire line the same thing we  need to set for bot select also if I save if I go   to the browser now if I click on rock it started  the animation if I click on paper now we can see   the and icon it is shaking once we click again  it is reset and it will show the and icon and it   will show the icons based on the users as well as  the computer now we need to determine the winners   based on the user and computer choice for that  in script.js I need to create one more function   function with determine winner with two option  one is user Choice second one is CPU choice so   we need to pause this parameters and we need to  find the results how we can find the results for   that we'll create one object with let game results  equal to object will Define the results for this   we'll set this rock and rock of this first letter  of selection once this is PR we'll set this match   was draw and then if paper and paper also will  set for draw will set scissor and scissor this   is also draw if this rock and scissors rock will  broke the scissors so the user will win I will   set this as a user the same as paper and rock  now also the user will win and then lost one   of this combination scissor and paper if it is  scissor will cut the paper then the user will   win the same thing we need to do for this rock  and pepper if this is rock and that is a pepper   then the CPU will win then paper and scissors  then U will win in this combination scissors   and rock rock will break the scissors and here  the CPU will win these are all the combination   we have to find the results with this results we  need to pick this rock or rock or rock or paper   based on the combinations for this only we have  used this as a index inside this I will call this   determine winner and we'll post the index from  the user select and then random number from CPU   select and here I will set the console.log to  check user Choice as well as the CPU choice if   I save if I go to the browser here in the console  if I click on paper after 2.5 seconds the user is   selected as pepper the array start from zero  this is zero and this is one now we'll get   that one the computer choice of random number  this is zero with the help of this we need to   pick the selection so we can do that so for this  we'll create one more Let of user value equal to   one more let with CPU value equal to empty and let  winner equal to game results we need to pick this   off from this value for this we can use this user  Value Plus CPU value but this is empty right or   we can pick this is a rock or scissors for that we  can create one array here of rock for the zero and   then paper for one of p and then scissor of two of  S so we'll get this from user Choice and then same   thing I will copy this array and I will paste it  for the CPU Choice and then here instead of user   I will set to CPU now we'll see the console. log  of this user Value Plus CPU value if I save if I   go to the browser if I click on rock this is all  for the user and then CPU value of one that is   pepper if I click on another we'll get that one  and two now this is paper and scissor this is how   the value we'll get based on this we'll find the  winner now I will pause this value to this good   results what we are getting this as a user and CPU  value if I go and click the paper we'll get that   user because this is one of this paper and zero  of this rock so the user will win the combination   of P and R this is what the combination now the  user is one and if I click another selection of   scissor and then user select this zero this is  Rock scissor and rock then the CPU will win So   based on this we need to set the values here  once we click we need to change this let's pay   to informative message I will add the value here  of results do inner text equal to please wait and   once we get this result of CPU or user we need  to attach that results. text content equal to   user select equal to CPU select sorry instead  of user select this is user value equal to CPU   value then this should set to match draw like this  if these two matches will set this value to here   instead of this match draw we'll add the sting  concatenation of this we'll set the match and   we'll get the value from winners this will send  if it is draw or users and CPU if this matches   will set for the match draw yes we set the same  string concatenation of winner of one close this if I save if I go to the browser if I click on  paper now we'll get that error message here we   have getting the results cannot set properties of  null setting inner text here we are setting this   results for this document. get element by ID of  results so I will jump to the index.html here we   have the idea of only result so I will change  to results if I save if I go to the browser   if I click click on paper we change the text to  please wait boom we'll get that Dynamic results   from that object again if I click on draw it will  changing now we'll get the match draw because the   user select also zero computer select also zero  if I change to scissor we'll get this scissor and   paper now the user will want now we need to add  the accounts based on the wins for that next to   the winner will set that if condition if winners  double equal to user same thing I will copy and   will check for CPU if this present we have  already created this to global selector of   users card data and then CPU score data this  is a int so we can directly set to Plus+ it   will increment the value and for this CPU also  we have same and I will add the Plus+ to this   and we need to set the user score do inner text  equal to this user score data same thing we will   set the CPU score and this value of CPU score  data if I save if I go to the browser if I click   on paper we'll get that animation and now the  match will draw both will get for 0 0 again I   will click on Rock now the user is one we'll get  that count of one see now once we have finished   but the user is one again I need to select on Rock  but the still the selection is there we need to   remove that for that I will use the same forage  from here copy this and I will paste it next to   this result if I save if I go to the browser if  I click on paper we'll get this user one now the   selection is V and then count also added if I  click on drack now the match is drawn there is   no points to user and CPU if I click on scissor  now the CPU is one we'll get that point of one one   for each if I click Rock we'll get that same here  the two icons is same the text says CPU one but   the hands we need to show some difference so for  that we can change some colors here inside this   this windows we set this user select dot style  dot color of green if the user one we'll set this   color of user to Green but the CPU color we need  to set some opacity instead of color will set to   opacity bot select do style do opacity equal to  0.6 this will show us slightly hidden so I will   copy this and I will replace this because this is  the bot select and if the bot wins because this is   CPU if the CPU wins we need to set this as green  and then user should be light color if I save if   I go to the browser if I click on paper we'll get  that animation and here we can see the light gray   out for this who lost the game and we can see  the green color to who own the game if I click   till the color is there now we can see the both  as green so we need to remove that while clicking   this we can use the same of remove attribute  install of class we are set this as a style I will   set this as style if I save I go to the browser  if I click on paper we'll get that animation and   we'll get that user of one with green color and  then CPU of zero and it will be like it done if I   click on Rock now it will reset the color and now  the CPU got one point and the color is changed to   CPU and it is grade out if I click on again get  this color and then effect if I click we get the   count if I click on Rock again it will start the  animation and will get the accounts so we can do   how many times we want and that's it you have just  build a rock paper scissor game using HTML CSS and   JavaScript feel free to expand on this project by  adding more futures or improving the styling if   you enjoyed this video don't forget to like like  subscribe and hit the Bell icon for more tutorials   if you are interested in JavaScript projects  like this I have created and added a playlist   Link in the description please do check it out  thank you so much for watching until next time   keep coding and keep learning see you in the next  video Happy coding bye for now have a nice day

Channel: Sharathchandar K

Views: 142

Keywords: learn web development, javascript, free web development course, web development, software engineering, web development free course, rock paper scissors javascript, rock paper scissors, how to build a rock paper scissors game, rock paper scissors game using javascript, rock paper scissors javascript tutorial, javascript rock paper scissors game, javascript rock paper scissors game tutorial, javascript rock paper scissors, rock paper scissors html css javascript, javascript game, js

Id: uuMZeyS_B4w

Length: 40min 51sec (2451 seconds)

Published: Sat Jul 13 2024