Welcome in this lesson, we are going to be building out our basic structure for our game and we're
going to be doing as much as possible with JavaScript.
So that means even creating the elements that we're going to need for our gameplay.
Those are going to be generated with JavaScript.
So we want to make sure before we try to initiate the JavaScript that our document object has loaded,
so the first function that we're going to be using is the Windows object, adding an event listener
to the window object.
And we're going to listen for OnLoad and once load loads.
That basically means that the window object has loaded.
Then we know that we can initiate a function and we've created a function called in it.
And this is the overall load function.
Make sure that this loads.
We're going to refresh into the page we see get ready gets output into the console.
So that means that we're ready to move on to the next step.
And that's going to be to build out the elements that we're going to need for the gameplay, setting
up a variable and to call it a div, we're going to create an element using documents, create element
method in JavaScript.
And what this does is it creates a specific element.
And then we need to specify what type of element we want generate.
So we want to create a div in this case, using that newly, freshly created div object, we're going
to set an attribute.
The attribute that we're setting is a class and the class that we're setting is Messitte.
So let's refresh the page and go over to inspect our elements and we haven't added it yet to the body.
So let's do that now and now using documents.
So let's use document and selecting body using the method append child.
We're going to spend the newly created div to our body element.
So let's refresh.
And now you can see that we've created this element and it's given a class of message has been added
into there.
If we want to add in some content into there, we can use in our text and we can say press.
So this is building out all of our necessary HTML that we're going to need for the gameplay.
Next, we also need to create a button element so we can do that within the same format where we've
got our button that we can use document element.
And the element that we're going to be creating is a button.
Then for this button we're going to specify button type and that means that we're going to create a
button and actually this should be button, not div.
And then using the same format as we did before, we can use document body and append child and that
will allow us to add the button to our body.
So it's refresh and now we've created a button and type of button and we also need to enter in some
inner text to that button.
And we can call it start game, so let's refresh and now we've got our button to start the game and
we're also going to add an event listener to this as well.
So it's still to come.
And we're going to need one more element that we can create.
So this one can be called div one using the same format as earlier.
We're creating an element and the element that we're creating in this case is also a div.
So just like before and then now we've got our object information into div one.
And we can add in a class so we can do it within the same way where we did set attribute or we could
use class list and using add, we can add in a class to that and we can just call that game next document
body append child.
And let's add that div one to the child.
And actually this doesn't need the quotes around it because this is an object.
So save that and let's refresh it and we can see that now we've added in a class of game, we've added
in our start button and we've added in our message and we're ready to present and start the game for
the player and notice no tml all added in within the body via JavaScript.
So go ahead and use JavaScript to construct your basic game starting point.
And coming up next, we're going to make this game interactive and build a more game components.
So that's still to come.