1
00:00:00,180 --> 00:00:07,520
Congratulations on making it this far, and now it's time to wrap up this section by doing a quick code

2
00:00:07,530 --> 00:00:11,400
review and making sure that our game is playing as intended.

3
00:00:11,730 --> 00:00:13,460
So we'll see when we start up the game.

4
00:00:13,500 --> 00:00:14,700
We've got a start button.

5
00:00:14,730 --> 00:00:16,050
We've got a score of zero.

6
00:00:16,290 --> 00:00:17,130
So that looks right.

7
00:00:17,130 --> 00:00:18,270
Let's hit the start button.

8
00:00:18,570 --> 00:00:20,430
We've got a target down there at the bottom.

9
00:00:20,430 --> 00:00:22,080
We can drop a number of bombs.

10
00:00:22,080 --> 00:00:27,660
And the objective is really to hit our target with some of the bombs until we hit that.

11
00:00:28,440 --> 00:00:30,750
And always we're decreasing the score.

12
00:00:30,760 --> 00:00:37,230
The score always ends up going at the lowest to zero and everything seems to be working as intended.

13
00:00:37,440 --> 00:00:40,820
We can start the game again once we hit enough of the target.

14
00:00:40,830 --> 00:00:42,870
So let's now take a look at our source code.

15
00:00:43,350 --> 00:00:50,400
So we started out, we created a bunch of we added in styling in order to style our elements on the

16
00:00:50,400 --> 00:00:57,420
page so we could use these classes and easily apply a bunch of styling to each one of the elements that

17
00:00:57,420 --> 00:00:58,560
we're creating dynamically.

18
00:00:59,160 --> 00:01:04,590
We set up our HTML structure in order to house all of our gameplay.

19
00:01:04,590 --> 00:01:09,630
So we needed an area to output a message, a scoring area and our main game area.

20
00:01:10,110 --> 00:01:14,830
We selected those elements and place them into JavaScript objects added.

21
00:01:14,830 --> 00:01:17,940
Add a bunch of event listeners that we utilize within the gameplay.

22
00:01:18,270 --> 00:01:22,950
We also had some global objects that we created that we were making use of throughout the gameplay.

23
00:01:23,580 --> 00:01:28,860
Once we hit the start button, that triggered everything and that created all of the gameplay.

24
00:01:29,280 --> 00:01:33,870
So what that did is it hit that initial start area.

25
00:01:34,290 --> 00:01:40,110
It also created our player, our main player stats and information.

26
00:01:40,560 --> 00:01:42,630
It created an element on the fly.

27
00:01:42,630 --> 00:01:45,240
So that's our plane that we're going to be maneuvering around.

28
00:01:45,600 --> 00:01:51,480
It also then added it into our game area and it recorded our player information.

29
00:01:51,480 --> 00:01:57,540
So X and Y, which we could utilize later on as well, and then started the game animations.

30
00:01:57,540 --> 00:02:03,240
So the request animation frame that started the whole animation under a function called play game.

31
00:02:03,630 --> 00:02:11,130
So as we move to play a game, we continuously look through and we check to see what the key object

32
00:02:11,130 --> 00:02:11,490
is.

33
00:02:11,760 --> 00:02:15,480
And the Keys object is the one that contains any of the key clicks.

34
00:02:15,720 --> 00:02:22,260
So we were setting those key clicks on press on press off, and we're updating those values that are

35
00:02:22,260 --> 00:02:23,910
contained within the Keys object.

36
00:02:24,240 --> 00:02:26,340
And then this is where we're utilizing that.

37
00:02:26,520 --> 00:02:28,980
So we're checking to see if the spacebar is clicked.

38
00:02:28,980 --> 00:02:31,050
And if it is, then we make a EUBAM.

39
00:02:31,200 --> 00:02:36,510
We are also checking to see if we're in play and if we are that we know we need to move the bomb.

40
00:02:36,530 --> 00:02:39,120
So we make them and we also need to animate them.

41
00:02:39,120 --> 00:02:40,440
So have them moving down.

42
00:02:41,130 --> 00:02:49,020
We added in all of the key checks and these keys also with the condition to making sure that we're within

43
00:02:49,020 --> 00:02:49,710
our boundaries.

44
00:02:50,040 --> 00:02:54,990
And if we are, then we update the value of either player X or Y accordingly.

45
00:02:55,260 --> 00:02:59,040
And we also, by default, are updating our player X values.

46
00:02:59,040 --> 00:03:01,170
So that makes its speed across the screen.

47
00:03:01,380 --> 00:03:09,510
So always moving forward, we check to see if we've gone off the game area with and if we have, we

48
00:03:09,510 --> 00:03:15,480
reset it back to zero and we subtract something off the score and then up to updating more of the score

49
00:03:15,480 --> 00:03:16,110
values.

50
00:03:16,320 --> 00:03:22,740
And then finally, we're updating the style properties of the plane element that we created and we're

51
00:03:22,740 --> 00:03:28,800
updating the left and top positions of those using the player X and player Y values.

52
00:03:29,070 --> 00:03:31,890
And then we're reinitiating that animation frame.

53
00:03:31,900 --> 00:03:35,970
So recalling again play game so that it loops through.

54
00:03:36,060 --> 00:03:38,640
So it's constantly looping through this function.

55
00:03:38,760 --> 00:03:41,970
And the main controller here is this player in play.

56
00:03:42,120 --> 00:03:45,870
And as long as that's true, then we have all of our actions.

57
00:03:46,230 --> 00:03:52,530
But if we have an end of the game, so we've got our end game function, that's going to set the inplay

58
00:03:52,530 --> 00:03:53,190
to false.

59
00:03:53,370 --> 00:03:56,550
So that's going to immediately stop all of the additional animations.

60
00:03:56,790 --> 00:04:01,410
And we're also removing the class of hide so that we're showing that start button again.

61
00:04:01,410 --> 00:04:03,390
So that's our end game function.

62
00:04:03,690 --> 00:04:06,510
We've got a few other ones here where we make an enemy.

63
00:04:06,780 --> 00:04:10,560
So this is the enemy base, essentially our target within the game.

64
00:04:10,830 --> 00:04:13,070
We're also decreasing it.

65
00:04:13,080 --> 00:04:19,440
So this is player levels, the number of targets that we have, as long as it's greater than zero,

66
00:04:19,620 --> 00:04:21,090
then we're not ending the game.

67
00:04:21,720 --> 00:04:26,130
But if it's if it is if it is less than zero, then we do end the game.

68
00:04:26,460 --> 00:04:30,520
Otherwise, we update and we create a player base.

69
00:04:30,600 --> 00:04:32,100
We create a next player base.

70
00:04:32,460 --> 00:04:35,010
And this has some random lesson there.

71
00:04:35,010 --> 00:04:39,810
So it's not always showing up at the same spot as well as it's not always the same height and width,

72
00:04:40,110 --> 00:04:42,870
but we still are always adding that class of base.

73
00:04:42,870 --> 00:04:48,480
And this is crucial in order for us to be able to determine if a collision has taken place.

74
00:04:48,510 --> 00:04:55,380
We're making bombs when you press the space bar and we're limiting the number to less than the total.

75
00:04:56,100 --> 00:04:58,440
So otherwise the player can't create anymore.

76
00:04:58,620 --> 00:04:59,940
Every time we make a bomb at.

77
00:05:00,170 --> 00:05:07,490
Decreases off of the score and we're also updating our total bombs, we're updating the active bombs

78
00:05:07,730 --> 00:05:12,880
and the active bombs because we do have a limit on how many can be active at one time.

79
00:05:12,890 --> 00:05:14,330
So we're keeping track of that.

80
00:05:14,630 --> 00:05:20,660
And then once we've got all of those variables, we create the element, just as we did with the plane.

81
00:05:20,900 --> 00:05:23,970
We add an inner tumults.

82
00:05:23,990 --> 00:05:25,250
What's the bomb score?

83
00:05:25,430 --> 00:05:32,660
We set the X and Y positions to match the player X and Y positions, and then we update the bomb style

84
00:05:32,660 --> 00:05:35,660
properties to match the X and Y positions.

85
00:05:35,900 --> 00:05:38,450
And then we added into our game area.

86
00:05:38,540 --> 00:05:45,970
So that's adding those in and to limit the player from not having to be able to place them nonstop.

87
00:05:45,980 --> 00:05:53,000
So we added in a half second interval between the spacebar so you can hold the spacebar down, but you

88
00:05:53,000 --> 00:05:54,620
won't be able to create any.

89
00:05:55,250 --> 00:05:58,180
That's the time frame is half a second.

90
00:05:58,190 --> 00:06:01,310
So five hundred milliseconds that we needed a way to move them.

91
00:06:01,310 --> 00:06:06,230
So we launch a function here, move bomb and that gives us the ability to move them.

92
00:06:06,500 --> 00:06:11,000
We select all of the elements within our document that have a class of bomb.

93
00:06:11,210 --> 00:06:15,290
We loop through all of those elements and then this is where we're moving them.

94
00:06:15,530 --> 00:06:22,460
If they're larger, if the Y position is larger than a thousand, then we subtract active bomb and we

95
00:06:22,460 --> 00:06:27,800
remove it from our gameplay area and we also check to see if a collision has taken place.

96
00:06:28,100 --> 00:06:33,740
So if a collision has taken place, we using our collision detection function.

97
00:06:34,070 --> 00:06:38,690
And if this comes back true, then we know that it's been the target's been hit.

98
00:06:38,960 --> 00:06:46,430
So we increase the score, we decrease the active bomb, we remove the base and we remove the bomb from

99
00:06:46,430 --> 00:06:48,920
the screen area and then we make another enemy.

100
00:06:49,130 --> 00:06:51,310
So that makes the game continue.

101
00:06:51,500 --> 00:06:56,720
And over here again, where we're making the enemies, we're decreasing the level.

102
00:06:56,930 --> 00:07:01,130
So we eventually run out of enemies and then the game is over.

103
00:07:01,160 --> 00:07:02,990
So that's essentially all of the gameplay.

104
00:07:03,020 --> 00:07:08,570
And I do encourage you to try out the functionality for yourself, build your own version of this game,

105
00:07:08,570 --> 00:07:11,560
extend on it and have some fun with JavaScript.

106
00:07:11,570 --> 00:07:13,490
Thanks again for taking the course.

107
00:07:13,490 --> 00:07:19,280
And as always, I'm always happy to help clarify any content and the source code is provided so you

108
00:07:19,280 --> 00:07:20,510
can try it out for yourself.