Hello and welcome back.
In this lesson, we're going to attach an event listener to the start button.
We're also going to play some styling and then get the bounding back box, setting up our variables
that we're going to need in the upcoming lessons in order to produce our gameplay so our global variables
that we're going to use.
So first of all, let's select our button objects.
This is the one that we connected to the element with the class of start button.
We're going to add an event listener, the event listener that we're adding in is a click.
So whenever the button gets clicked, we're going to invoke a function and that function is going to
be called start talking and we'll create a placeholder for that.
So whenever that gets clicked, the game starts.
And then this is where we can set up and do all of our parameters in order to start the game.
And I'll just put a console message in here so that we can check to make sure that it is working.
There's also a few other variables that I did want to add in and one of them that I wanted to set up.
So some global variables that we're going to utilize.
And I want to set up one that has the container dimensions as we're going to need to know, and we want
to make this application as flexible as possible.
And all of our gameplay is happening within the element, what, the class of container.
So I want to select that element.
And we already have it within an object format.
And you're going to use a function called get bounding client rectangle.
This is a method and it's a really useful one.
And I'll show you what this is going to do.
So when I type in that container, demn you're going to see that I get the dimensions of it.
So I get some useful information, I get the bottom position, the height, the left, the right, the
top, the width, the X and the Y coordinates.
So I've got all of these useful pieces of information that I can utilize.
I know where it's located, I know how, how, what its height is, how wide it is and it's also where
it's located.
So we can utilize this as we're setting up the boundaries.
And we don't want any of the player to we don't want the player to leave the boundaries of the containing
object as well as we don't want the aliens to leave that container either.
Also, we're going to set up a global object.
We can call that player.
So this is where we can store all of the useful player information so you can store things like score
so we can have our starting score value there.
And this is an object so we can place as much information as possible as we need.
There's also a speed variable that we want to maybe change and update.
There's also the game status.
So checking to see if it's over or not.
So if it's game over so the game won't run when we start the game, that we're going to turn that to
false.
So the game is going to be in progress.
There's also the fire.
So this is going to be false.
And basically it means that we have no projectile speed and we want the alien speed to be different
and not coupled to the speed of the player and the speed of the players, how many pixels the player
is going to be able to move.
So now we've got that information in and there's not a whole lot.
You can always output it and you can see the object structure in the console.
Also, we want it to apply some styling.
And one of them, the styles that I had it in here is PIDE.
And this one we're going to use and add it into elements and remove it from elements where we want to
hide.
And so various elements and all this is going to be contained within here is going to be displayed none.
So whenever this is applied, whenever that class is applied, we're not going to see it.
It's just going to display it as none.
We can also set our container area.
So now that we've got the main game object so we can set this, so we can also make a dynamic if we
want.
So maybe a width of eighty percent and to a height of six hundred pixel, maybe we want it always to
be the same height and you can adjust these as needed.
So there's margin left and if my width is 80 percent, my margin left is ten.
So that's going to roughly center it.
Also maybe we want to set a background color to this and I'll set it as black so that we can distinguish
where it's located and we can add a border for one or two and also overflow.
I usually like to hide the overflow in the game so that we don't run out of our screen area.
So this is basically where our gameplay is going to take place and I'm going to adjust the sizing to
be adjusted to be one hundred percent.
And we can also play with the height as well.
So we could also set that to be eighty percent.
So that's completely dynamic.
And as I shrink it, our height will shrink as well.
So we can utilize this.
And now whenever I pull out, if I go into the console now and if I get the container dimensions, we
can see that they're adjusting accordingly.
And so this is going to be very useful as we're calculating out and we want to make this application
as dynamic as possible.
So we want to be able to move things around.
Let's also add in a few other options as we're building the styles.
So for the start button, make this look more like a button.
And I'm going to really be doing a very quick styling here.
And of course, you can style as needed as it's not going to affect any of the gameplay set, color,
background, color.
So let's see what that looks like.
So start game button is all the way across.
So now we have our start game option.
Let's also add some styling for the ship.
So this is going to be the player's ship and what they're going to be moving on the screen.
And this one we need to position absolute.
So that gives us the ability to set the position of where it's located on the screen so we can set a
left position and we can also set a top position.
And in this case, we're going to use the bottom so that it's coming off of the bottom of our main container
area.
Also a background color of whites.
So we've got some good contrast between that.
And then we need to define its width and its height.
And I'm going to set this more dynamically.
So we'll set it like that and then we can refresh it and we can see that now it's positioned slightly
off the bottom.
So I just add the bottom position to 20 percent.
I gave it a height, height of 20 picks.
And then lastly, let's add in the firing object.
So the fire me.
So for now, I'm going to remove height so that we can see it on the screen.
That's going to be the projectile.
And this one also has to have a position of absolute and in this case, we can go top and left at zero
and setting its width, setting its height, its border radius at 50 percent.
So it's nice around and it's background color we can set to red.
So it stands out on the screen.
So we've got our object there that we've added so great once we've got the projectile that we're ready
to hit it again and then we're going to hide in and hide it as we use it within our code.
So we're ready to move on to the next part where we're going to be starting the gameplay.
So this is going to mean that we're going to start the interaction with the keyboard to move the ship
across, as well as we're going to start the building of the aliens and the bad guys that are going
to be coming down that you're going to have to defeat with the ship.
So all of that is still yet to come.
So go ahead and add in set up your default variables used to get bounding client rectangle in order
to get your main container of your gameplay area.
Also add an event listener to the start button so that you have an option to start the game.
So whenever that gets clicked, it starts the game and then set up some default variables within the
player object that you can utilize in the upcoming lessons.
And of course you can adjust these as well.
We are going to be adjusting them with JavaScript in order to be adjusting some of these values.
So that's all still to come.