Hello and welcome in this lesson, we're setting up the game structure, HTML and then connecting the
JavaScript to the HTML objects so that we can use them in the upcoming lessons.
So let's go ahead and set up our basic structure.
So this is what we want our interface to look like for the user so we can create one called Top Bar
and we can have our score in here, as well as other stats that we might want to display to the user.
And we'll give this one a class and this one will be specifically for score.
So this is a span.
And that means that if I use JavaScript, I can connect to that and I can update the value that's contained
within the element with the class of score.
We also need a main game container.
So give this one a class and we can just call this one container.
And this is where all of the gameplay will take place.
So within the main game container, let's set up a way to start the game.
So this is just a start button and we can just sinemet start game.
This was an element where the game would start.
We also need a few elements that we can interact with.
Then we can move.
So we're going to have one called my ship.
This is going to be the player's ship that they're going to move around on the screen.
And then also we need to set up another one.
We can call this one Fiame.
So this will be the projectile that the player is firing at the aliens and the aliens are going to get
generated using JavaScript.
So we're not going to include anything else and we're going to try to do as much as possible with JavaScript.
So now we've got a basic structure for our game and it doesn't show a whole lot.
It shows the score and a start game button.
So we need to connect them into our JavaScript.
So setting those up, we can have one.
We can call it BTE and start.
So this can be our start button object.
So connecting to that existing object and making that connection with query selector.
And when we do this, this gives us the option to interact with the content that's being presented on
the page.
So interact using the document object model and connecting to that instance of that element.
So any of the updates that we do now with Button Start, it's going to be representing that object and
that object is the element with the class of start button.
And for classes, it's just like us.
We need to include a prefix.
So for classes it's a dot, for ideas it's a hash and for the tag names, it's just the tag name on
its own.
And selector selects the element.
And if we have more than one element with the same class, it will select the first one that it finds
on the page.
Next, let's make a connection to the ship.
And this is going to be the element that we're going to move around or the player is going to move around
as they play the game.
So we need to select that.
And then, of course, we're going to be using that and manipulating its location using JavaScript.
Another variable that we should set up is the main container.
That's the main container object.
And this is where all the gameplay is going to take place.
So again, we can use query selector selecting the element with a class of container and the projectile
that the player is going to fire.
So we can just call that fire me.
And these are just the variables that we're going to use in order to connect to those elements.
And then lastly, let's have one four score output so we can output the score to the user and let them
know what's happening and what they are scoring and how much their score is every time it changes.
So that's what we need to set up.
So go ahead and refresh it.
And then usually what I like to do before we proceed is I like to list out all of these objects that
we've connected to the elements and make sure that we do have that connection.
And you can see once you listed out, once you listed the variable name, then you write in the console
and you can see when you hover over it, it goes blue.
And that means that the browser is able to detect which element we're referring to and the same thing
for the ship and container.
So we've got that mean div that's got the container Fiame as well.
So we've got that one.
And then lastly the score output.
So now that we have those and we can update them using a JavaScript so we can do things like HTML and
reset their values.
And you can see that as I've updated here within the JavaScript, it's also updated on the page and
that's what we want to make sure is happening, that we do have that connection and then we're all set
to make the manipulation of the elements.
So go ahead and set up your basic core structure for the game.
He could be ready to move on to the next lesson where we bring in eventless or so whenever the button
gets clicked.
We're also going to apply a little bit of styling in the next lesson to make this look more like a button
and then also some styling for the score.
And that's all still to come in the upcoming lesson.