This is the lesson where things start getting interesting as we're going to be connecting to our HTML
elements using JavaScript.
So first of all, let's set up a mean container and we'll call it play area.
So this is going to be our main game object, and I'm going to include all of the elements within the
play area so that we have it nice and neatly within one object also set up another object that we can
use for the player.
And this is going to contain all of the variables that we're going to make use of for the player itself.
So the next thing that we want to do, I'll move the screen up a little bit.
We're going to use our freshly created play area object and we're going to add in the stats to it.
And using our document query selector, you could also select elements by class.
So there's a number of different ways to make the selection.
My preferred way is to use query selector because it's most of you can select all of the different ones
within that same format.
And you just need to specify, just as you would with access, the element that you're selecting.
And so now if a console log out my play area, you're going to see that I'm going to have that element
within my object.
And then that means that I can access it, I can update it, I can make use of it within my elements
so we can see there if I want it to, for instance, update it, I can do play.
Area starts and I can update the entire HTML to be hello, so make nice big hello there.
So refresh and you can see that we've updated that element as hello.
So that gives us the ability to work with all the different elements.
So let's go ahead and add in some additional elements within our play area so we know that we've got
our different screens here.
So we've got the main page.
So selecting out document and we can use query selector once again selecting it by the class.
And we gave it a class of Maine.
And this is one of the reasons actually I'd like to what I'm developing out games to keep it all within
one HTML file so that I can easily refer back to it if I want or if you have tabs, you can switch them
back and forth and tabs and we are going to break this apart afterwards.
But this is just as we're building it out, it's a little bit easier that I can quickly see what I gave
my class names to within that elements so that I can select them within the JavaScript.
We also have play area, so we've got our main game area.
So again, using document query selector and these are going to be very straightforward to select those.
They're all class names that we're grabbing them by.
So it makes it really easy to make these selections.
And we also want to make a selection of our buttons as well so we can do play area.
And this one, we're going to do a little bit differently.
So there's you can do the buttons and you can get it within an object to node list.
So we're actually going to transform that node list into an array.
So first of all, let's select it within our node lists.
So query selector and in this case, because there is more than one button class or there potentially
could be more than one button class, we don't have more than one.
But in case we do decide to add some more buttons, we can grab all of the classes that have a class
name of button.
And now if I do play area, I'm going to consult like this so we can take a closer look at it within
the console area.
So let's refresh and you'll see that within here, within the buttons, I've got a node list, so I've
only have one item there within the node list.
And in case we do want to add more so there is a way to transform this into an array and we can use
the JavaScript array from we could loop through the node list as well.
So there's a few different options are going to use a need array from and we're going to select that
document elements.
So now I see what the difference here is.
We're actually transforming this into an array format.
So now when we go in here and we do buttons, we see that we've got an array.
So before notice that it's a node list, now it says an array.
So this is just a regular standard JavaScript array.
And now we can make use of all of the elements.
So there's one other one that we want to make a selection of, and that's the page.
So we're going to do the same thing.
I can copy this one out and I can call this one page and this will list out all of the pages that I
have within my element, within my HTML.
So refresh.
And now we can see under page.
We've got two different elements there and we've got all of that information that's contained within
those elements.
So we've got quite a few things that are going on here.
So what I want you to do now is try this out for yourself, open up your editor, select the classes
that we're going to be making use of in the upcoming lessons and build it out in the same type of format
that I have where you've got a play area object.
And then within that object, it's going to contain all of the elements that we need to use in the upcoming
lessons.
So go ahead and build that out and I'll show you the next step where we're going to set up the player
and prepare to create some interaction and functionality within the game.