Hey, welcome back.
Now all of the fun begins because we get to code JavaScript.
I've also adjusted my container height to 400 pics, so fits better with my small screen here on the
right hand side.
So going into the indexed HTML, we're going to write the JavaScript within the script.
The first thing we want to do is select our main container so that we can access it and utilize it within
our code.
So doing document and using query selector, there's a number of different ways that you can make your
selection of the element.
And in this case we can use query selector, selecting it by the class and selecting the element with
the class of container.
So just refresh.
And usually the way that I like to do that is just to make sure that I did get the container properly.
So it does look like I have the container within the container object.
Also, we need to get its dimensions.
So this is an option that we're going to also make use of the width and the height so it can make it
more dynamic.
So taking that container object that we just created, we're going to apply a method called get bounding
client rectangle.
And this is going to give us the height and width and all the dimensions that we need.
So I'm going to just call it Con Dem, so we'll refresh and I'll put the values of Con Dem and this
is going to be within an object format so we can select any one of these properties, such as bottom
height, left, right, top width by doing corne dem daudt with top rate left.
So all of these are now available to us that we can use in our coding when we make some calculations
for where we need to position different elements as well as where off screen is and so on.
So we need all of this information.
So next, let's create some elements and we need one game over element.
And this is going to be where we can start the game as well as what's going to show when the game is
over.
So using crit element, this is a div.
Just go ahead and create a div.
So we've got that game over object and we haven't added to the picture.
We need to still add a few other things, but we've got an empty div.
It's not anywhere on the it's we haven't added it to the page quite yet.
Let's add in some content into here.
So text content and for now we'll type in start game and we might want to change this throughout the
game.
So if we want to add in a class, if we have a particular styling, we could do that at this point as
well.
And I'm going to do as much as possible with JavaScript.
So sometimes this is the longer way to do this.
But of course this is a JavaScript course.
So we're going to take the longer route and create all of the style attributes.
So positioning it absolute and game over again.
So game over style, adding in the color and the color that we want for the font is white and the next
one that we want to do is set the line height.
So this will allow us to position content in the middle.
So make it really big.
We'll make it at 300 pics.
We also have text aligned and that can be Sunter so we can center the text content.
There's also font size that we need to apply.
So font size and I'll make this fairly big as well.
So three M you can also transform.
So text transform is another option and we'll transform it to uppercase.
So no, we've got quite a bit of stuff going on there.
I'm going to add it to the page so that we can see as we're building it out.
So container append child and the child that we want to append is that game over div that we've just
created.
So let's refresh and see what it looks like.
So we've got our start game there and we also should add a background color so that we can actually
see it.
So make this red.
So try that one more time.
So there we've got we've got our start game also let's adjust some width to it.
So sometimes this is easier to actually put it on the page and then add in the styling.
So again, refresh.
And once you've got it to how you want it, then you're ready to move along and the other elements.
So right now, I think this is pretty good.
We've got start game.
We've got a nice big clickable area to start the game.
So let's think and this one we're going to add in an event listener to it.
So add event, listener and event that we're going to listen for is click.
And when it gets clicked, then we're going to run a function called Start Game.
And so for now, this is just going to be a placeholder function.
So go down at the bottom and create that function.
It's not going to do anything yet.
Will output into the console and just to make sure that everything is working properly, we start game,
we get started in the console.
So that's what we want it.
There's a few other things that we need to add in, a few other elements that we want to add in before
we complete this lesson.
So a lot of it is going to be very similar where we're going to add in another element.
So we've got the game over start button and we're going to have to create a ball and this is going to
be the game play ball that's going to move around, that the player's going to hit and it's going to
move and hit the blocks and remove the blocks and so on.
So instead of Querrey selector, because we don't have that element we use, we need to use crit element.
And this gives us together the ability to create the element in this case.
Let's create another div selecting the ball object just as we did the game over element.
And first let's set the position.
So we're going to set the position.
To absolute and this one's not going to be as complex as the game over, but somewhere down the line,
I do want to add it to the main container.
So selecting the container, we're going to spend a child and the child that we're going to spend is
going to be ball.
So we're able to see it.
And also, I'm going to update the container background color to be slightly darker color.
So said it to a dark gray.
And so we refresh.
So that will give us the ability to see the ball.
So going back in and we've appended the ball, but we don't have anything quite yet happening on the
ball.
So ball style again and we can set a width of that.
So this one is going to be relatively small and you can adjust this as needed, of course.
So we've got a width, we have a height for the ball.
And this is going to be, again, the same 20 picks and can't see anything yet.
Let's do a ball background color and we're also going to attach an image to this ball will make it a
tennis ball.
So it'll be kind of neat.
So without the image, it'll just be a white ball.
So we've got doesn't actually look like a ball at square.
So we need to take care of that.
Of course we need to apply border radius and border radius is what rounds it in CSFs, if you're familiar
with Cassus so it can do 25 Pich border radius.
Let's refresh.
So now we've got a ball.
Next thing we want to do I do have you URL that I do have within here where I've got a PNG image that's
a ball.
So let's attach that one to our image.
And again, that's the same thing where we're applying and updating the style attribute the color.
We can set a background image and the format for the background image is again, you quarter around
the value and then we specify that we're going to ball PMG and refresh and that should attach the tennis
ball in there.
And this image is slightly bigger.
So I want to center this as well.
And the way to do that, we can do the ball style again.
So I know we're setting quite a bit of style here and background size is the one that we're looking
for.
So we're setting the height and width.
So 20 picks by 20 picks and now we've got more of a tennis ball.
It's all there, sitting there within the tennis ball.
And that's just the PMG file that I have there.
So that's where that's coming from.
And if this is optional, you don't have to make it a tennis ball unless you want.
But it's always good practice.
Become very familiar with what you can do with the style and all the different options that you have
with in style and also maybe by default.
We want to take the ball once we've built it and we've created the way that we want to look, we're
going to play display none.
And then once the game starts, then we're going to show the ball, because it doesn't make a lot of
sense that the ball would be sitting there on top of the start game.
So that would be kind of confusing for the user.
So let's hide that and we can also position the ball.
And this is also going to get dynamically adjusted.
But it's always good to just have a starting position.
So this can be pretty much anything we want are going to set it to 70 percent and ball style and left
position.
This one can again be anything that we want because we are going to be setting this dynamically using
JavaScript.
So now we've got our ball.
We're all ready to go with the ball.
When I refresh it, it should be gone.
We've got display not and we have one more element that we want to create.
And I know we've gotten lots of practice in this lesson, creating elements and updating their style
attributes.
So it's always good practice.
And I do promise you, this is the last one.
I'm going to go super quick on this one, creating the element, because a lot of this is going to be
a repeat and you are welcome to try this on your own afterwards and just make some style adjustments,
get used to all the different options that you have when you create an element and styling them all
using JavaScript.
So again, doing the style and we can add in.
So if we had any success styles, we could add them in here as well.
But we don't have anything.
We're doing this all with JavaScript.
So first thing we want to do is set its position and its position, just like the other ones is going
to be absolute again, append it to the container so that we can see it as we're developing it.
So that's paddle as the object.
Let's update some of the other position, the other properties.
So it's part of style and of course, background color.
So set it to white height and we're going to set height to twenty picks, setting with two hundred and
fifty picks on a rounded a little bit so border radius and we'll position it at bottom position and
also a left position.
So we have a horizontal and we can center it.
So 50 percent.
So let's see what that looks like.
So do a refresh.
So there's our paddle and we are all ready to go.
Maybe we want to make it smaller so it doesn't matter and you can adjust these as needed to improve
the gameplay.
So for this case, it does look like the paddle was rather large.
Let's set it to one hundred pics so we can always adjust this afterwards.
So go ahead and try this out, create a few elements, create the game over the ball and the paddle,
and you can be ready to move on to the next part.
Where?
Going to make some action, something happen with this game, so that's still to come.