Ep56 - Vanilla JavaScript Fall Ball Game for Beginners

all right in this video we are going to see how to create this gravity fall game using html css and javascript as you see we have to make this ball fall over the hole and if the ball touches 0 you will get the score and your game is over fine to start along i'll leave the source code in the description so that you can start along with me in case if you're stuck you can copy paste anytime and as you see these are the steps which we are going to create on the process this looks heavy but uh compared to other work this is really very simple work the game is very simple to create fine now i'm choosing the same folder which i have already files which i have already created it we don't need this break i was testing with it fine now let's start creating three documents the first one is html we'll save this as demo dot html and the next thing we need is style demo dot css and the third thing is demo dot js now let's include all the files the first one is demo.css and then we have script demo.js cool now we just need two lines of so two sections in the html the first one is uh let's have a game div and then we need character that's it and we directly have to get into these css just for our understanding let's remove all the marginal padding given by chrome padding zero margin zero and then let's have the box sizing as border box we are just saying that consider the width till the border don't consider the outline and margin that's what we are saying you can have a quick google search to know more about this now we need to have body we need to have we already have a body as our html tag we have to give width 100 vertical width height 100 vertical height viewport height and then we can give the background color has somewhat blackish cool now let's see how does this looks as you know we have given the name as demo.html so this is how it looks now directly get into the game div so we need to give the width of 400 pixel let the height be 500 pixels you have to note the width and height because everything is all about calculation when it comes to game now let's have the background color of white i want to place this at the center horizontal center so you can give margin auto top and bottom 0 left and right auto now we can see it the game is horizontally centered and i'm not going to have this text it's just to say that we are at the 56 project cool now in case if you want you can add the border and make the game more attractive we are more focused on vanilla javascript so i'm just having the design very minimum and then we have correct character let's copy paste the text doing doing three things at a time i'm not used to it great now we need to fix the width let's make the width as 20 pixel let's have the height of 20 pixel we have to make the color as red let's make this a circle so border radius 50 percentage will make this as a pure circle to make the border radius work you have to give the weight and height as similar same now let's place this cube position relative and from the top i want it to be 440 pixel since the height is 500 then the left i want it to be at the center as we know the width is 400 400 half is 200 i'm giving 200 cool now for now we can get into the javascript let's call the two divs which we have created in html document dot since we have given id we can directly call document element by id and it's game and then we have character we can use the declaration cool now when i press i want to know which keyboard which keyboard key i have pressed so for that document dot add event listener key down that means it will show you which which key you have pressed so to get that the credit we have to pass e e in the form of event in the form of e so we can get console dot lock e dot key will give you the key which you have pressed refresh it and inspect let's go to the console click on some keyword you can see i'm let me refresh it again i'm pressing the up right bottom left arrows now these are the values now as you got the values we have to just use the condition if e dot key is equal to arrow left and another function sorry another condition for right arrow key you can simply copy paste it it's not camel case cool once this is happening we have to call a function move left and move right we have to define this let's define the move left function move left so let's have an alert to check you clicked left arrow refresh it click the left arrow you see you click the left arrow now this function is running now what we need to do is we have to get the position of this character so when it comes to animation you have to we have all we need to always use this function window dot get computed style and here we want the position of character since we have to pass the javascript variable inside you can see this character is coming from this line and as you know this line is simply the html uh character div now we want the property get property value which is top so we have we can name this variable as character top and let's find this once we this would be we have to convert this into flow integer so we have a function in javascript percent now get the character find the top and append character top to it and we have to give pixel as you know this is how we would give values to the top let me go move right is not defined so the same way okay we have to do one more thing we have to plus we have to add a two pixel sorry we have we need to move to the left so it would be subtraction of two pixel let's okay it is going to it is going at the top we have to give left refresh it click on left okay not to worry we'll we have one more trick to perform so set interval i want it to run on every millisecond and the function you have to pass now let's try clicking it let's define the move right as well copy paste the same thing it's move right again we have to add as you see i have made the mistake it's need to be it need to be left and character x position we can give any name character x position so the reason for moving to the top is because you can you have given let me remove this and show you let's click left it's running every millisecond your variable is wrong it says yes you have to pass this over here click left you see it is going in the right direction cool let's have this one more time and change the function name to move right let's call this inside the right condition right arrow condition sorry arrow right on button press cool now since we have to add this since we need to go on the right side let's click on right move right is not defined we haven't copied the function name so let's have a condition as well now this is 0 and this is 400 so do not work if character position is less than zero the other end it should not be greater than 400 as i said the width of the container is 400 refresh it click once click refresh it click the left arrow not working let's check why okay the condition is wrong if it is greater than 0 then subtract minus 2 if it is less than 400 then add plus 2 cool right button left button right button as you know as you see you have to make this uh 380 400 minus 20 380 now if i click left and right button at the same time it will give an error let me click and show you if i click left and then right you can see it is some it is the both the set interval is running at the same time that's the reason it is making this kind of work so let's define the keyword called both and let's make this zero so if both is zero then make this work at the same time increment the both to plus plus so we have to stop this interval as well character move and once i release the key once i release the key i want the animation to stop the set interval to stop so key up function secure p1 will do that work clear interval and on key up i want the both value to be zero now this would work character move is not defined let's define it on the top let cool now you can see if i leave it is going to the animation is animation will stop cool now let's get into the next work i think we have completed the first one all right now let's start creating the blocks and hole by using javascript now let's create two div so with the help of document dot create element let's name this device block and one more div as whole and this block need to have idn class so block.set attribute set attribute function attribute attribute we need we are passing class value as let's name this as block itself and let's pass the id also block as technically we need to make id unique i'll pass counter variable in a second let's do the same for whole as well now let's append this block to the game game dot append child the same way append the whole to the game we have we can see it on the console but you won't see it on the javascript you can see class hole id let's make this let's design this so that we can visually see on the browser so the class is block and then we have hole the height is going to be 20 pixel the width is going to be 400 pixels that means the width of the container and background color let's make this black now you can see let's do the same thing for the whole we have to make this white background let's refresh the white one you won't be able to see let's make the screen we don't want the hole to be this big let's make this width to be 40 now we want this hole to be on top of block so margin top minus 20 pixel let's skew this minus 20 pixel to this as well block as well cool now block contains the hole it doesn't actually contain the hole but if we see from the browser it does look like this now what we need to do is we have to make the whole randomly random position we have to make the whole position random that means it can be any position on over the block so for that so let's have random let's have a random variable a variable name called random position math dot random function will generate random function random values and i want it till 360. i've got a call cool now i want the random value from 0 to 360. 360 is because we have the container with 400 container width minus the width of the hole is 360 that's the reason now we would be getting the decimal value so i want the without decimal value so math.floor will do the work now we have we get we got the radar position let's get the whole style dot left equal to a random position plus pixel let's refresh this you're not getting it whole dot style dot left let's pick the hole or 235 refresh it to 26 218 okay to make this work you have to give position relative now you can see we are able to on each refresh the position is getting changed well that works as we thought let me give the position relative to this as well and let's make this top of 100 pixel see to this let me refresh it refresh refresh now i don't want to refresh each time let's make this inside set interval function set interval that will run every one millisecond technically it should run every one millisecond just for freeing the browser memory let's make this 100 millisecond if i refresh every 100 millisecond you can see there is a random generator div you can see there are many div which will be generated every 100 milliseconds we don't want this cool i think the first part is done second third part is done we just missed one value we need to get the counter we need to create a counter variable let counter equal to zero let's call this counter and append this as in the form of id refresh it you can see counter is not getting cremated to increment it make this plus plus well that's working on each id so let's get into the fourth step we want the uh we want the block to move so for that we have to know the previously appended uh block now one two three four five six so we got this number with the help of counter so to know the previous value we just have to get the block so document dot get element by id we know the id starts with the value block and then we have counter to it so to get the previous value just add minus one so we'll name this previous block the same hole previous hole now with since we got the previous element we need to get the top position of the block and the hole so let's get the top position we know we have already used get computer styles we are used to it blocks top position and the holes top position sorry top store this into a variable called previous block top the same way we have to use let or else we'll get unexpected error cool now previous whole top we haven't used those two values that's the reason why it's showing in different color so we want this to run only when the counter value is greater than zero and now get the hole so you get the block block dot style dot top equal to previous position plus 100 pixel so to make this run we have to make the same for the whole position as well hold top position previous whole top coal let's see what we are getting getting an error previous block top is not defined let's try setting this value to zero for both the value it says it's not defined let's start let's just define with zero and check yeah now we got it i just removed the declaration from here and started with zero now you can see it is able to it it is adding 100 pixel uh top then the previous one now i want this to run only if the position is let's let it let's create a condition first we have to check if the top position of the block is less than 400 then run if it is greater than 400 then don't run that means it will be 500 it will be out of the out of this our game container cool and let's add a counter and condition for counter counter should be zero so this part is also done let's move let's focus on uh pushing our blocks uh pushing our block to the top on 0.5 second every 0.5 second all right now let's make the whole move so before that let's just design the hole as white and get the character and add the z index as some value higher cool now let's create an array we can name this array as counter array and i want to push the counter value inside this array and we have to get individual value individual block so to access the integer block we can use this counter array and run for loop variable i equal to 0 i is going to start from counter length then increment the value of i and let's access the value counter array individually and store it into a value called current as you know we would be getting individual blocks to get the individual blocks document dot get element by id we have given the ids block then pass the current so this is current block let's get the current hole as well hole current hole continue cool now we need to get the position of the block current block top position and store it as current block top now we need to give this current block position since the set interval is running dot style dot top equal to current top position minus 0.5 plus pixel we can use sparse float now let's see it should go yeah it's going but let's make this as one millisecond the hole is not running let's make the whole position also the same way current whole and cool now finally we are we made this now it's just a drop function we have to use sorry not a drop function or drop logic if the wall touches the hole then we need to create a variable called drop if uh ball touches the whole wall then the drop is going to be zero if the hall if the ball does not touch the hole then it then we need to increment the drop let me show you the logic so before the logic we have to optimize this if i see we have a lot of blocks we need to remove the block once it goes away from the section once let's for that what we need to do is we have to simply remove if the current block reaches the top then get remove the counter array remove the block remove the div so you hold dew and block tube and cool now if you see two three it will be four that means four is at the top five is at the top so once it reaches above the game div it is getting removed fine that's working again inside the for loop we are having a logic if it touches if the hole so before that we need to get the character top and character left just above the for loop let's define the character top position character left position and let's define the drop once these are defined we are just checking if the current block and the character top are at the same position if both touches then we have to make the drop plus and if the character and character and the whole are in the same line same position then we have to make the drop zero then if if the drop is zero then we have to make the character move to the top if the character if the drop is not zero if it is incrementing then it should go with the flow of the block let's see there's an error we have not defined the left position of the hole so let's define the left position of the hole cool now we got it now it's just once it touches the roof we have to give the game over we need to make the game over and we have to stop the interval so the interval is over here let's have this cool now let's see let's wait till the ball touches the roof and game over one score two block three block four block five block six so the game score should be six fine that's all for this video thank you so much for listening

Channel: UI MONK

Views: 70

Keywords: Fall Ball Game, Vanilla JavaScript

Id: BdEzZXzrWjo

Length: 35min 24sec (2124 seconds)

Published: Sun Oct 24 2021