We have our player who is able to move their ship by pressing the arrow keys on their keyboard, the
next that we need to do is add in a challenge to this.
And that's going to be setting up our bad guys are bad characters.
Let's create a function we can call it set up bad guys, and then here we can specify how many we want
to add to the screen at any given time.
So let's add six and we do have a total of 10.
So that means that there's still going to be four left that aren't going to be on screen setting up
a function in order to handle the setup.
We take the value of the number that we want to set up as a parameter, giving a variable name of NUM,
then looping through X and create a for loop where X is less than NUM, and then we'll increment X by
one.
And this is where we're going to actually make the bad guy.
And this gives us more flexibility, having it in two separate functions so that we can control how
many we want to set up at any time.
And that's how we can launch the function.
So if we update this value, then this will loop through larger numbers or smaller numbers, and then
the making of the bad guy is always going to be the same function.
And we can also launch the making of the bad guy as we have more left and as we remove them from the
screen, we can add in new ones.
So again, there's that flexibility when we're creating it dynamically and the flexibility to keep all
of the characters in play.
So player and total bad, we want to make sure that this value is greater than zero.
And if it is, then we are good to go.
We are good to make our characters.
So let's set up a temporary holder for that.
And this is going to have our total bad value that's going to be contained within here because of course,
this is going to be changing.
And then we're taking our player total bad and we're subtracting one off of it.
And we also want to update the score because again, remember, we are updating one of the values here.
So we're decreasing the number of bad guys.
So we want to update the number of enemies left here.
Now let's create them.
So setting up a variable in order to hold our object that we're creating using crit element, method
and JavaScript, setting up and creating a div, I'll make this bigger and then we'll run through the
code.
In order to construct the element, we can update its inner HTML of the element that we just constructed.
So giving it a value and then this value can be whatever the value of Tempest's.
So that's why when we track the value of temp and then we subtract the total bad, we could also increase
that if we wanted to.
Let's also take that element and class list and we're going to add a class and we'll give it a class
of body that we want to add.
And we also need to set that class up as well.
We want to also give it an X and Y position and using math floor and then math random, we're going
to generate a random position and it's going to be determined by the bound container with.
So it could be anywhere on our bound container and then we're going to subtract 100 off of that.
And then the div y.
So this y position, we can use math as well so that they're not always starting in the same Y position.
And this one we could just multiply by five hundred and we're going to multiply it by negative one because
we want this to be a negative value.
So we don't we want it to appear the Y position off of screen and then we're going to have that character
moving down on the screen.
We can also set up any other variables at this point that we need to utilize.
So we're setting up a speed so we can travel them all at different speeds.
In this case, we're going to use math seeling than using our math random method.
Again, let's multiply that by 10 and we'll add three to it.
So it'll be traveling at least at three pixels for each iteration and then taking that elements.
Let's add it to the main container object using append child.
And that object that we are adding in is div.
And then lastly, now that we've got it visible, we need to update its style properties.
So setting its left value and we can use div x and also we need to update its top position.
So this case we can use div y plus picks and then the div x in the div.
Why are the values that we're going to be adjusting to create its animation and its movement.
So let's also go up to our style and add some styling.
So we created a class of body.
So just as our main player object set its position to absolute so that we can move it around with the
JavaScript and we can set a height.
So this can be one hundred pics with 100 pics, and we could also adjust these dynamically as needed,
also setting some default positions for it.
So top and left background color.
So make them all blue for now.
And we can adjust this with JavaScript later on as well, adding in color.
So set it as white.
I usually like to use height because it allows me to center the content and then text align center.
So I think we're ready to try that out.
So let's go ahead and hit start.
And you can see now they've all got added to the page and there's actually more than what we see on
the screen because remember, some of them are completely off the screen.
So we've essentially generated six of them on the screen right now.
And then we're got still four that are hidden.
So we're going to output these and we're going to start to move these in the animation frame.
So we're going to do that in the upcoming lesson.
And as you can see, all of the top positions are already set now within that container.
And we might want to adjust this to be even a larger value of at least negative 200, because we want
to make sure that they're completely off screen.
And then this one over here that was left minus 72, we got to make sure that it's at least zero.
So I'm not sure why it ended up being left minus 72.
So let's take a quick look at our code and just make sure that things are proper where we're actually
subtracting the one hundred off of the width and then let's add in another 50 into it.
Or we can just add in a condition.
If Div X is less than zero, then let's set div X to be 100.
So that will take care of that problem.
And then the other problem here is where we need to still add in another value into that.
So let's wrap it with some brackets and then we'll subtract another two hundred.
So I think we're ready to try that again.
So let's make it big and we hit start and we don't see any of them, but they are on the page.
When we go into the elements in the container, they're all located and it looks like the numbers turned
out better this time.
So next lesson, we're ready for the animation.