Javascript Pong Game: Scores and Game Over

I need to make a game over a devil when we score the cheer plays when it's ended we go to something called cheer / cheer / tells the warning to play that the beep-beep-beep there's something else that's causing it to play over and over and over again the ball being off the screen that's causing that when the ball goes off the screen one of the things we want to do is stop the ball that's one look inside this bright red scores if the ball is off the screen to the right side what we need to do is stop the ball and put it somewhere else we want to put it at minus 1,000 and park it because we've handled for that here in my red scored we are gonna park the ball same with in the blue scored into the utilities and the red scored we are gonna park the bottom I'll make a function called Park balls that function all it's going to do is the balls position is gonna be set to negative 1000 its exposition is a bigot of 1000 and all DX and dy is set to 0 okay see if that works [Music] that totally works that cheer is working we need to make a div that says game over when the game is won check to see if we want if red has just scored let's check if it's one if Fred score is greater than the maximum minus one then red has one so we need two let's make a maximum score up here we already have a max it's two if red score is greater than the maximum score minus one then we win same thing for the boost learn part with the ball if the blue scores greater than a score then we will go to a function called rim cheer do the other cheer so cheer - that's what your to top play cheer - is the other chair when the cheer - is over we need to go to a game over function show to add eventlistener ended and it's gonna be we're gonna go to game over we need to make a function call the game over and in the game over you we're gonna play the game over sound and we're gonna show a game over a bit either to have another sound just copy all of this stuff game over audio source is gonna be sounds game over do we need an event listener for that you know in the game over we're gonna make a div up here we have a game over and we have a game over sound yeah you can't have a variable with the same name as a function we had that error last time in our game over function we're gonna play game over and we are going to show the game over div we have dibs up here so I'm just gonna pop that code gonna say display it's block let's also put the let's put our start div let's make that up here as well we need to make that game over dev inside the game HTML I'm gonna make a new dev collared game over it so some text inside it came over div game over dev inside the div we're gonna put some text will be inside a little paragraph and the paragraph would be game ID equals quotes aim over text be game over that's close div then in our CSS you should tell the game over div to be invisible at first and to be a certain size and to have the text be colorized the text and everything in our CSS wanna make a game over do the display on the font size or make it super big font size will be let's try 34 now the color will be red let's see it Russ back into the HTML let's say they kept dropping the ball even though the game was supposed to be over so we need to fix that back into utilities on the game over but your two should play or else she score was that the max it was playing both chairs we're gonna play one shoe or the other the same for the red in the CSS let's make the font sixty let's make the position:absolute let's make the top I'm gonna make the game over as soon as somebody scores one goals we don't have to wait around so long back into the utilities our max score this one so that's a good spot for it like in terms of the height maybe gonna move it over it's at 100 pixels so 200 maybe 300 let's try 300 and see what happens and maybe move it down a little bit the CSS left maybe 300 let's build in our blue score in red score back into the HTML I'll make a div for the blue score D will be blues or if we'll make a red score Dave as well in that div will make a little paragraph it will be my blue score zero therefore now here for the red score I'm gonna do the same thing in our scored functions we need to tell the blue score to become whatever it is that score to become whatever they are in the utilities in our red score you want to change our scores because it's a paragraph we have to use an inner HTML to do that document can tell me by ID red score Don innerhtml is equal to whatever the red score is do the same thing for the blue score that out of work the only thing is in the CSS let's go into the CSS and tell it where to go and what to be so we've got a blue scored a of a red score down in the CSS and I make a blue score give let's turn this into a common hash tag blue score div position:absolute display is block our font size let's see what that is our color should be blue the position should be let's say zero from the top 100 pixels in the other one is gonna be zero from the top save that and refresh it works our blue score in a red score will show up right away and they don't the blue score isn't there let's see why blue score rocks I have blue score twice it's really wide it should be the red score then refresh there's our blue score there's a red score excellent ok let's see if it changes when someone scores ok I need to raise that a little bit higher and move it just a little bit back it seems to be working fine the wrong person got the pointer or the red oh okay the red should be on this side the blue should go to the site let's fix that the GAMEOVER div we're just gonna raise it a little bit higher maybe 270 and a little bit back so 250 let's try that and I put the blue score in the wrong spot so this should be at 700 and this one should be at 100 let's try that let's try setting the score to 2 just because I want to see what happens when you score without winning the utilities we're gonna make the maximum score to run that I just thought of something else we have to also reset the score that's perfect but notice when you press Start this is an issue when you press Start the score should reset to zero it's not going to yet oh and I can't press Start because it is underneath this div there's two things we can do we can move the div or we can tell the start button to be at a higher level and that's what I'm gonna do to fix it in the CSS our Start tips right here I can give it a higher set index on the GAMEOVER div I can just say that index is 10 give the game over div start index 1 yep all right but doesn't reset the scores let's go and fix that to reset the scores and utilities when you press the start play we're gonna make the read score equal to zero in the blue scored equal to zero change my maximum score to five and right I've been the game over perfect we press dart that you should go back to zero hold on a sec we set the scores to zero but they don't change we have to implement the change here in the start who set the scores to zero but we don't actually change the tack with in innerhtml and just do that for both med school and blue score now we can set them equal to zero but these guys are already zero that is the game let's try it one more time [Music] [Music] and if we press start should set them both to zero and there we go and that's the game have a good day

Channel: G Scruton

Views: 27

Keywords: Javascript, Game Programming, Greg Scruton

Id: WZ3FcKvipFM

Length: 12min 18sec (738 seconds)

Published: Thu Feb 06 2020