1
00:00:00,420 --> 00:00:06,120
This lesson, we're going to update the scoring, as well as create a brand new bad guy to take place

2
00:00:06,120 --> 00:00:07,590
of the guy that we just removed.

3
00:00:07,980 --> 00:00:16,050
So we already have that element selected as EA so he can use the main container object and then the

4
00:00:16,050 --> 00:00:21,480
method in JavaScript, remove a child and then selecting that element.

5
00:00:21,660 --> 00:00:24,540
It's going to give us the ability to remove it off of the screen.

6
00:00:24,870 --> 00:00:28,190
So you can see that as we go over, they are disappearing.

7
00:00:28,200 --> 00:00:29,170
So now they're all gone.

8
00:00:29,220 --> 00:00:30,470
There's no more on the screen.

9
00:00:31,020 --> 00:00:36,480
What we need to still do is add in because we do have four left that are waiting within the queue.

10
00:00:36,630 --> 00:00:43,350
So we need to add those into our screen so we can do that when we do make bad.

11
00:00:43,350 --> 00:00:46,520
And what this will do is this will create another bad guy.

12
00:00:47,130 --> 00:00:52,920
So it's all we have to do to add that in and over here where we're making the bad guy, we're also checking

13
00:00:52,920 --> 00:00:57,050
to see if the told her player bad guys is greater than zero.

14
00:00:57,450 --> 00:01:02,940
So that's another factor that we can take into consideration to make sure that when we are creating

15
00:01:02,940 --> 00:01:05,180
them that they are greater than zero.

16
00:01:05,310 --> 00:01:07,770
Otherwise we're not going to create any additional ones.

17
00:01:08,020 --> 00:01:10,990
So this will prevent other ones from being created.

18
00:01:11,130 --> 00:01:17,280
So now we can try that out and we can see that as we clean these ones up, we're dropping them and we've

19
00:01:17,280 --> 00:01:19,920
got the enemy left changes as well.

20
00:01:20,220 --> 00:01:21,330
So that's all working.

21
00:01:21,330 --> 00:01:23,640
But we still need a way to end the game.

22
00:01:23,880 --> 00:01:31,380
And we did have a check here that we're doing and we're checking to see if the length is larger than

23
00:01:31,470 --> 00:01:32,850
if it's equal to zero.

24
00:01:33,030 --> 00:01:37,620
And if there are no enemies on the screen, that means that the game is over.

25
00:01:38,520 --> 00:01:41,760
So we can run a function called end game.

26
00:01:41,940 --> 00:01:46,950
And then within this function, this is where we can handle all of our game ending functionality.

27
00:01:47,880 --> 00:01:54,810
We could also do this within that same function if one or two, but in this case, I usually like to

28
00:01:54,810 --> 00:01:59,810
keep this separate again, one set in case you want to extend on the game.

29
00:01:59,820 --> 00:02:03,150
It's always a good idea to have these functions separated out.

30
00:02:03,390 --> 00:02:05,760
So we've got a function to end the game.

31
00:02:06,360 --> 00:02:11,950
And that means that we want to take the message object and update its style properties.

32
00:02:12,210 --> 00:02:15,690
So kind of the opposite of what we did when we started the game.

33
00:02:16,000 --> 00:02:17,700
So set this to block.

34
00:02:18,800 --> 00:02:26,090
And then we can also add in a message there, so text content and we can say game over.

35
00:02:26,870 --> 00:02:31,250
Also, we want to take the button and update it style as well.

36
00:02:32,300 --> 00:02:37,370
So setting its display properties to block so that we can see this the button.

37
00:02:38,050 --> 00:02:40,910
And this is going to give us the ability to restart the game.

38
00:02:41,060 --> 00:02:44,030
And then also we need to update the player in play.

39
00:02:44,210 --> 00:02:48,880
To be false is what the play action to stop.

40
00:02:49,130 --> 00:02:54,910
And we also might want to hide the player character as well as want to do that.

41
00:02:55,400 --> 00:02:56,450
So that's another option.

42
00:02:56,450 --> 00:02:58,870
But then you have to show him when you do the start.

43
00:02:59,270 --> 00:03:01,600
Let's try this out and see how this works.

44
00:03:01,910 --> 00:03:07,040
So we've got our start button and we collect all of the elements on the page.

45
00:03:08,120 --> 00:03:13,750
And once they're all collected and they've all been picked up, we're ready to restart the game.

46
00:03:13,760 --> 00:03:19,670
So we've got our start button and we can restart the game and the gameplay functions just as it did

47
00:03:19,670 --> 00:03:20,260
before.

48
00:03:20,390 --> 00:03:24,950
So we restart to zero and then we have to collect all of the enemies.

49
00:03:25,160 --> 00:03:28,230
And once we do that, we have the ability to restart again.

50
00:03:28,700 --> 00:03:33,980
So let's also add in that we're hiding and showing the basket element.

51
00:03:34,560 --> 00:03:37,710
So that's another one that we want to add in when we start the game.

52
00:03:38,870 --> 00:03:48,080
Let's take the basket and update that style display property to be block and then we're going to do

53
00:03:48,080 --> 00:03:50,390
the opposite when we end the game.

54
00:03:51,230 --> 00:03:55,710
And that means that what we want to do is we want to display it to none.

55
00:03:56,660 --> 00:04:02,810
So we don't want that one to be visible on the screen, so it's a little bit better of a gameplay experience.

56
00:04:03,500 --> 00:04:05,810
So go ahead and try that, add that into your project.

57
00:04:06,260 --> 00:04:09,390
And coming up, we've got most of the gameplay taking place.

58
00:04:10,040 --> 00:04:12,620
So next, we're going to do a few updates and tweaks.

59
00:04:12,890 --> 00:04:19,130
We're going to randomize some of the wits of these elements and reset some of these values using JavaScript

60
00:04:19,220 --> 00:04:21,100
as well as random colors.

61
00:04:21,110 --> 00:04:22,380
So they're not all the same.

62
00:04:22,640 --> 00:04:25,010
So that still is all yet to come.

63
00:04:25,010 --> 00:04:29,460
And we can also randomize its its exposition as well.

64
00:04:29,780 --> 00:04:34,340
So if we want to, we could reset that exposition every time it ends.

65
00:04:35,280 --> 00:04:37,980
So that will create a little bit more of a dynamic effect.

66
00:04:38,010 --> 00:04:39,260
So that's all still yet to come.