Are you ready?
Let's create some aliens going into our style area and they're going to create a style called alien
and this is a class that we're going to be adding in to each of the aliens as we create them.
So using position and this time we use position, relative setting the top position to zero.
And these are going to be dynamically adjusted with JavaScript and then a width of 80 PEX.
I usually like to set a few defaults before we adjust it with JavaScript and also maybe make it a little
bit higher.
So 50 pics, add some padding and of course, you can style these aliens as needed again to add in a
box shadow as well for this.
And we'll set a font size.
So we can decorate the aliens with some text, text line some.
And slightly rounded sites, so it's alien by default, so now we're ready to add them and create them.
We're going to do this using JavaScript.
So using JavaScript, we're going to create an element on the fly using the crit element method.
And this gives us the ability to create elements or create a div and all console log that devotes so
that we can see it as we're constructing it.
So we go into alien, make sure we hit start.
You can see that we're creating a bunch of divs here, but we don't have anything else happening.
We're just creating a bunch of diffs.
So let's add some content into the div.
We're going to take the Divx and using Closs list.
And and we'll add that class of alien that we just created to the diff, so that's going to make the
alien have that class and you can see now the class of alien has been added.
And we should also set those those values to the style properties, so taking the style value.
Of with as we're sending in a value for temp with this, it's going to get adjusted dynamically and
we need to always make sure that we add the picks there at the end.
It won't it won't set.
It was just a numeric value.
And we want to also set an X and Y position, so for this element will have an X position.
And this can be whatever the value of Rolex is that we're passing in and d'Hiv, why possession is going
to be equal to whatever the value of real life is that we passed and.
And let's use math flaw so we bring it down to its closest value, so use the math method in order to
do that.
So bring it down to its closest around rounded value than selecting the div, updating its style, and
we're going to update the style left position.
So using div x position.
Plus pics, so that will set its left position and we also want to set its top position.
So use the value of div y position for that, and I also wanted to add in one more object and this is
going to be the direction moving and we'll set it to one.
So that means that whenever they get to the end, I want them to go the other way and we're going to
be able to accomplish that was just using the one variable where if we multiply it by negative one,
that one will turn into a negative and then we can move it the other way.
And then once we hit this wall that we want to turn it around and move them back the same way.
So turning that back into one so positive value.
And then lastly, we're going to take our container object and we're going to attend a child to it.
And the child that we're adding in is the div that we just created.
And there's a few adjustments on the calculations that we still need to make because we've got we're
looking at the container with here.
So maybe let's adjust this to be 100 and we're also going to take this temp with and move this around.
So we get to move a few things around here just to make sure our calculations are correct.
And we're using that same value instead of setting that position container dim left position.
And that can be our default left position.
And also, when we reset it, we need to update that one as well.
And I'm also going to change Elian from going relative to absolute so that the other aliens that are
added in aren't going to be affecting those elements.
So updating relative to absolute and also update the display to be in line blocks already to try that.
So refresh Head Start game.
And we built out our aliens and notice that they're still positioning themselves to close together.
So we need to make another tweak on the calculation of where the aliens are being positioned.
So as we're building them, we're setting that roll value and that roll value actually has to be accounted
for swoony to add another little bit into it.
So plus 20.
So try that now.
So now that they're more stacked and their spacing between them and you can, of course, adjust this
as needed.
So if we adjust our alien width, so if we go 50, you can see that now we're aligning with five aliens
on the same roll as we're not hitting that end part.
But as soon as we hit that end part, then they go on to the next rosoff, which is 70.
They're going to be a little bit wider.
And as mentioned, they're going to be sitting on the left hand side.
And the idea is that all of these aliens are going to be moving over to the right.
And then once they hit the right, they go down a little bit and then they start heading back left.
So we're going to create that all of that within the animation frame.
So go ahead and add this into the project so that you can create elements on the fly and add in some
styling to them as well.
And coming up next, we'll make them look a little bit more interesting before we continue with the
animation.
So that's still all to come.