So you know what will make this game more interesting, having an objective, a base to destroy an enemy
base, so let's create that in this lesson.
So starting out, we're going to create a class of base.
And just as we added in the other elements, we're going to create this dynamically using JavaScript
position at at the bottom.
So instead of top, we're just going to always have it sitting at the bottom position and the width
we're going to change with JavaScript.
So some of these values, we are going to be changing with JavaScript.
So just to set up some default ones and color white in case we want to write some text on it and background
color.
So for now, we'll set it as block and we could also play around with this.
And adding an image is just as we did with the plane.
If we need to do that and let's set up the font size, so make the font fairly small in case we need
to type or add some text into the game, into the bad guy.
So next, what we want to do, I'll make this bigger because we are a little cramped there.
So now when we start the game, I want to create that bad guy.
So create the enemy base and we can make a function, call it make enemy sounds good.
And then just down below the start, let's create that function.
And what this is going to do is this is going to generate that enemy.
So this is the objective of what the player is trying to destroy.
So we can use it under the player object or you can create another one if you want or to documents and
using the same format as before create elements.
And the element that we're going to create is a div.
So this way we can be fairly dynamic and we can create multiple bases, possibly for one or two as well.
Taking our player base object that we just created and just as we did with our plane, we need to set
an attribute.
So we're setting a class value and the class value is that one that we just created.
So that's going to be the base.
So a class of base so that we apply all of that staling to it.
And once we apply the styling, that gives us the ability to move it around.
And we also want to not have them all be the same size and look the same.
So let's mix things up a little bit, making them with width so we'll update the width using math floor
and then math random to create some random and unexpectedness into our gameplay.
So it could possibly be as wide as 200 picks and always add in some type of value.
So we have a minimum and a maximum value.
So you don't want to have it ending up being zero.
So that way it's going to be a little bit hard to hit if we can't see it.
Next, let's set a default or a random height to it.
So using the same formula with math, random, and sometimes you might have to adjust some of these
numbers depending on how the calculations turn out, of course.
So let's add one hundred, because I don't want to have a little tiny base.
I want to have it coming up a little bit.
And then lastly, let's set our lifestyle position, and this is going to be the left position.
So this is where it's sitting on our screen.
So using math, random, again, let's multiply it and we're going to make it dynamic.
So always try to make things as dynamic as possible.
So using game area offset width and what does that give us?
That gives us the right side pixel value.
So basically the width of the screen is going to be the far right pixel.
So multiplying it by that is going to return back anywhere on the screen, but it could be all the way
over to the right hand side.
So this is also it could be a zero value.
So let's add in plus 100.
But on this value, we're going to subtract two hundred.
So this should always land us an offset of up to minus two hundred of whatever the width of the screen
is and then plus 100.
So we're not right up against the wall.
And again, sometimes you do need to make some adjustments to this as you play the game and you realize
that the calculations might be a little bit off.
So always good to be dynamic and be able to adjust these values.
And also, if you want to make it more challenging, you could do that as well.
So once you've created the base next, we want to add it to the page.
So that should be adding it into the page.
And it turned out really, really big.
There are going to decrease the screen size because I'm at one hundred and ten percent and I'm probably
going to make some more space here.
So let's try that one more time.
So that looks a lot better.
So I was because my screen was quite a bit it was zoomed in.
So as you can see, there's our base that we need to bomb with the plane flying by it.
And that's coming up next, where we have to introduce the ability to drop a bomb.
Suppressing the space is going to drop a bomb from the current position.
And we're going to also do.
Collision detection to check if it hits the target, so all of that is yet to come.
So go ahead and add in the enemy base into your project, creating the element on the fly.
And you can also customize your styling as needed.