Are you ready for some action in this lesson, the last lesson we created, the bad guys or the other
objects that the player needs to capture as he as they play the game?
And now we need to create some animation because even though they are created, we don't see them on
the screen and there isn't a whole lot happening.
And everything that happens in the game happens within a game function.
So this is where all of the action takes place.
So we're going to select all of the elements, all of the bad guys.
So using a variable, we can call it temp enemy and then documents Querrey selector, all because we
want to select all the elements that have a class of Bady.
So that's the class that we set up to them.
So what this is going to do is this is going to create node list.
So I would put that into the console.
You're going to see that it hits start.
It's creating a node list of all of those elements.
And even though we can't see them, we can select them.
So they're all up in the page.
And the next thing that we want to do is we want to move them and move them down through the screen.
So we need to create that type of action.
So we're going to check to see if temp enemy length.
So just make sure that there are some on the screen is equal to if it is equal to zero, then this is
where we need to end game and we'll handle that later on.
And that one of the upcoming lessons.
So now if the game isn't over, that we need to move that element.
So what we want to do is loop through.
So let's do a simple loop and looping.
While AI is less than temp enemy length because a node list, it works similar to an array where we've
got lengths involved in it and that's create a function.
In order to move that element, we can pass in the element information.
So temp aname AI is going to represent that element information from the node list.
So we're passing that in each time and to create a function in order to handle it.
And we break this apart so that we get more flexibility.
So the object coming in is just going to represent the element and we can now put in the console.
And what this is going to do is going to put it output a ton of stuff into the console.
So you can see it's outputting all of those element lists separately.
So that's what we want.
And now that we've got the element in here, we can move it so we can output its Y position.
Because remember, we did set a Y position.
So take the E y so that element y position and we're going to add to it whatever the element speed is.
And the next thing that we want to do is we want to update the element style top.
So just as we did with the other ones that we're moving, we're going to take the E y and we're going
to update its PIC's value.
So let's try that.
And you can see now they're falling, but they keep continuously falling.
So we need to have them stop at a certain point.
So whenever they go off the screen, then what we want to do is reset them back to the top.
So let's do that.
So adding in a condition, we're taking the value of E y and if we're checking to see if it's larger
than bound container height and if it is, that means that we've gone off screen and we need to reset
the value of E y and we can set it to negative one hundred.
So now what's going to happen is that as they fall off the screen, they're going to come back up to
the top.
And that's the effect essentially that we want.
And we should also subtract off of here.
So now they're falling because we weren't accounting for their height.
So once you add in their height, you can see now they're falling.
And next we need to do collision detection to check to see if the player is actually on top of them
and if there's a collision.
And if there is, then we're going to remove them from the screen and we're going to add another one.
We're going to update the player score so that they can have an option to capture all of the elements
that are on the screen.
So that's still to come in the next lesson.
So for this lesson, go ahead and add in the movement into your objects that we created in the last
lesson.