The last lesson we created, the ability to press the spacebar and drop a bomb, there's one thing big
problem with this is they're not moving.
They're just showing up on screen wherever we left them.
So we want to animate these and have them automatically falling down.
So let's set that up and going into our gameplay, our play game area, this is the ideal spot to do
that.
I'm going to get rid of this console message and we can create another function.
And this is the function that's going to move them.
So we had one to make them and we have one to move them.
So creating that function.
So the first thing that we want to do is select all of those bombs.
So what do they have in common?
What's the one thing each one of these elements has in common?
If you do an inspect on it, you can see that within here they have one thing in common and they all
have a class of bomb.
So that's going to be our way to select them.
So creating an object in order to contain our document using query selector and this time we're using
query selector, all because, of course we could have more than just one and selecting all the elements
with a class of bomb.
And then as we loop through them, we can loop through all of them using the for each method because
this is a node list that we created and then utilizing the content within the node list, we can output
that information.
So let's go in and for now we can console log out item.
And I know there's going to be just a ton of them.
We're going to get bombarded in our console with this.
But this is just to show you what's going to happen here.
So once I start creating them, you see that they're being output here on the screen, within the console,
and that's kind of messy.
So we're not going to look at it for too long, but we see that we can loop through all of them.
So now that we've got that item with it, that object within an item, so that represents the element,
we can take that element and add to its Y position.
So let's add to its Y position and we're going to use a static value of five and then taking that item,
adjusting the style top position, we can take the item.
Why value and just as we've done before, make sure that you add in pics, because otherwise it's just
a numeric value and let's see what happens now.
So now we see that they're falling, but they're constantly falling.
They're going to be falling for.
So let's set a limit to how far they can fall.
We've got it within the item y value.
So this is the one that we're increasing and we can check to see if Y is greater than 1000.
And if it is, then what we want to do is we'll take that player active bomb value and we're going to
decrease it by one.
So over here, when we make it, we're increasing the active bomb here, we're decreasing.
So we're only going to have a certain amount of active bombs that are always going to be present.
Next, we also need to remove out that item from the screen.
Now, the best way to do that in JavaScript to remove an element is to traverse up to the parent.
So now we're moving up to the containing element and we're removing a child from there.
And the child is going to be the one that matches the current object.
So let's see what happens, go into our game area.
And I got to make this bigger so that we've got a little bit more real estate to play with.
And I'll refresh that.
And do a quick inspect on the elements who can move this over to the right hand side.
You can see that this is the game area, so when I press the space there, we've got our bomb, we can
drop multiple bombs as we haven't set that limit there yet.
And once they hit a certain value, anything over a thousand, they disappear.
So starting back down again at 1:00.
So it's not actually increasing because it's taking how many active ones and whatever the active value
is.
So if I let them all fall and disappear, I'm going to start at once again.
So everything is working pretty good and we don't have to worry quite yet about the numbers that we're
placing on the bombs.
We probably don't even need that at all.
So let's go back into our code and coming up next, we want to check to see if it's colliding with our
base, our enemy base.
That's coming up next.
We're going to do collision detection, so go ahead and add this into your game.
So the ability to press the space bar and drop a bomb and then to move those bombs, selecting all the
elements that have a class of bomb and updating their Y position.
So their style, top position.