Javascript Rock Paper Scissors Game Tutorial | Web Development Tutorial

hello there friends in this video we are gonna put our JavaScript skills to the test and by we're gonna build this thing the rock paper and scissors so we're gonna build a small game and let's see we have player zero player and computer with zero and zero score we hit let's play and we get presented by this so we can choose an option let's go with paper come on there we go what's up computer bring your i7 back home because we are better okay anyway let's get started let's start building this thing out I have I'm gonna attach in the description a folder I made these free I just cut out these three rock-paper-scissors pngs that you can use in your folder which I'm gonna attach it so we have it attached here and the assets and the other things we have just an ad that jes index.html and a style dot CSS oh yeah make sure to get these off in my description down below I'm gonna post it on github or something so yeah let's get started let's generate a project here we're gonna call this rock paper and scissors like so my computer is making some weird noises hold on and we know that actually worked okay great so here we go this is what we have and let's open this up in live server so I had the old one open so the finished project let me just open the new one so we can see and yeah obviously it's currently empty so let's add some things in here well let's detach our style that CSS first so we're gonna attach it like so and our script J s down here script source AB KS perfect it's making noise again okay Shh okay good okay so here what we're gonna do is actually we're gonna build a whole section that's gonna contain like the score it's gonna contain the intro screen and then it's gonna switch to the game screen so I'm just gonna make one section for this it's gonna be one big section with the class of game okay so this is the whole game literally we're gonna place it in this one big section so here we're gonna make a class and I'm gonna make one for this core so here we're gonna put the player a computer is zero zero and which is gonna increment depending on who wins so we create a bit for that name score and here I'm gonna create two classes one for the player and one for the computer so I'm gonna do player score for this one like so and here I'm gonna just add an h2 I'm gonna name this player and I'm gonna add ap with zero and here I'm gonna make another one computer score which is kind of gonna be the same thing so h2 computer and then we're gonna add ap again with zero okay so we have our scoreboard done so outside of our scoreboard we need to make the two pages so we make the one where you start the game and the actual game so let's make an intro div here and here I just want to add let's just add a title rock paper and scissors like so and then I'm just gonna add a button here and that's gonna say let's play all right so that's literally the whole thing that we need nothing much nothing more so the actual match that we're gonna build this down here so we're gonna add a div with a class of match and here I'm gonna add a a just a title there they're gonna say choose an option and when you win it's gonna update and it's gonna say player wins computer wins so that's gonna be called the winner class okay so whoever wins is gonna get actually let's make this a H one H that's 2 H 2 X also the winner class I'm gonna add a choose an option for now had save the other thing we need is the actual hands some make a class of hands you know the ones that bill like this yep I'm gonna add two images here so the ones we have in the folder so by default I'm gonna start both of them as paper not paper rock it's rock and I'm just gonna copy paste this one down here and one of them is gonna be D play your hand so the one above is gonna be the player hand and the one below is gonna be the computer hand and the thing we need to do with this one is actually we're gonna have to rotate it because they're both like this so we need one to be rotated so they're facing each other good so other than that after our hands clasp here we're gonna need a clasp with the options so what you can choose like rock paper and scissors so I'm gonna make a class of options here here we're gonna have three buttons so I'm gonna have a button with a class of rock like so this is gonna be rock I'm gonna put everything with lower case and you're gonna see why so make sure you have everything in lower case I really don't want to mess this up because we're gonna eventually get this text content of this rock in here so just make sure everything is lowercase and then we're not gonna have a problem so classes text everything because we're gonna switch this out with whatever we're gonna choose so here right so even these are old everything is lowercase so here we're I'm gonna cut face this two more times and it's gonna be one with paper so paper class again and scissors this is thanks so this is good and that's everything we need so let's take a look how this looks and it's gonna look horrible nice well we're gonna make this nicer let me exit out of youtube let's go back here I'm gonna go to our CSS I'm gonna close this one and I'm gonna try to fit this thing in here so we have some kind of visual yeah something visual there we go so in our CSS I'm gonna jump back here because we're gonna need to add a few additional things like animating these things but let's just build out the basic styling of our style sheet here so I'm gonna add the I'm gonna just remove the margins the global margins and we we did this every time so you should be familiar with this so just getting rid of everything by margin padding and box-sizing border box good let's make this bigger a bit we don't need that much space in here so on our section remember that's the big one that contains everything this is gonna add a height of 100 VH okay so it's full screen I'm gonna add a background color and I choose one here which is RGB let me take a look 3:9 it's gonna be 41 and 68 like so it's safe and there we go you have a nice color I'm gonna add just a basic font family here sans-serif like so so it's not that ugly now our scoreboard which is this one here which we're gonna display up here we're gonna add score I'm going to change the color to white and actually I I kind of don't like the contrasts on this so what I usually like to do is bring it down a bit so it's a bit grayish and that that just looks a bit nicer on your eye yeah there we go but that's that just me being crazy feel free to just leave it white all right I'm gonna add a height of 20 VH to this just add a bit of spacing and here I'm gonna add a display flex to this like so and then we need to add a justify content space around so it goes horizontally and aligned items Center so it's like that perfect nice looking good looking good another thing we need to do let's go to this core h2 just increase the font size of this a bit bigger thanks oh and another thing we can do is Center the zero in here so we can do that by score be text the line I'm gonna Center this I can add a bit of padding so it's not stuck in there like so close to the player let's make this bigger - font size 25 let's see how 25 looks yeah that's okay 25 not too shabby okay so what we're gonna need to do here is just put the intro screen so the presentational screen up we need to fade that out and then we need to fade the game in so for this I'm just gonna do intro our intro tag I'm gonna add we're gonna add the same color in here just paste this in here here we go and here I'm gonna add a height of 50 VH thanks so alright so this is our intro screen here height we're gonna add the display flex I'm gonna add a flex Direction column to this so it goes like this in vertical style I'm gonna add a line let's go down here a line item center there we go and then I'm gonna add the just a five content space around thanks so good looks good perfect well let's change these up a bit we're gonna add the intro h1 so our big title here I'm gonna change the font size to 50 pixels there we go looking good and the button and throw button I had I think I had a green color on this so I have a width of 150 pixels and we go and a height of 50 pixels like so and then a we're gonna remove the background I'm gonna say none okay and we can even remove the border so no border then we can add a color of whites or actually the above color again so let's copy paste that in here good let's add a bigger font size 20 pixels good and let's also add a background color I'm going to add a background color of RGB 45 117 and 96 like so and see how that looks looks good should we add a border radius of course we should border radius 5 pixels yeah 3 pixels okay that's good I don't want that to be too exaggerated so what we need to do now is take this down here and put it on top of this one so what we're gonna do is we're gonna click we're gonna fade this out and then this is gonna come in so actually let's just style this first and then we're gonna see how we do everything with the fading so here we're gonna get the match all right so the actual game that we're gonna play we're gonna add a position:absolute to this like so and then we're gonna add a top 50% and left 50% I think so all right and then we're gonna add a transform translate - 50 % + - 50 % which is gonna Center it nicely for us good now let's see what else do we need to do let's get the winner class here so the winner is basically the choose an option here because this is gonna update again to the actual winner when we play this one is gonna have a color of white wait was it white no it's not white color white good yeah I don't like the white one I'm just gonna copy paste this one save yeah okay good Elise let's let's just stay consistent with everything so we have the winner let's text align that to center like so good it's centered and what else do we need to do let's make a bigger font size on this 50 pixels you know what actually let me remove the other one because you cannot see what the hell is going on so let's go to the intro and just add the opacity zero for now there we go so this is what we have I should have done that sooner ah damn it okay so 50 good so we have these and we need to take everything here and what we need to do is just basically display flex them so these are if you remember I believe they were the hands so we have to match the winner which we styled right now then we have the hands and the options okay so actually we can do it with both I think let's just do hands and options so we can select both of them and display flex ah there we go then let's to justify content space around and see how that looks yeah and it looks good and then line items Center good all right looks good and you know what for the buttons we can also do this up here so we can just do match and button thanks oh there we go see we just made our lives way easier perfect nice do we need anything else what we need to also do is switch this one because it's in the bad position so this one is the player player hands alright so this again this is the player part and this is the computer part so to switch that we can do player hand then we can do transform rotate X 180 degrees oh that's that's not correct because like it's like oh damn microphone it's like giving you the finger so we don't want to give the finger we want to do why that's the correct one okay there we go and now we need to make some classes that we're gonna add in JavaScript and remove so to fade this thing out we're gonna discrete well we're gonna have a div with a specific class so one's gonna be fade out so what we want to do when we fade out something out we want to remove the opacity and we can do pointer events none so what this is gonna do is basically you can click on an element so if we add pointer events none to the whole intro section here we can not click on the intro section basically so if we have the other section coming in even though this is because when you again when you add just opacity zero so let's also add the cursor pointer to the buttons and I'll show you what I mean look cursor:pointer okay so all the buttons are gonna have the pointer like so as you can see I can click so when we add pointer events none it's like the button is not even there so that's what we're gonna do we're gonna remove at the opacity and remove the opacity and at pointer events none so we cannot click okay let's add the fade in which is gonna be just the opposite fade in past C one pointer rents all so we want all the pointer events good yeah that's it let's let's start our JavaScript so let's go into our JavaScript close everything yeah we go perfect everything opened up and what I'm gonna do here is I'm basically gonna create just a few functions and each function is gonna have its own role so maybe we're gonna have a function that it's gonna just compare the hands we're gonna have a function that's gonna just update the scores so that's how we are gonna kind of organize everything up in here but for now I just want to create a big function that's basically the whole game so I'm gonna use a any variable here Khan's game we set it equal to I'm gonna use the shorthand which is called the arrow function which is written like salsa parentheses equal and bigger than and then we open up some brackets and here we are gonna write all of our code and all of our additional functions so by that what resume basically by this you're scoping everything inside this function so you don't have global variables the global variables are basically any if I have variable here it can be accessed everywhere else so this is kind of like self containing all your code and in here the first things that we're gonna need is I'm gonna just get the score of these two I'm gonna set say let I'm gonna use let's because we're gonna update the score I'm gonna do like we're gonna have a player's course I'm going to say P score 0 so eventually we're gonna do something like B score plus plus so we add 1 to it every time we win and then we're gonna also do the C score which is the computer score so these are all the two that we need to be in global scope because we're gonna use them somewhere down in here later on good then we are gonna create a start game function which is the the only role of it is gonna be to fade our beginners actually we kinda need to add this back so let's go back to our CSS I apologize because we removed the intro screen so this one so I'm gonna remove the intro thanks so so we have this on top and in my index I'm gonna go to the match and I'm gonna add a fade out like this okay I apologize I forgot about this so just remove the intro opacity and just add fade-out class to the match and there we go we have our introduction screen so we're gonna have another function which is which is basically I'm gonna create it the same way we did this so I'm gonna have this in here I'm gonna say Const start game this is gonna be a function that's all it's gonna do it is just fade this out and fade the other thing back in so what i'm doing here is rather than adding all the elements up here I'm kind of restraining myself to create all the variables inside the functions that I need them so here I know that all I need is the two pages so I'm gonna get the play button which is this one play button like so is equal to document dot query selector and it is called I believe intro button okay so it's intro button thank so I'm gonna make this fullscreen for a bit again there is no point for me to put this up here if I put it up here it's gonna work but I'm not gonna need this in here so in this cope so I'm kind of restraining myself and just using everything I need in one function okay and things like these that I need across multiple functions I'm gonna put in this in this scope here okay so we have this we also need to get the intro screen so I'm gonna say Const intro screen is equal to document that query selector I'm getting so hot in here I should have turn down the heat it's just gonna be the intro okay so the whole thing the whole page and also the match screen it's gonna be document dot query selector and this one is gonna be do you match okay perfect so what we need to do is on play button dot add event listener so every time we click on the let's play we are gonna run something in here so every time we click and the other argument is a function so make sure to remember that and rather than writing function like so you can use the shorthand method again just arrow function just parentheses again equal bigger than and brackets okay thanks so good and what do we want here well intro class intro screen not class dot class list dot add D fade out we want to fade out the intro screen this one hit save it's not working console say okay so why is it not working well we have this big function here right and we created a inner function in this function okay and what we need to do is execute the function but this never gets executed so what we need to do is call the starred game so here what we're gonna do down here is call all the inner functions so here you can imagine that we're gonna have something called like start game update score okay so basically why we did this like so is a way to organize everything nicely in here so you have the big function and then you have all these small functions that it's going to run at the end but at the same time outside of this big function we also have to call the game so here start the game function I'm just gonna call it game down here okay so this is where you execute the big one and in here this is gonna execute all the small code I know it's a bit weird but it is what it is delete this start game safe let's see we have luck and we do now there's a problem that was kind of fast I mean if your flash might be slower for you but what we need to do is add a transition to our intro transition we can add 0.5 seconds ease we need to eat what what are we transitioning the opacity opacity like so ease and yeah that's it and I'm gonna copy this and let's go to the match as well because we're gonna transition this in as well and I'm gonna add a small delay to this so you can add it a delay just by after the ease you can just add it down here save let's see do we have luck oh yeah okay now what do we need to do what do we need to do with the match well we need to fade in so match the classlist dot add D fade in and to pray let's pray and there we go it works nicely yep so we have that going and we are done with this function we don't need to do anything else we only use variables that we use in here and nothing more so I'm clicking here so this is gonna start the game okay what else do we need what we need one that's called play play match okay so everything in here is gonna revolve around the actual game so play match I'm going to comment them so it's a bit easier to see and what we need to do here is create a function called play match it's gonna be equal to another arrow function I think so and let's let's think a bit of what we need well let's take a look well we need the options okay we need to to get the rock paper and scissors so the user the player the player is options so let's get that we need to write Const and we're gonna save options like so this is gonna be equal to document dot query selector all I'm gonna query select all and here we have options button I think so so this is gonna select all the buttons from the options thanks so good what else do we need well we need the hands so the actual images to get those we can say cons player hand is equal to document query selector and we named it play your hand we can get to computer hand just by replacing this computer our hands and here computer hopefully it's correct let me make sure yep play your hand computer hands so these are the images that were getting good so what do we need to do well we need to also get the computers options computer options now whether are the computers options well this is kind of gonna be randomly generated because yeah what we need to do is just generate a random number between 0 1 & 2 and we're gonna associate the different numbers to a symbol so - not simple - like rock paper or scissors to an image okay so what we need to do and how are we get generating a random number well we can use something called math dot random so let's do that let's first generate let's let's actually make a array first so I'm gonna say Const computer options and we are gonna have rock paper and scissors so I'm gonna have trees strings in here like so and let's generate a random number and then based on that number index we're gonna get a value out of this you're gonna see it in one second I promise so what we can do is create a variable called Const let's do computer number we're gonna set this equal to math dot random so this is a function here and then we're gonna have to add times three and all this is gonna do because math or random is gonna generate a random number between 0 and 1 so if we times this by tree well you guess that is just multiply everything so what else we need to do here is down here we're gonna call the function play match that's also console.log this and see what we get computer a number let's see do we get the cost so we get to refresh two 30.5 all right you get the idea but I don't want this long-ass number I wanna have zero one and two so what we can do is take everything in here and wrap it in parenthesis and we can do math dot floor thanks so what this is gonna do it's gonna take all the numbers and it's gonna convert it into one single one without the dots and the extra numbers and it's just gonna generate one between 0 1 & 2 0 1 2 as you can see down there good so what we can deal with this is basically get the computer options and just add computer number in here and what this is gonna give us is a random rock paper scissor okay now before we use this we need to also get the buttons okay so we don't want this to run we only want everything in here to run after we click on one of these so we are gonna add this thing in in the event listener so I'm gonna loop through each by writing options dot for each and here you're gonna get T you can add an arrow function in here like so and we are getting the option so each individual button that we can choose and since we only have one parameter what you can also do is get rid of the parenthesis so if you have one only one in here you can get rid of the parenthesis okay so in here each option is gonna be yeah each button cell here we can option so on each button we can add an event listener and on click we can run a function and as you can see here I added a normal function and I'm going to show you why console.log because we're gonna use this in here so this if I use this in here you're gonna see that this is gonna mean whatever we click on see so whatever we click on it is gonna console.log that thing and the reason we use it we use a normal function here if we use an arrow function then the keyword this is not gonna be bound to this option okay it's not gonna bind to this one so this is gonna be window now so we just use a regular function and then this well we look left on our dot it's gonna be the option okay so good so we can copy this down from here and we're gonna paste it up in here okay so here this is gonna be the computer choice so so we're gonna have the computer number and then we're gonna have the computer choice which is all it's gonna be is well the options from up here so we're gonna get that array computer options and then we're just gonna feed this random number it is you know we can access each individual elements from this array with 0 which is gonna be rock one is gonna be paper and two is gonna be scissors well we have this that's randomly generating for us so every time we click this is gonna be randomly generated so we can just add this computer number in here so if we console.log console.log computer choice now well it's just gonna return us he random number let's see and in theory yeah as we can see we're getting random we generally generated computer options good so we did the computer options nice what else do we need well we need the player options as well and we also need a thing that's gonna check who wins so many things still to do but before we do that let's just create a a comparison so I'm gonna create a comparison function and in that comparison function what's gonna happen is I'm gonna feed the choice that we made and it's also gonna have a lot of if statements that's gonna compare who's winning okay the henna sounds kind of weird but let's let's do that so what we're gonna do is outside of our let's see here outside of our play match we're gonna create a function that's basically just gonna check who should get the score who's winning and all the other good stuff so I'm gonna create something called cons compare hands I think so and here it's gonna be another arrow function but I also want to add the values of the of the choices that we make from the play match so I know I'm gonna have a player choice and a computer choice again I'm gonna call that function up in here some we're gonna call it every time we click on an option this is gonna be called in here okay so that's when we're gonna pass the computer choice we're gonna pass it in here and this is not correct is it I think so computer choice good okay so here is where we call compare hand good so let's see what we need to do in here well we need to get the text first so we need to get this and actually let's do this a bit later because we need to update this as well but for now let's just do if player choice triple equals with computer choice well if they're both the same then what I need to do is let's just get the winner thing so this is gonna be update thanks that's to you document winner is equal to document query selector winner so basically you want to get this text here okay that's all I'm doing now and if they're equal if they're the same then what I want to do well winner dot inner content not inner content text content all right I got confused by inner HTML is equal to it is a time good nice and if we get here well I don't want to run this function anymore so we what we can do is just return which is gonna end the function okay so this is one we are checking for a tie good let's also check for rock okay so if we get the rock we can do if player choice triple equals with rock I'm gonna do lower case make sure you do everything lower case since we did everything lower case let's do lowercase so if we get to rock and this is a bit kind of trippy we need to add another if statement okay and the reason why we do that is if we check the player if it's rock and then we compare it to the computers choices so here we can do if computer choice triple equals with scissors like so then we're gonna say winner dot text content equals with player wins because what's happening here well okay we have rock so if this is true then we're gonna get to this if statement and if we have if the computer choice has scissors then we win well what is the other alternative well the computer has paper so else obviously the computer wins here so winner the text content is equals to computer wins like so good and now also we need to do in here is return so in here return and in here return as well so we end the function anyway so even if it gets here if even if the player wins even if the computer wins at the end of the day we still want to return everything so again it's kind of weird you have an if statement that just checks the player if if the player has rock then okay if the computer has scissors and the player wins else the computer has paper so the computer wins and we're gonna repeat this this kind of switcheroo in here so I just copy this everything we have and yeah we can just copy paste everything and here we're gonna also check for the paper so check for paper not much changes in here so if the player choice is paper then if computer choice is scissors then the computer wins and here the player wins and then we can do it again for scissors check for scissors and here well scissors and if the computer choice is scissors or not scissors so this is a problem here we need to add rock for the computer choice or paper so this is gonna be the computer choice is either gonna have rock or paper so if it's rock then the computer wins if it's paper well then we win oh Jesus Christ there we go and yeah I think that should be it let's make sure everything is okay rock scissors else paper paper scissors or paper yeah and scissors rock god what are we doing with our lives okay that's it so up here we're gonna call this compare hands function okay okay so to also make this visual a bit I'm gonna change the images based on what the user picks and what we pick so to do that before we call the function I'm gonna do update images okay and then here I'm just gonna get the player hands so these are the images here these two okay I'm gonna do player hand outsource is equal to I'm gonna access the assets folder that we have like so and actually let's do the backticks here because it's gonna make everything look easier and nicer so backticks the number next to one the symbol next to one and then we do assets like so and in here to access what we're choosing remember that in here and our options we get the this keywords and here I'm in the event listener in here we have access to this which just returns whatever we click on so this whoa whoa whoa this is gonna be the button so we can actually get the text in here so this dot text content okay so we are just updating the images so this is gonna be image assets slash rock paper or scissors depending on what we pick dot PNG and to get the computer one we can do computer hand dot source equals to again backticks assets and then what we can do is to the dollar like so and the curly brackets and we can do computer choice okay this one that's randomly giving us rock-paper-scissors dot PNG and let's see if this works okay we're getting randomly generated if we pick paper goes paper rock scissors and the computer one is randomly generated good ok I think I saw a gang signing in there but hey it is what it is ok so let's also check with these so we update the score up here and let you score the text up here so let's see if this works what we need to do is say compare hands so we're calling this big function here and we need to feed these two values so the player choice and the computer choice so to do that we can do this stuff text content again and the computer choice let's see so it's a tie that's correct computer wins I have paper he has raw scissors that's correct it's a tie ok so everything works fine now there are a few things we need to do we need to add the animation and update the score so to update the score we can also just do a separate function so the way we did down here with the compare hands we can just go again outside of all this big thing so the play match and we can just create another function so update score is equal to and just another arrow function we can do can't play player score equals document query selector we can get the player score be okay now I'm using pee here because I believe we have pee yeah there we go players compete and computer scorpy so many peas and zero poops okay hit save copy paste this I'm gonna say computer score and here we're gonna have computer come computer computer score be good we can do player score dot text content is equal to P score the variable that we have up here and to do the other one computer score the text content equals to C score thanks huh and that's it that's all we need to do here now well when do we call this function well we need to call it every time a choice gets made down here so before we return anything here so make sure it's above the return else it's not gonna work so every time up here well we what do we need to do well first we need to increment this number because if we don't increment it well this update is going to be zero so it's still gonna remain at zero we're never changing the values up here so this function right now is kind of pointless so yeah let's update everything in our compare hands so if it's ty we don't want anything to change if our player we wins we want peace core plus plus computer score wins then we want C score plus plus thanks so and we can copy this and down here computer wins player wins just update everything computer wins then we want C score and if we eat the player wins and we want the other one be score here we want C score plus plus good so now we're updating the numbers these numbers every time we get to a choice now we also want to update this course so the actual elements that we see on the screen because this works now but it doesn't update this so to update everything well after we increase the score so the variable we can update the score like cells we can run this function every time we make a change in our variables so let's update the score everywhere make sure everything is good hit save let's take a look okay it works but as you can see the first value doesn't get updated right let's try that again okay nevermind everything is okay good all right so everything works just fine perfect let's see what else do we need to do well we need to add the animation so let's go back to our CSS and let's create the animation real quick and we are done with it so we can do keyframes here and we are gonna say shake player okay we're gonna use the player and one important thing here we're gonna animate to do like that we also need to keep the rotation because remember we have a rotation on this player image so make sure to also add that in here so we can do transform and we need to keep the rotate Y at the hundred eighty degrees but we also want to translate dy - well we're gonna start at zero pixels and then we are gonna modify this let's add I don't know 15 and then we're gonna move this to minus fifty pixels so dy good nice so this is the whole thing I know pretty crazy but hey we're just moving it up and down here get so what we can do is also have one for the computer and the only difference is we're just gonna remove the rotate so it's the same thing so keyframes and we're gonna name this shake computer and this is gonna be we're gonna copy everything here paste it in here and just make sure to remove everything from the rotation is we don't need to rotate this one think so perfect stead save and that's all we need let's go back and add it in here now the problem is that everything that happens is gonna happen in an instant and we don't want it to like let's say we click raw let's say paper we don't want our hand to be like this okay we want it to start from rock like so and then update at the end and even the score and everything else we want everything to update at the end okay so after our animation now whoa how do we do that well what we can do is we can set a timeout on our functions on this compare hands we can set a timeout and after our animation is done then we can update the score and the hands so let's just add the the animation first so player hands dot style dot and blue style at animation it's equal to shake player two seconds is let's copy-paste this I'm gonna add it to the computer as well computer hand style animation is computer player is this correct I'm not sure shake computer shake player computer player shake computer and shake player shake shake player shake them okay oh Jesus okay so now let's see do we get the animation okay so that kind of looks weird but as you can see everything updates as soon as I hit and yeah that's not good and also if we hit again it doesn't work anymore keys because we already added the animation cell it's not gonna remove it so what we can do is actually we can remove these animations after they finish so to remove the animations let's just quickly go up here to diplay match okay and here I'm gonna just grab both hands images the ones that were animating I'm gonna say hands is document dot query selector all I'm gonna do hands image so I'm gonna get both of the hands and on the hands I want for each hand so we're gonna add another function like so we're gonna add on each individual hand and event listener that's gonna listen to animation and so this is gonna run every time the animation rat ends and again as you can see I'm adding a normal function because in here I'm gonna have access to this which is gonna refer to each hand and we can do this that style that animation is equal to nothing so I'm gonna leave an empty string here so every time our animation ends this is gonna run and it's gonna remove everything let's save hit so we should be able to do this again and there we go we can do it again nice alright let's delay this and make sure we have everything nice so do we need to delay the animation no we want that to run instantly so the animation we need this to go as soon as possible what else do we need to update well we need these to update and this and after how much time well we do the animations for two seconds so let's just update everything in here after two seconds so I'm gonna pick everything I want to update after two seconds I'm gonna copy it cut it actually I'm gonna call something set timeout like so as you can see it's just gonna add I don't want an arrow function so I'm gonna write this manually set timeout like so and here actually I do want to add an arrow function you can add an empty arrow function like so and here you can call everything that we have okay and by the way this takes a function as its first parameter and the second parameter is gonna be the time so how long you want to delay this function so we're gonna add 2,000 because it's gonna take it 2 milliseconds so I'm gonna add 2,000 and in here we're just gonna call the function and the updating the images let's take a look and Jim Jim Jim do there we go everything updates right after we are done and it's getting hella dark in here so I don't want to waste any more of your time but hopefully you enjoy this you can also make another function if you want and check when the player scores so B score reaches I don't know 10 then you can restart the whole game ok so you can also work on adding more to this if you want but yeah that's basically it hope you enjoyed this video as getting already sodor I'm so hot in this it's absolutely crazy but yeah thank you thank you again so much for watching please drop a subscribe if you enjoyed this video and hey I'm really curious to see how this goes for you guys alright take care [Music]

Channel: Dev Ed

Views: 126,617

Keywords: web development tutorial, web development, learn web development, web development project ideas, html, javascript game tutorial, javascript tutorial for beginners, css, javascript, jquery, vanilla javascript, positioning css, learn html, learn css, learn javascript, master javascript, how to build a rock paper scissors game, rock paper scissors, rock paper scissors javascript, javascript tutorial, html tutorial, css tutorial, Javascript Rock Paper Scissors Game Tutorial

Id: qWPtKtYEsN4

Length: 53min 56sec (3236 seconds)

Published: Sun Feb 03 2019

Reddit Comments

[u/storyofedd]

Hey, I taught I'd make a rock paper scissors game for those who want to create a few more practical JavaScript projects. Definitely more beginner oriented, let me know if it helped!

[u/myskotima]

Nice!

[u/middlebird]

Nice. Thank you for sharing. Always love these little how to videos.

[u/princessohio]

Awesome! Thanks for sharing. I really appreciate these how to videos and gives me something else to play with and try.

[u/Mayday9158]

I actually made a game exactly like this for AP Computer Science final last year. It was in a sort of pseudo java code but its still very similar and I could convert it in like 15-20 minutes. Gives me a bit more confidence as I grow and learn.

[u/user9326]

prflfnnsyf