1
00:00:01,230 --> 00:00:06,180
So at this point, you should be able to play through the game and have a fully functional game, also

2
00:00:06,180 --> 00:00:13,020
go into your numbers and as you're starting the game, you can adjust these to 20, set up as many as

3
00:00:13,020 --> 00:00:19,920
you want initially, and it should all work as well as there's flexibility in the screen size and dynamic

4
00:00:19,920 --> 00:00:22,980
capability and making those adjustments as needed.

5
00:00:23,010 --> 00:00:28,030
So if you make it wider, then it's going to work and it's still going to work the same way.

6
00:00:28,350 --> 00:00:35,070
So that's really the objective is to try to make it as dynamic and flexible as possible and reserve

7
00:00:35,070 --> 00:00:38,120
all of the gameplay so that you have the same functionality.

8
00:00:38,130 --> 00:00:40,470
It doesn't matter how wide your screen is going to be.

9
00:00:40,710 --> 00:00:46,200
So now let's go over and do a quick review of all of the code that we did and we went through in the

10
00:00:46,200 --> 00:00:48,660
earlier lessons in order to build this application.

11
00:00:48,960 --> 00:00:55,300
So there is some success and the success was mainly to present the content in a better format.

12
00:00:55,650 --> 00:01:03,300
Also, we came into our project setting up our initial HTML, so we looked at what we need to present

13
00:01:03,300 --> 00:01:06,830
to the user in order to prepare them for the gameplay.

14
00:01:07,110 --> 00:01:09,920
So we have a score, we have the enemies left.

15
00:01:10,080 --> 00:01:15,090
We have a main container where we're going to outputting all of the gameplay, a message, a button

16
00:01:15,090 --> 00:01:18,900
to start the game and a basket, which is the player's element.

17
00:01:19,290 --> 00:01:27,710
Then we use JavaScript to connect to all of those elements and have them as objects in JavaScript so

18
00:01:27,720 --> 00:01:29,170
we could utilize them in our code.

19
00:01:29,490 --> 00:01:35,700
We also set up some of the variables we use get bounding client rectangle in order to get the dimensions

20
00:01:35,700 --> 00:01:42,610
of an element and use that and set that into variables that we could utilize within the code as well.

21
00:01:42,930 --> 00:01:48,990
We set up a few default objects, so the keys object, which handled all of the key presses and then

22
00:01:48,990 --> 00:01:52,110
the player object would handled all the player values.

23
00:01:52,420 --> 00:01:54,270
Then we added in some of that listeners.

24
00:01:54,280 --> 00:02:00,690
So mainly the start button click and then we have event listeners listening for key up and key down

25
00:02:01,020 --> 00:02:03,170
the start, but starts the game.

26
00:02:03,480 --> 00:02:07,470
So within the starting of the game, we still have to prepare the visuals.

27
00:02:07,470 --> 00:02:14,220
So we hide the start button, we hide the message, we show the players basket, we reset some of the

28
00:02:14,220 --> 00:02:17,730
player object values and then we update the score.

29
00:02:17,740 --> 00:02:22,890
So it's visually updated because every time we make an update to the score or to the total bad guys

30
00:02:22,890 --> 00:02:25,170
that are left, we have to update the score.

31
00:02:25,170 --> 00:02:28,560
So we're using a function called Score Update to create that.

32
00:02:28,620 --> 00:02:34,560
And what that does is that outputs the score value as well as the enemy left value and updates it on

33
00:02:34,560 --> 00:02:36,000
the page for the player.

34
00:02:36,360 --> 00:02:37,960
Then we set up bad guys.

35
00:02:37,960 --> 00:02:39,780
So this is dynamic as well.

36
00:02:39,930 --> 00:02:46,560
We can specify how many we want to set up and passing it into a function that loops through and then

37
00:02:46,560 --> 00:02:53,040
make bad is the core function that's generating the bad guys where we use JavaScript to create an element

38
00:02:53,040 --> 00:02:53,750
on the fly.

39
00:02:53,970 --> 00:02:57,120
We also once again update our score.

40
00:02:57,120 --> 00:03:02,130
We decrease the number of bad guys that are sitting there within the queue and we also check to see

41
00:03:02,130 --> 00:03:04,200
if there are any still sitting in the queue.

42
00:03:04,200 --> 00:03:08,460
If we're above zero and if we're not above zero, then we know that the queue is empty.

43
00:03:08,460 --> 00:03:11,010
We don't have any to create any more at this point.

44
00:03:11,340 --> 00:03:17,520
We create an element, a div on the fly, adding in some inner text in our HTML to it.

45
00:03:17,700 --> 00:03:24,990
And then we've got some randomness where we're randomising its height values so that adjusting the height

46
00:03:24,990 --> 00:03:31,740
as well as the line height to the same value, creating a random background color, so generating random

47
00:03:31,740 --> 00:03:34,950
hex value, we add in the class of bodies.

48
00:03:34,950 --> 00:03:41,220
So this is how we identify the elements that are the bad guy elements on the page by adding the class

49
00:03:41,220 --> 00:03:41,820
of body.

50
00:03:42,000 --> 00:03:47,010
And then later on we're going to scan for all the elements of the class Abadie and then update their

51
00:03:47,010 --> 00:03:47,610
position.

52
00:03:48,010 --> 00:03:55,500
We set a random X value and if X was less than zero, then we just set it to 100 because we don't want

53
00:03:55,500 --> 00:03:57,470
the value of X to be off the page.

54
00:03:57,780 --> 00:04:06,030
We also set value for Y and then this is to show it off screen setting random speed.

55
00:04:06,040 --> 00:04:12,660
So these are all numbers that can be adjusted and manipulated as needed, that we append it to the container

56
00:04:12,660 --> 00:04:21,330
object and update its elements left in top position according to the Div, X and Y values.

57
00:04:21,660 --> 00:04:23,130
So those are numeric values.

58
00:04:23,130 --> 00:04:27,030
And then for left and top, we need a string value with picks at the end.

59
00:04:27,030 --> 00:04:30,840
So a number with picks at the end play game was our core function.

60
00:04:30,840 --> 00:04:38,520
So this is our animation function that continuously loops while the player inplay is equal to true and

61
00:04:38,520 --> 00:04:42,390
once that's equal to false, then we're not going to be able to play the game anymore.

62
00:04:42,690 --> 00:04:47,610
We checked to see what keys are pressed and then also considering the boundaries.

63
00:04:47,790 --> 00:04:56,100
Then we make an update to the bound basket Y and bound basket X values and those we use in order to

64
00:04:56,100 --> 00:05:00,540
adjust and output the style values of the basket element.

65
00:05:00,880 --> 00:05:08,260
And then we request the animation frame, we also loop through all of the elements with class of body,

66
00:05:08,590 --> 00:05:13,150
and if there are none, then we end the game because that means the game is over.

67
00:05:13,330 --> 00:05:14,500
There's nothing more to play.

68
00:05:14,750 --> 00:05:18,480
And if there are some, then we update their position.

69
00:05:18,850 --> 00:05:25,230
So while we're updating their position, we get their Y position and we add the speed to it.

70
00:05:25,240 --> 00:05:28,420
So that gives them all the different dynamic, different speeds.

71
00:05:28,840 --> 00:05:35,620
We also check to see the position of y if it's gone off screen, then we reset it back to the top.

72
00:05:35,620 --> 00:05:39,520
So bring it back to the top and we randomize where the exposition is.

73
00:05:39,640 --> 00:05:44,770
And then we update the exposition and later we update the Y position.

74
00:05:44,920 --> 00:05:47,770
But first we check to see if a collision has taken place.

75
00:05:47,980 --> 00:05:51,100
If there is a collision, then we update the player score.

76
00:05:51,280 --> 00:05:56,710
We remove the element from the container, we update the score visually for the player, and then we

77
00:05:56,710 --> 00:05:57,760
make another bad guy.

78
00:05:57,760 --> 00:06:02,490
And we also put the console hit, which is something that can be removed as well.

79
00:06:02,830 --> 00:06:04,530
We could have collision detection.

80
00:06:04,780 --> 00:06:09,370
So this is where we're checking to see if the basket is collided with the element.

81
00:06:09,580 --> 00:06:18,010
And we check the values of the get bounding rectangle object and we've got the bottom and top positions,

82
00:06:18,310 --> 00:06:20,260
top and bottom positions.

83
00:06:20,410 --> 00:06:23,670
So we check the vertical first and then the horizontals.

84
00:06:23,920 --> 00:06:29,050
And if there is no overlap, so what we do is we negate that.

85
00:06:29,050 --> 00:06:33,070
So it's turns back as a true value instead of a false value.

86
00:06:33,370 --> 00:06:37,090
So it makes more sense when we are checking to see if there's a collision.

87
00:06:37,210 --> 00:06:42,130
We could also negate it here at this point and remove the negating down here.

88
00:06:42,370 --> 00:06:43,990
So this is optional.

89
00:06:44,020 --> 00:06:45,040
You could do it either way.

90
00:06:45,400 --> 00:06:50,200
Then we also have the score update function and we've got the key press handling.

91
00:06:50,200 --> 00:06:55,960
And what the key press handling does is all we do is set according to the key event.

92
00:06:56,170 --> 00:07:01,270
So we've got the keys object that has all the right key events listed in it.

93
00:07:01,390 --> 00:07:06,190
And as they get pressed, we just simply set them to true our Orient.

94
00:07:06,220 --> 00:07:08,200
And when they get released, they're set to false.

95
00:07:08,440 --> 00:07:15,010
And we use these values as we're iterating through the animation frame and checking to see what keys

96
00:07:15,010 --> 00:07:21,640
are currently being pressed so that we can take the appropriate actions that moving the element on the

97
00:07:21,640 --> 00:07:22,030
screen.

98
00:07:22,120 --> 00:07:22,920
And that's it.

99
00:07:23,140 --> 00:07:29,070
So hope you had an opportunity to try out some of the source code and try it some of the game functionality.

100
00:07:29,260 --> 00:07:35,500
Thanks again for taking the section on, building out the scheme from scratch using JavaScript.