Welcome back.
In this lesson, we're going to animate the aliens, we created some nice looking aliens in the last
lesson and they're just sitting there.
So we want to make them move and we can do that within that same animation function that we have with
this, the update function and going through and just checking to see what their position is so we can
add them right in the beginning of this function, creating a temp aliens node list.
So this is going to be a variable object.
So using document and query selector all, we're going to select all the elements on the page that have
a class of alien.
So this is the one that we just set and these are going to apply to all the ones that we've dynamically
generated.
And then you can see if I log out temp aliens, you're going to see that we're going to get a lot of
stuff logged out, but we get the whole node list of all the aliens that we have available.
So that means that we can loop through this list of aliens and apply our animation to them.
And the way that we want to do this is we want to actually start with the last alien, because that's
going to be the first one that's going to reach the end.
And it's also going to be the one that's the lowest down.
So we want to make sure that the way that they're moving, when they get to the right hand side, we're
looking at the last one, and that's the one that we're applying the first movement to.
So doing that, we can loop through this node list and creating a variable of X and this instead of
being zero because we want to go backwards.
So we're taking aliens length.
That's a node list.
So it does have a length property and we're just subtracting one off of it.
And then we're taking the value of X and we're making sure while X is larger than minus one and X is
going to be subtracting one.
So that's going to be able to break out of the loop and then taking a variable, we can set up a variable
called El and this is going to be the temp aliens selecting the temp alien item from the array list.
So it's that node list that we created up here.
And there were a few variables that we did set when we were creating them, and that was the X the Y
position as well as the direction move.
So those were the three key ones that we need to take a look at.
And then we're also updating the aliens accordingly.
So roughly around the same thing is happening here.
So we're going to update before we finish the loop, we need to update their top and their left positions
with whatever the values of that element X and Y positions are.
And then also the direction moving position.
We have to look at that as well, because that might need to be adjusted if we've hit that end.
And so these aren't going to be the exact positions.
And I can update these to be El position and then El and so on.
So this will give us the ability to move them because instead of the diff, we're referring to the element.
So it's going to give us the same values that we set when we were constructing the alien.
So next thing we need to do is we need to check to see if the alien has moved off of the offset position
of the container.
So it's right that conditions.
So we've got our L x position.
So this is where the alien X position is located and we're checking to see if X has gone off screen.
So if it's gone outside of the container demn width area.
So that means that he's gone too far.
But we also have to take into account the offset width of the element as well.
So are subtracting getting this position on the far right, which is the container dim width, and then
we're subtracting the alien offset width to that to get the position whenever the alien is about to
hit the right hand side.
And there's also one other conditions for checking to see if that is true or we're checking to see if
El Exposition is less than zero and this is actually container demn left.
And if that's true, then what we need to do is we're going to change direction.
So we're multiplying this by negative one and when you multiply one by negative one, you end up with
negative one.
But if you multiply negative one by negative one, you end up with a one.
So this gives us the ability to kind of flip back and forth between that value, the negative one and
the one.
So this will allow us to account for direction.
We're also going to update the Y position as we want the aliens to move down.
So we're increment it by 40.
So this gives us our direction movement and the next thing that we need to do.
So we don't need to set the Y position because we're setting it over here and we just need to account
for the player alien speed and we're going to multiply this by el direction move as we're setting this.
And this will give us whichever direction if we're moving left or right.
So we're just going to increment the position.
So let's try that and see what happens.
So now we've got a bunch of aliens.
So they're moving.
And we initially we had an area there where they just seem to drop off because we didn't give an opportunity
to move directions.
So we're actually starting them off too far over.
So let's subtract something off of that left position.
So they're going a little bit too far off to the left.
So that means that we're positioning them.
Their original position, their start position isn't a good start position.
So we need to make an adjustment on that.
And that's when we were constructing the aliens that we were setting the Y position.
So maybe let's add a little bit to that position so we'll add 50 to it.
So we're not going to have these aliens dropping off.
So we'll add 50 and we need also add the 50 down here.
So let's see what happens.
So now it looks like they're moving properly.
And coming up next is where we have to do collision detection and a few other tweaks and adjustments
to the game.
The other thing, too, we don't want the aliens running off of the screen at the bottom.
So that basically means that the player lost the game.
So we have to account for that.
So all of that in the tweaks, adjustments are coming up in the upcoming lesson.