This is our set up lesson where we're going to be setting up the HTML as well as connecting our JavaScript
to the HTML in order to begin our game development process.
So first of all, we need a way to display a score.
We need a way to display a score to the player.
We also want to have score, stay on screen and then adjust a particular element or a particular span
on the page.
So updating that and we need a way to select that.
So we've created a span with a class of score and we're going to use JavaScript to update that.
We also have another value that we want to present to the player.
So this one is going to be enemy left and this will be calculating how many bad guys are still left
to come out on the screen.
So we'll give this one a class as well.
We can call it bad left and by default, we'll just set it to zero.
We also need a mean game container, so we'll give it a class of container.
And then this is where all the gameplay will take place.
Starting out will also create a class called Message.
So this is where our message area goes.
And any information we want to present to the player we can add in here, such as press start to begin.
So that means that we also need to create our start button so this can be a div as well, and we'll
adjust it with styling.
So give it a class of B10 and this will be our start button and we'll label it such as well.
And then lastly, we're also going to need the players element.
So this can be called Baskett, a class of basket and we're going to design it using JavaScript.
So this is all of the core elements that we need in HTML in order to present our content so we don't
have an applied any staling to it yet.
And we'll do that in the upcoming lesson.
So this lesson, we're still going to connect our JavaScript to those elements.
So let's set up a few variables and the first one can be message.
So using document and query selector, we're going to select the element with a class of message.
So prefix it with a dot to select class.
We also need to select our score.
We just call it score output using documents and query selector, once again selecting the element with
a class of score so that we have that within an object format and we can utilize it in JavaScript and
let's get the other ones into JavaScript objects as well.
So query selector and we're going to select the element with a class of bad left so that we can update
this information.
We also need to select our button so we can just call it BTN and we'll use query selector again because
we only do have those that one element that we are selecting and we'll also select the last one that
we created.
So that's the basket.
And using the same format as the other elements, select that element into a JavaScript object and this
one needs a dot in front of it because it's class.
So let's refresh the page.
And we don't see anything different within our HTML output and which just makes sure that we do have
the elements selected properly.
So now that we've got the element selected, we can update content within it.
So if you want to update the text content, we could say hello in there and you can see that it updates
automatically.
So we've got that connection made.
The other one is the square output.
So that's where the score is going to be next.
We have bad left.
So updating that BTN and then the last element is the basket and then you can hover over these within
the console just to make sure that you did select them properly and you're going to see them lighting
up.
And this is only in Chrome.
Some of the browsers will handle the console differently.
But in this case, we're using Chrome.
And you can see as I hover over the elements in the console that we're returning back that are associated
with the variable names that they highlight as well.
And this is how you can be sure that you have made the connection and you're ready to move on to the
next step where we're going to create in the interaction and updating the content contained within these
elements.
And that's going to be in preparation for the gameplay.
And as well, we need to apply a little bit of styling to make it look more presentable.
So that's still all yet to come in the upcoming lessons.
So go ahead and set up your HTML core structure and the way that you can think about this is anything
you need to present to the user to be able to play the game.
This is what you can set up as your basic start content for your HTML.
So we do have a score.
We do have a bunch of enemies and it's useful information for the player to know how many are left.
We have a main game area, so within the container and then we've got a message area.
We can communicate with the player, we've got a button so that can start the game.
And then lastly, we have a basket.
And this is the players object that they're going to maneuver in the screen, so go ahead and set everything
up and you're going to be ready to move on to the next lesson.