1
00:00:00,210 --> 00:00:06,390
The last lesson we created, the ability to press the spacebar and drop a bomb, there's one thing big

2
00:00:06,390 --> 00:00:08,580
problem with this is they're not moving.

3
00:00:08,580 --> 00:00:11,680
They're just showing up on screen wherever we left them.

4
00:00:11,880 --> 00:00:15,610
So we want to animate these and have them automatically falling down.

5
00:00:15,990 --> 00:00:23,010
So let's set that up and going into our gameplay, our play game area, this is the ideal spot to do

6
00:00:23,010 --> 00:00:23,220
that.

7
00:00:23,220 --> 00:00:27,110
I'm going to get rid of this console message and we can create another function.

8
00:00:27,240 --> 00:00:29,540
And this is the function that's going to move them.

9
00:00:29,820 --> 00:00:33,540
So we had one to make them and we have one to move them.

10
00:00:33,540 --> 00:00:34,740
So creating that function.

11
00:00:35,730 --> 00:00:39,500
So the first thing that we want to do is select all of those bombs.

12
00:00:39,690 --> 00:00:41,180
So what do they have in common?

13
00:00:41,190 --> 00:00:44,190
What's the one thing each one of these elements has in common?

14
00:00:44,370 --> 00:00:50,430
If you do an inspect on it, you can see that within here they have one thing in common and they all

15
00:00:50,430 --> 00:00:51,750
have a class of bomb.

16
00:00:51,990 --> 00:00:54,450
So that's going to be our way to select them.

17
00:00:54,460 --> 00:01:00,930
So creating an object in order to contain our document using query selector and this time we're using

18
00:01:00,930 --> 00:01:07,440
query selector, all because, of course we could have more than just one and selecting all the elements

19
00:01:07,440 --> 00:01:08,910
with a class of bomb.

20
00:01:09,420 --> 00:01:16,170
And then as we loop through them, we can loop through all of them using the for each method because

21
00:01:16,410 --> 00:01:23,010
this is a node list that we created and then utilizing the content within the node list, we can output

22
00:01:23,010 --> 00:01:23,960
that information.

23
00:01:24,360 --> 00:01:29,040
So let's go in and for now we can console log out item.

24
00:01:29,040 --> 00:01:31,170
And I know there's going to be just a ton of them.

25
00:01:31,350 --> 00:01:33,660
We're going to get bombarded in our console with this.

26
00:01:33,960 --> 00:01:36,780
But this is just to show you what's going to happen here.

27
00:01:36,780 --> 00:01:41,550
So once I start creating them, you see that they're being output here on the screen, within the console,

28
00:01:41,730 --> 00:01:42,780
and that's kind of messy.

29
00:01:42,780 --> 00:01:47,090
So we're not going to look at it for too long, but we see that we can loop through all of them.

30
00:01:47,460 --> 00:01:53,490
So now that we've got that item with it, that object within an item, so that represents the element,

31
00:01:53,790 --> 00:01:57,780
we can take that element and add to its Y position.

32
00:01:58,260 --> 00:02:05,160
So let's add to its Y position and we're going to use a static value of five and then taking that item,

33
00:02:05,520 --> 00:02:11,130
adjusting the style top position, we can take the item.

34
00:02:12,750 --> 00:02:18,420
Why value and just as we've done before, make sure that you add in pics, because otherwise it's just

35
00:02:18,420 --> 00:02:21,510
a numeric value and let's see what happens now.

36
00:02:21,540 --> 00:02:25,350
So now we see that they're falling, but they're constantly falling.

37
00:02:25,350 --> 00:02:26,330
They're going to be falling for.

38
00:02:26,360 --> 00:02:29,390
So let's set a limit to how far they can fall.

39
00:02:29,400 --> 00:02:32,220
We've got it within the item y value.

40
00:02:32,230 --> 00:02:38,690
So this is the one that we're increasing and we can check to see if Y is greater than 1000.

41
00:02:39,150 --> 00:02:46,140
And if it is, then what we want to do is we'll take that player active bomb value and we're going to

42
00:02:46,140 --> 00:02:47,370
decrease it by one.

43
00:02:47,730 --> 00:02:53,250
So over here, when we make it, we're increasing the active bomb here, we're decreasing.

44
00:02:53,250 --> 00:02:57,100
So we're only going to have a certain amount of active bombs that are always going to be present.

45
00:02:57,600 --> 00:03:01,300
Next, we also need to remove out that item from the screen.

46
00:03:01,530 --> 00:03:06,310
Now, the best way to do that in JavaScript to remove an element is to traverse up to the parent.

47
00:03:06,690 --> 00:03:13,680
So now we're moving up to the containing element and we're removing a child from there.

48
00:03:13,830 --> 00:03:17,700
And the child is going to be the one that matches the current object.

49
00:03:18,940 --> 00:03:23,250
So let's see what happens, go into our game area.

50
00:03:24,450 --> 00:03:28,710
And I got to make this bigger so that we've got a little bit more real estate to play with.

51
00:03:29,620 --> 00:03:30,910
And I'll refresh that.

52
00:03:32,060 --> 00:03:38,510
And do a quick inspect on the elements who can move this over to the right hand side.

53
00:03:39,470 --> 00:03:46,190
You can see that this is the game area, so when I press the space there, we've got our bomb, we can

54
00:03:46,190 --> 00:03:49,670
drop multiple bombs as we haven't set that limit there yet.

55
00:03:50,570 --> 00:03:55,580
And once they hit a certain value, anything over a thousand, they disappear.

56
00:03:56,360 --> 00:03:58,630
So starting back down again at 1:00.

57
00:03:58,790 --> 00:04:04,080
So it's not actually increasing because it's taking how many active ones and whatever the active value

58
00:04:04,080 --> 00:04:04,310
is.

59
00:04:04,310 --> 00:04:07,870
So if I let them all fall and disappear, I'm going to start at once again.

60
00:04:08,990 --> 00:04:13,580
So everything is working pretty good and we don't have to worry quite yet about the numbers that we're

61
00:04:13,580 --> 00:04:14,470
placing on the bombs.

62
00:04:14,480 --> 00:04:16,090
We probably don't even need that at all.

63
00:04:17,700 --> 00:04:25,350
So let's go back into our code and coming up next, we want to check to see if it's colliding with our

64
00:04:25,350 --> 00:04:26,910
base, our enemy base.

65
00:04:27,280 --> 00:04:28,230
That's coming up next.

66
00:04:28,230 --> 00:04:33,740
We're going to do collision detection, so go ahead and add this into your game.

67
00:04:34,170 --> 00:04:40,620
So the ability to press the space bar and drop a bomb and then to move those bombs, selecting all the

68
00:04:40,620 --> 00:04:46,080
elements that have a class of bomb and updating their Y position.

69
00:04:46,090 --> 00:04:48,060
So their style, top position.