So it looks like there's more elements that we need to create and the one that we need to create now
is a bomb, so we need something to drop from our plane on top of our enemy base.
So using that same thing, let's set up our styling first.
So that's the bomb and position at left.
And this is going to change.
We're going to do this all dynamically with JavaScript on the top left, setting a width value.
So the width is probably going to stay the same.
We could adjust it if we want to have different size bombs.
So that's always a possibility and everything is dynamic as we're building it out.
So even if we adjust the size of the bomb, our collision detection will still detect the collision
between the two elements.
So it's going to be dynamic as well.
So updating background color and we'll just set it by default to be black and we can adjust anything
we want.
All of this with JavaScript if needed as well.
And let's set a font size for this one case.
We want to write anything on those.
So just as we did before, we want to initiate the making of the bomb.
And the way that we want it to work is if the player presses the space.
And that's why we went through all of that trouble to make sure that we don't just have a blank, that
we can actually track it within our keys object once space is clicked.
So let's check to see if he's space equals true.
And if it does, we don't have any other conditions that we need to match.
We want to just simply make a bomb.
And this is going to be a function that we were creating the bomb.
So let's create that function.
So the MAKEM function, this is going to get invoked every time that we press the space bar.
And for now, let's just do making as you like to double check just to make sure that everything is
functioning as needed.
So now when I press the space, you can see that we get this making showing up.
So that's exactly what we want it to happen and we are ready to continue to make our bomb.
So let's also check to make sure if player inplay is true and if it is, then we know that we can go
ahead and create all of that action that we need within our gameplay.
Also, one of the first things I want to do is I want to decrease the score because the more that are
dropped, the score should continuously go down.
Also, I'm going to introduce another value because I want to track the number of bombs that we have.
So taking our player and I want to set up a limit to the number of bombs that they can create.
So calculating out how many total bombs the player has.
And for now, let's set that to two.
So, again, trying to be as dynamic as possible.
And here I'm going to track another variable.
I'm going to call this active bomb.
So every time we create one, we're going to create an active value.
So within the player object, we can track how many we have on the screen at the time and we can use
that value to compare it to whatever I-Max bomb values are.
So now we are ready to create our element.
So just as we've done several times before, using the create element method, we're going to create
a div on the fly.
You have JavaScript and then taking that object that we just created.
Let's add to the class list the class of bomb.
And this is a little bit different because over here we're setting an attribute here.
We're setting a class.
And if you had already existing class, you could add it with this format, with the syntax.
And since we don't have anything existing, both of these are actually going to do the same.
It's doing the same thing, the statements.
So at this point, you could choose whichever one works best for you.
Just keeping in mind that setting the attribute of class, if you already have a class value, you're
going to set it to just be base.
And this also gives you the opportunity to add additional values really easily as well.
So whatever format is best suited for your needs, that's the one that you should use.
So for now, also, let's track how many active bombs we have.
So player active bomb value.
So this is the active bomb value.
Let's set a default.
Positions, so our bomb style and we can actually set the X and Y positions of these because we know
them to be equal currently to whatever the value of our player X and Y is.
So taking our player Y value and then the bomb X is going to be equal to whatever the player Y, the
player access and then moving it to the left.
We can use these values that we've just created.
And then don't forget to add Picts to them because these are numeric values, otherwise they won't show
up and we're doing style left and style top and this one just adjust it to be y so we're setting the
positioning for it.
And then lastly, let's add it into our game area using append child, so just as we did before, we're
going to spend that freshly created element and there's actually one other value that I want it to do.
So instead of in play, let's do ready, because the problem here is going to be that we want to have
a little bit of time between the bombs dropping.
So let's keep it in play and I'll see what the problem is right now.
So going back out and refreshing and pressing our space, you see that we're adding those out.
We can add those anywhere we want and see there's a whole bunch of them.
So literally, I could add a whole bunch in a row.
So we don't want that to happen.
So let's add in some spacing between there.
And the way that we can do this is we can add another variable into the player ready object.
And right now, once we create the bomb, we can set player ready to force and then using set time out
method and JavaScript, we can run another function that will reset that to be true.
So player ready is now true so we can drop another one.
So you need to have that weight in between them and we'll do five hundred milliseconds.
So half a second weight between them.
And also because we're looking for value of true when we start the game.
Let's set this one to be true so we can start dropping the bombs.
So let's see how that works.
So now whenever I hit space, you see there's intervals between there and we're actually not getting
the right value here of the player active bomb.
So we need to set a default value for that as well.
But we have a starting value to increment.
So now we've getting the values and we can drop them wherever the position of the plane is.
So that's exactly what we want to happen.
So one thing that's missing on these is we don't have any movement yet.
We're able to drop them, but we're not able to get them dropping and actually moving.
So we need to take care of that.
And that's coming up in the next lesson where we're going to be dropping these down and have them moving.
I'm also going to do a quick adjustment to the flight size.
I think it's a little bit too big.
So this way we have a little bit more space on top of the bomb.
So coming up next, we're going to introduce movement.
So go ahead and add the ability to create these elements, generate these elements using the space bar
and position them where you're player X and Y position is.
And coming up next, I'll show you how we can move those.