Build Live JavaScript Project | Whac-A-Mole Game 🔨

Key Takeaways

okay guys we are live just give me a minute okay let's continue so hey everyone I'm Marshall Jen your Mentor at Geeks for geeks and welcome back to another session in this video guys we are going to create a project using HTML CSS and JavaScript the project name is whack a mole okay so as you can see that this is the project and if I come here as soon as I come over this you can see I see a hammer and Marvel fans would actually recognize this Hammer right sounds familiar okay so this is actually Thor's hammer which I have used as a reference okay this just a fun part okay so you can also use this so uh this is what we going to learn first that how we can actually use a image as a cursor whenever I H on this you can see I don't see the image here I see the image whenever I'm over my game okay right and the next thing is you're going to have these different parts as soon as you click on the start button can see that you get that hamster actually uh mole is something uh a kind of uh like looks like hamster only okay I've used this cute hamster because I found this very cute and it's something which you would see in your memes also okay nowadays in memes uh you would see some image like this okay so I have used that Meme image okay and this these six holes are also available here right so it's a very simple project but very fun project which would actually help you understand the connection between HTML CSS and JavaScript right so yeah this is it that's what we are going to build today right right so uh now let's see the live chat some people are saying time is over Yes actually time time is over uh I started the session late because uh actually navaratri was going on so I just woke up late as you can see so anyways let's continue all right so what I'm going to do is I'm just going to close this I'm going to create a folder so you can see I've created a folder and don't worry guys I'm going to provide you the source code also the link of the source code okay so you can just get the source code link and you can just get the code from there the code is pretty much same which you would see everywhere okay because we have two basic things whole and the mole okay so when the mole is up you have to hit that the point would go up uh and in a few seconds the mole would go down again come up go down come up in different different hole okay so pretty simple project so so I'm going to create three different things here first thing is index do HTML okay let me just zoom it a bit Shri pan hi sir hi Shri sir can beginner understand this session uh yes you can as a beginner also you can understand this session if you have knowledge of HTML CSS and JavaScript Basics okay like how you can Target an element using get element by ID basic things rest everything is on me I'll make you understand everything okay if you have any doubts you can ask me sir how this part actually happened I'll help you understand that okay so this is a beginner friendly project don't worry okay so now let's continue I am going to create another file named as styles. CSS and another part which is script dot g yes okay fine so yeah here I'm just going to create a fresh template HTML template if you don't know how this shortcut game it's pretty easy just need to pass this exclamation sign and hit enter and you'll definitely get the shortcut okay so uh pretty simple and now here guys what we're going to do is we're going to write our basic code so that we can connect HTML CSS and Java Script okay so I can just actually name it as something like back uh mole game gfg okay something like that you can give any title you want then I can also connect my stylesheet so for that I need to write link uh self closing tag and here I'm just going to write it Rel as stylesheet then I'm going to say where is it located so HF equals Styles in the same folder we have styles. CSS file right so yeah we have written that and then after that we need one more thing which is Javascript file so here itself I'm going to write script okay and inside the script I need to just pass the SRC script.js and close this okay so I've loaded my Javascript file also okay so all three have been connected now so the HTML part is pretty simple it's very simple you just need to give a heading okay so you can just give the heading as vac uh mole okay simple H1 tag then I'm going to say what is my score so h2 tag which would contain my score and inside this I'm going to write my span tag I'll just give the class as score and here I'm just going to say that uh the initial score would be zero right very easy then the third thing here would be third thing here would be a button which would allow me to start or restart okay so initially you would see the text as start later on with the help of JavaScript when the game is finished in 20 seconds okay I've seted the timer to 20 second if the game is finished after game is finished instead of uh something uh instead of start you would see the restart button okay let me just show you what actually happens so if I come here and and you would see the restart okay so once you click on the restart you can see that the start button is also invisible okay but after 20 seconds this would be visible button would be visible but the text inside that would be restart only the first time you would see the start button okay so let's wait for 20 seconds uh 20 seconds are almost over you can see that yeah initially uh you would have seen the start button but now once you have played the game you would see the restart button always if I refresh you can see initially I get the start button only okay so that's pretty much so initially I want to show the start button later on with the help of JavaScript when I play the game first 20 seconds after that you would see the restart button again I click on restart then next time you would see the restart button okay so start button is only shown for the first time right so I'll just say ID equals start and once I click on this I want to actually call a JS function which i' be decided in the JavaScript part okay so I'll just simply call that function as start game okay so this function would be uh created in the Javascript file okay that means script.js file pretty understandable very easy how it would work since we have connected the JavaScript so whatever we WR we have written here will be used here okay used here so we can update the score from the JS file we can start the game from the JS file okay okay now let's come back here and I'm going to say that we have a division which contains a kind of a matrix okay 3 cross three okay that means we have six holes 3 cross three okay three rows three columns right so just give it a class game okay inside this I just want to create six holes okay so I'll just simply say div okay and I'll just give it a class of hole okay hole and uh inside this hole one okay and here inside this we're going to have a mole mole or you can call it a hamster okay hamster sounds easily understandable mole is similar to hamster okay I don't know exactly what's a mole because I haven't seen it properly but yeah it's like a hamster it's like a Chua okay in India we call that Chua okay all type of that is known as a Chua right so yeah I'm just going to say my first hole is going to have a mole okay similarly every of my hole okay is going to have a mole okay so we have around six holes here okay so hole number two hole number three hole number four hole number five hole number six now remember one thing since each of the hole is having the mole okay so if this is visible I have to hide all other moles because I can see the hamster only once okay rest of the hamsters are hidden if hamster is visible here this would become hidden if hamster is visible here this would become hidden okay so initially you would have all the moles here but only one at it would be uh visible at only one place okay you can make it visible at multiple places also the game also does that but right now we're going to understand that how we can make it visible for one time then another time then another time then another time okay like that so uh we have created six holes you can create more if you want but I've created six okay so it's pretty much here then we're going to create a grid in the CSS file to actually use that so once you have done that you can see that everything is done this is the basic HTML part which we wanted to write can see just a few lines of code now guys what we're going to do is we're going to write the CSS part okay so let's do that Sumit good morning sir Deepak whoa thanks Deepak all right let's continue so uh now I'm going to make you understand the basic CSS part okay so CSS is not that much big so first of all guys what we need to do is we need to Simply start this okay see how it actually looks so I'm just going to write click and here you would see a shortcut open with live server if you're a beginner you want to get this extension which is live server okay live server so just install this extension and then once you install this extension you would be able to see this shortcut go live or you can rightly can just click open with live both would do the same job that is open our website into the browser so you can see in this browser you would see this okay right now you are not able to see the moles and the whole because we haven't styled yet okay so I'm going to bring the images images of those you can get those images from my GitHub repository I'll upload the source code at the end of this video I'll show you where is the source code you can get the source code from there and you can get the images from there okay so uh let me just first of all bring the images so I'll just copy all the images and I'll paste the images here okay so basically we have three images first of all Thor's hammer okay so I'm going to beat the uh mole with the help of thoughts Hammer okay so then we have a hole okay some hole okay and some cartoonish hole okay and then we have a mole okay so this is a hamster or you can call it a Chua okay so pretty cute okay so I'm going to use this one so we have actually seen this in the memes which we see around on Instagram so I picked it from there only right looks cute okay so let's do that uh we have bought the images okay we have three images so my first task is to first of all style the page then whenever I am over my page I want to show this Hammer instead of my cursor okay that's what I want to show I'll do that okay so you can use this in a lot of projects also now with the help of this example you'll understand in upcoming future projects you can use the same logic the way I'm using the hammer I'm showing the hammer instead of cursor you can use it and other projects also okay so like for making websites you some some websites actually show you a custom cursor okay uh by the way one thing one tip which I would share you if you are making custom cursor like this Hammer the size must be smaller than 150 by 150 width and height okay so just make sure that else it won't work okay I pretty much wasted a lot of time yesterday just figuring that out okay because I forgot that the size is is also uh important here okay so now I'm going to say we have the CSS part let's go up with the CSS part I'll just say that by default by default I'm just going to say box sizing would be inherited Whatever It Is by default whatever it is it would be inherited okay so uh it would be inherited from what so I can just say box sizing would be uh okay I'll just I just make the Box sizing as B box let it be okay I'll just make the Box sizing as B box which simply means that uh if width is 100 pixel and padding is padding left and right is 10 pixel 10 pixel so usually what happens is width becomes 120 pixel because sorry 130 pixel 10 pixel this side 10 pixel this side so width would be enlarged this simply uh makes sometimes the scroll bars visible I don't want that I want the width to be 100 pixel only okay if there is some padding padding would be from inside not outside that means width remains 100 pixel okay inner content becomes 80 pixel rest 10 pixel 10 pixel would be given padding okay so that's what box sizing does it would simply make the width fixed it won't increase the width if there is some padding okay padding would come from inside okay that's what it does box sizing border box now I'm just going to say that uh we have have the HTML tag okay by default I want to say this is the font size okay and I'll also say body uh I I'll just do one thing here I'll I'll just say that margin would also be Zero by default and padding would be Zero by default I don't want any margin or padding okay fine now in the body I want the background color as some light green okay so I'll just pick a light green color e f E8 FF so don't worry you'll get everything with the help of my source code you can just pick everything from my source code okay so E2 okay so light green color let me just check now so guys here you can see that you got the light green color perfect now once you have the light green color what you're going to do is you are going to sa one more thing which is by default text align would be Center so what I want is by default I want the text align to be Center okay so every text would be by default Center let me just check so you can see okay by default everything would be in center right so this is it now guys what we're going to do is we're going to say that our H1 tag is going to have some font size of of around 4. 5 RM okay then margin would be two RM top and bottom and left right would be zero okay then text color I want is gfg green color so # 43 a047 okay so I pretty much extracted the exact color now I'll simply style the h2 tag also and let me first of all check here you can see H1 is style you can give it a font family also if you want um here I would just say font family as Apple okay so I've given the Apple font family okay looks cool right so now I'm going to come back here I just copy this paste it here this is the h2 tag and let me just give it a darkest stone color okay so here let's say that the size changes to three Ram okay and uh I want the padding from left and right also for H2 and I think everything is fine okay then guys I'm going to say that we're going to talk about our score okay so where is the score you can see that inside this we have the score okay so I'm going to talk about the score so tot score and score is pretty easy I'm going to give it a background color okay so background color hashtag uh some again some light green color okay it's like a button which you would see and Center would be showing you the score and the padding inside this from top and bottom zero left and right three RM then some border radius would be one RM okay let's see now so uh I have tried to style this but it didn't come up with let me just check here so I have given this class as score looks fine and here I have given this okay I think I need to come here I just pick this color well it's not taking the class let me just check why it's not taking the class I have given this class as uh okay uh if you come here you'll simply see that I have given this color fine next color is given here and I have given this margin I want to check one thing which is the score class score class is not added why it's not added we have given the class name fine it's the score class and then we have the span text anyways we'll see that later then guys we have the game okay we have the game so inside this game what you can see is we have a kind of six elements in rows right six rows so we have to make three cross three out of it first of all so what I'm going to do is I'm going to come here and uh I'll just do one thing okay now it works actually I used the wrong property okay it's just background not background color okay so yeah silly mistakes so now you can see that we have this one now here uh one more thing is I have the start button okay so I'll just come up here and I'll just talk about the start button so start button uh start button and you can simply see that we have this start button here okay so ID start so that's why I have written hashtag and here I'm just going to say by default display of this would be in line block and then there won't be any text decoration so text decoration would be none right now I'm going to say that there won't be any border also by default the border of the button would be gone background color for that button would be # 4 a0 okay so gfg color then text color for that would be white and uh F size would be 2 RM padding would be one RM two Ram okay cursor would become pointer and margin would be one ram okay so let's see so you can see that we have the start button simple start button okay perfect now if i h on this if i h on this I want to change suppose the opacity 2 1.8 I'm sorry to 0.8 or maybe less 0.5 let's see so if I H on this you can see that the opacity also changes perfect looks good right so you can see that this much is also done now we're going to talk about our game okay so let's talk about our game then we're going to talk about our hole and then we're going to talk about the mole okay so if I talk about the the game I'll just say first of all the board's width would be 600 pixel okay and height would be let's take it 600 pixel okay then I'm just going to say that display would be Flex okay and flex wrap would be wrap okay and margin would be Auto right and I'll just give it a background color of red for now okay and uh let's see how it looks for now so you can see that this is the board okay this is the board which we have so uh first of all you can see that it's taking more width more height actually so what I'm going to do is I'm going to give it lesser height okay so that it would adjust or else what you can do is you can make it more responsive but right right now just to keep time short I'm going to make give less height okay so let's do that so here I'm just going to say that height would be around 400 okay let's see again so you can see that yeah this is fine so now you can see that this is our game board what I want is whenever I hover on this I want my change I want to change my cursor color a cursor okay actually so cursor okay whenever I am over this I want to show a image instead of my mouse cursor okay so inside this I'm just going to pass hammer.png and here just pass Auto that means automatically it would adjust the hammer okay and that's it so let's come back here so you can see that you would see the hammer okay if you are outside you won't see that if you are here you would see that okay so that's the thing so now you have the hammer here perfect and for now I'm just going to remove the background now here I'm going to talk about the hole okay so hole would be taking this much space so Flex one okay and I'm just going to say it's going to take 33.33% of space left and right okay so top and bottom it would it would take equal space okay we're going to three create three different rows but from left and right I'm going to take 33 33 33 of a single row okay so uh this would be whole and I don't want any overflow so over flow would be hidden okay and the position of this would be relative because inside this we're going to show the mole so mole would be up and down so it's going to take related position of the hole okay so uh I'll again give it a background color of red so just to check how it looks so I'm going to come back here so you can see right now it looks like this okay uh I'll just give it a border 1 pixel solid red okay now it would look better so come back you can see that each of this is now a hole okay now you able to understand this okay so basically they are taking equivalent space there were other methods to actually do this but this is a shortcut you can use this or you can use a grid it it would do the same job okay let's come back here now uh one thing which I'm going to do is now our hole is created okay our hole is created so what I'm going to do is I'm going to say that I want to show the whole image so that it looks good so here I'm just going to say that over this I'm creating an imaginary element that's why I'm using after here I'll just say display as block okay and then background of this I want as I want as p.png okay let me just check how it looks so uh right now you can see that the image is not shown okay so I have to show the image so I'll just add the property is here so first of all I'll say that it would be shown in bottom center and no repeat so Ive added all the image properties directly okay so let's see so uh you can see that right now it's not visible why it's not visible because first of all let me just remove this okay and I want to Simply say contain also so background size property and here I'll just say contain let C still not visible I have to add more properties here so I'll just say that it's going to take uh around it it would have empty content okay and the width of that would be 100% it's going to take 100% height of that image would be 70 pixel okay and position of this would be absolute Z index would be two okay and from bottom it's going to shift to minus 30 pixel okay minus 30 pixel let's see so now you can see that this is shown because it was hidden okay so now it's visible so you can see that it looks good if you want to change it you can definitely change it you can see that it's more above but I want to hide somewhat little part okay so I'm just hiding it okay also make sure you trim down all the images to their exact sizes so you can see that there's extra space taken by this image okay so it helps right so you can see that now we have the hole okay now hole is also here now we're going to talk about the mole Deepak is saying Pooky yes Pooky uh Pooky is something else but anyways please say the definition of Pooky okay so this is something else don't say Pooky to your loved once uh if they know the definition they'll feel bad okay so sir did you teach this type of project daily yes uh usually I teach these projects once a week okay so you can just check out geek for geeks channel uh daily for different different videos but if you talking about my projects once a week I teach these type of projects usually on Saturdays or Sundays okay maybe on 11:00 p.m. uh sorry 11:00 a.m. or 700 p.m. okay sir will you upload the whole video yes this live session would be available after I end this video okay so don't worry and also you'll get the source code also of my li GitHub repository inside my GitHub repository I'm going to provide you the source code part so you can get that from my GitHub repository okay so let's come back uh I'll just create the next thing so whole is created now we need the Chua okay we need the mole okay so I'm just going to say mole and here I'll just give it first of all the background image of our mole okay so mole. PNG pretty easy right and again I would give the same property so that it's visible and it starts from bottom that's it okay and I'll just say that the background size would be 60% it would take 60% size position of that mole would be absolute from top it's going to be 100% from top and width would be 100% that means it would be below it would be below it would be not visible once I want to make the mole visible I'll simply make the mole as zero top zero and not top is 100% that means it would be inside the hole okay that means the mole won't be visible that's why top is 100% okay so now I'll just simply say height would be 100% transition would be like I'm going to say that it would be visible not visible visible not visible so I'm going to add a smooth transition so that it is not like look like a image okay so 4 second okay so uh right now you can see that since I have given top 100% so you would see something like this if I suppose remove this I'll just make it top zero let's see so you can see that you see the moles okay perfect so I'm going to make it 100% initially the mole is not visible okay so what what I'm saying is whichever hole whichever hole is active that specific mole must be visible okay suppose for example I'm saying that this whole number three is having this suppose up class okay up class so I want this mole to be visible I don't want this I don't want these okay I only want this one so how can I do that so here I'm just going to say that whichever hole okay has the up class okay whichever whole if has the up class I'm just going to say that specific mole is going to have top as zero that's it okay so now you would see that whole number three is going to have this okay pretty easy similarly I'm going to hide this with the help of JavaScript I'm going to show it here or show it here or show it here randomly okay at random places okay so we're going to do that using random function that is 1 2 3 4 5 6 numbers would be randomly called if suppose two is called I'm going to show it in the second box or third box or fourth box random random places okay so you can see that this part is also done we have done this uh UI part the CSS part is also done now let's focus on the JavaScript part okay so JavaScript part has basic things that is update the score start the game and randomly update the positions of this up class so that wherever up class is that specific mole would be visible okay and the fourth thing is click on that hit that with the hammer okay so that score is updated that's it so that's what we're going to do in the JavaScript part so let's come to the JavaScript part and I'm going to Target all the holes so I'm just going to say cons ho equals uh HS equals document dot query selector all because since we have the class name okay not the ID so I'm going to use Query selector all or you can use get element by class okay but I'm using the query selector all and here I'm just giving the class name okay now uh you can simply copy this and paste paste paste a few times now I've targeted the holes I'm also going to Target the scoreboard okay so I'm going to say that score span tag would be targeted okay then I'm going to say moles would be targeted so m o o l e okay moles would be targeted then I'm going to say that the start stop button would be targeted so hasht # r t okay and since there's only one ID so I'm going to write it like this okay so you can see I targeted all of these okay fine looks good and uh also there are only there is only one score so all is all doesn't matter if there are multiple divisions then only you have to mention all so that it's clearity in mind okay so it there is only one score class there's only one start ID so all doesn't need here okay all is needed when there are multiple ID ID s or multiple classes okay so here I'm just going to say that we're going to have some variables here so last hole okay and let time up why do we need last hole because suppose JavaScript ragom function generates last hole as three again JavaScript random function accidentally generated last hole as three so you're going to say they are same okay so instead of this three I'm going to again call the random function until it generates something else okay so that mole is shown in some other place right so that you don't need to hit in one single place you would get random places okay so time up would be false so it's like when the game would start it would be false later on when game Game Stops in 10 20 seconds okay we'll set the timer I would make this true and I'll stop the game and I'll give the restart button okay so here I'll just say let score equals z initially okay that's it now guys I'm going to create a function okay so I'll just create a function named as start game okay so this function would be called so initially I'm going to say that scoreboard do content okay initially the scoreboard content okay actually the text content would be zero that mean initially the scoreboard would be showing zero suppose if I make it this so let me just come back here and uh initially when I click on this you can see initially the score changes okay so what I mean is initially the score would be zero right I want the score as zero getting in your mind right so now I'm going to say that initially the time up would be false why am I doing this because suppose last time when I was playing the game the score was 10,000 I'm restarting the game at restart also this function is called whenever you restart you're again going to set the score as zero okay that's it so again you're going to make time up as false again you're going to make the score as zero that's it this is the text of the uh HTML part this is the JavaScript variable these are the JavaScript variables don't get confused okay so this is I'm targeting the HTML this is the JavaScript variable to be maintained here for reference okay so now here we have the score as zero time of as zero also what I'm going to is do is whenever I start the game so what I'm going to do is button the start stop button so button do style do visibility style dot visibility equals visible okay visible so now you can see that whatever button you have targeted it will would simply be visible or hidden so initially it was I'm sorry I have to make it hidden initially it was visible once you start the game I want to hide the button okay so once you click on this you can see button is hidden okay so that's what I wanted I want to hide the button so I've hidden the button okay that's it now I am going to call different different functions what function so first of all I want the mole to be visible in random holes random holes so for that I'm going to create a function known as peep okay so inside peep function I'm going to decide in which hole the mole would be shown that means which hole is going to have the up class that's it so here inside this I'm just going to say that const at what time by the way so I'm just going to say random time I'm going to pick some random time so sometimes the mole would be visible fast sometimes the mole would be visible slowly okay so that the game becomes interesting so I'm going to create a function named as random time okay and here I'm going to provide 200,000 okay so let's talk about the random time function so this function is going to give me random time that's it so Random time I'm going to Simply say that minimum value would be provided and max value would be provided okay so max value would be 1,000 minimum would be 200 so this is in milliseconds okay this is in millisecond not seconds okay so in 200 millisecond or 1,000 millisecond in any any time between this the mole would be visible so that sometimes the mole would be really slow sometimes it would be really fast okay like that so that's what I'm going to decide here so I'm just going to uh give random value from here so return return any random value from M and Max so I'm just going to say math do round okay math. round math. random okay I'm just going to say anywhere between Min and Max okay and obviously difference between Min and Max is taken suppose difference between Min and Max is 800 okay so I'm saying pick any number between uh from uh any number between 800 so 700 would be taken okay so 700 plus Min obviously because you have to get a number greater than Min okay so 700 plus Min that means means uh your number would be 900 okay that's it right so you can see that that's how it you would get the random number from here so you get the random time random time it would be visible or it would be visible fast okay so you got the random time either you would get 200 millisecond or you would get 500 millisecond or you would get 900 millisecond so that's up to you okay so Random time now you got the random time here you're just going to say you're going to get the hole also so you're going to get the random hole okay so at random hole you want to show the mole right so you're going to get the random hole from Holes you're going to provide random holes so here I'll just get some random hole okay so Random hole here you want to get the holes okay you got all the holes and from that you're going to pick the random hole so I'm just going to say const ID X you're going to get the random index okay so I'm going to say math do PL okay I'm just going to say get a math. random number random number from Holes do length so it's going to give me so holes length is what holes length is six okay so we have six classes which have whole class name okay so you can see that we have six six classes right so we get the length of this as six and you would get a number between 0 to 6 okay 0 to 6 okay so you're going to get that index cons holes and you're going to get that specific hole you're going to get that specific hole with the help of index okay so once you get that index so you're just going to say if whole equals equals equals last hole that means if third hole is appeared just now just after this again third hole is appeared so why would hand come again in the same hole since you want some other hole next time so what are you going to say since the hole is repeated I don't want it to be repeated just pick some other index okay so you're just going to say return some other index so so again just call random whole function and holes okay so what I want is I don't want the index to be same I don't want to come up here and again come up here I don't want that once this is done I want some other index okay I want some other index so that's what I said I want some other index okay if repeats and one more thing is last hole would be this hole so that you can keep record in this case Okay in this case so last hole must be matching must be equal to the hole so I'm making it equal to the whole current hole so that next time when I get other hole I would check is this the same of my previous hole no if no then that's fine but if it's same of my previous hole I don't want this index I want some other index okay so that hamster doesn't appear on the same hole again and again okay I mean once it's done next time just after this okay any other time it can be done but just after this I don't want the same hole okay I want some other hole then again if I come back then that's fine okay so this is it and one more thing is I want to return that specific hole which I got okay so return that specific hole which I got right so you got that specific hole some random specific hole okay you got this what I want is in that specific hole okay in that specific hole so class list do add up up class okay so I have added the up class right so I'm just going to say set time out so here guys what I'm going to say is you got the random time right so from the random time once the random time is done okay once the random time is done I want to hide this okay so once the random time is done I want to hide this so class list do remove so again after 600 millisecond or after 200 millisecond or after 9900 millisecond at random times this would be hidden okay so it would be visible suddenly it became hidden okay or it would be visible after a few milliseconds it would be hidden okay sometimes it would be hidden fast sometimes it would be hidden slowly okay so that's what it does so at some random time which we generated from here I'm just hiding it okay so either it would be hidden fast or it would be hidden slow okay so if time is not there sorry if time is not up okay if time is not up okay again I'm going to call peep function okay if time is not up again I'm going to call PE function to get another hole to get another hole to get another hole okay so if time is not up again I'm going to call the peep function that's it so game is going to run on and on and on and on once the game is complete now how the game would be complete so it's pretty easy you're just going to say that first of all the P function would be called for the first first time right and next time automatically peep function would call itself if time is not over okay so I'm just going to say that till when the game would run so I'm just going to say set time out and let's uh say that the game would run till 20 seconds so you just need to write 20,000 here in milliseconds okay and here I'm just going to say that scoreboard I'm sorry uh the time up would be true once this is complete the time up would be true okay once 20 seconds would be complete time up would be true and button do internal HTML would become restart okay restart and uh the visibility would be visible okay so visibility would be v i s i b e okay so let's take 5,000 milliseconds for now that means 5 seconds for now okay that's it right now you can see that the mole would be visible but I haven't hit it I haven't added the hit function that means bong function so I'm going to add that but first of all let me check okay so if I uh okay by default I don't want this up class anywhere okay it would be used it would be given randomly okay so if I just save this uh now I'm going to come back here and refresh now if I click on start so you can see it's visible random so you can see sometimes it's fast sometimes it's slow okay so you can see that it's coming randomly and once 20 seconds or whatever seconds you have mentioned are over you would see the restart button so once you click restart again the game starts but now I have to call the hit function okay the hit function is not working so I have to call the hit function okay so how can I make the hit function work so it's pretty easy what you're going to do is you're just going to call an event listen now okay so I'm just going to say on the moles okay for each okay for each mole okay for all the six I'm going to add an event list now okay so mole mole do add event listener okay so I'm going to say whenever I click on any mole okay I'm just going to call the bong function cu the bong function is basically the head function so let's create this so function which is bong function okay here I'm going to get the element which I have have hited on okay so uh there's one property if e do is not trust it then don't do anything that means if you haven't if if you have clicked at any random area okay which is not allowed then just written don't run this function but if you are allowed then that's fine and by default it's allowed only okay so I'm going to say that score would be incremented okay of that specific area okay and and uh I'm just going to say this dot class list do remove up okay remove up remember one thing I'm not targeting the whole I'm targeting the mole so mole if mole is visible then only you can call the Bon function right if mole is not visible you can't click on the Bonk so it won't run this function won't run okay so yeah just make sure you call it on the Bonk the Bon would be called on the mole not on the whole okay so yes here I'm just going to say that scoreboard uh scoreboard. text content would become equal to score so now I have updated the score also I've updated the score also so I've updated the score and updated the text okay so that's it let's check it now so now I'm going to go to the project and let's refresh first now if I click on this so you can see uh so you can see that I'm able to play this game okay so the game is now complete you can see that the game is game was pretty simple I've completed the game and this is it this is it this is what we wanted to build now right so I can actually give it an image also let me just give it some okay anyways anyways looks good so you can see that uh I have this game completed I don't need anything else I'm going to upload this source code I've uploaded uh the images also now I'm going to upload the source code also okay so let's do that so I'm going to create a GitHub repository for that I'm going to show you that in the same time so let me just open my GitHub account GitHub account and uh I'll just create a new repository I'll just call this as V Moore gfg okay and I'll just create a repository and I'm going to upload my source code so now guys the source code is also uploaded okay it's available in my GitHub repository what you need to do is you just need to uh go to this GitHub repository what you can do is you can just go to this GitHub profile github.com SLV AJ 014 this is my get profile you can also follow me here okay you can check out my social also to in this GitHub profile just go to the repositories and here you would get the code vam uncore gfg you can just go inside this and you'll get the complete source code what you need to do is you can just clone it or you can download the code okay so you'll get all the images as well as the source code right so guys I hope you enjoyed the session and if you want such kind of projects so do hit that like button and also suggest me in the comment section what kind of projects you want uh what kind of other games you want JavaScript games you want these beginner friendly projects actually help a lot beginners to actually understand web development in pretty easy steps right so that's it for today I will see you in the next one till then see have a good day