Looks like we're ready to start the game, let's add in another event listener, so we've got a game
message area that says press here to start and let's deliver on that where the user can press there
and it will start the game.
So start a start function.
The event listener that we're listening for is a click event and we can create a function in order to
start the game.
We can just call it start to keep it really simple and place that under the keys object.
So a function and the function is start.
So this is where our game begins.
And what do we need in order to start the game?
Well, we need a character to move around and in this case, we're creating a plane.
So let's go ahead and create that plane.
I'm also going to create another object that we can store information into or just call it player for
now.
And we can set various variables in here throughout the game so we can have our score and for now default,
we can equal that to zero.
We can also have a speed.
So trying to make it as dynamic as possible and also another one to check to see if the game is in play.
So this is our basic controller for if the game is in play or not in play.
And of course, we can add in additional variables and values as needed.
So once we hit start, we're taking that player object and we're taking the inplay value.
It's the boolean value and we're going to set that to true.
So that's going to kick off our game plan.
We can also add in and create elements.
So creating an element we're going to call it playing so within the player object.
So that's the one that we just created.
We're going to use document and there's a JavaScript method to create elements that create elements
and what type of element we want to create.
So in this case, we want to create a do so.
The reason I'm putting it into Player Plain is that player is a global object and that gives us the
ability to reference it with anywhere within the other functions.
So it makes it essentially really easy for me to grab that and make use of it in other parts of the
code without having to pass it through.
So the next thing we want to do is we want to set some attributes because we want to give it a class
so it stands.
So it's not just a plain div and give it a class and we'll create that class of plane.
And then also what we want to do is take our game area and append a child to it.
And that child is going to be the player playing object that we just created.
So effectively what will happen here is we're going to create an element on the page when we hit start.
So I think we could try that out and we hit start and we don't see anything.
And the reason we don't see anything is that we've got an empty plane.
But you see that it did add that in.
So if I refresh it and if I open the game area up, there's no element.
No, there's no div with the class of plane.
But watch what happens when I click.
You see that it gets added in there.
So plane got added in.
So that's the first step in what we need to do.
And also we need to apply some styling.
So it actually looks like something.
So it actually looks like a plane and that will make a better user experience.
We could, of course, turn it into a square if we wanted to, or we could use a background image.
So setting its position as absolute.
And that is absolutely important because that's going to give us the ability to position it top and
left.
And with JavaScript, we just need to update the style property values and not makes us gives us the
ability to move our object around our element around.
So setting a top position of 100 left position of 50, creating a width.
So by default we can do 80 picks a height and also we can do that 40 kicks and taking a background image.
And luckily for me, I already have an image stored.
So this is called PLEN PMG and then I'm going to use background cover so that it covers the entire position
area.
So background size cover.
So now let's try that out.
So when I click it we get an element plain being attached.
So there's our plane, so now we click it and we get a plane on our screen.
So not a whole lot happening quite yet.
And that's coming up in the next lesson, where we're going to move this around according to our key
process.
So now it's up to you.
Go ahead and add in the start functionality to start the game, adding in our player plane on the screen,
creating an element on the fly dynamically using create element JavaScript document, create element
method and then set an attribute adding in that class of plane and then appending to the element the
game area element, the plane that we just created.
And once you have that in your project, you're ready to move on to the next step and that's to move
that plane around.
And that's coming up next.