1
00:00:00,330 --> 00:00:05,670
Welcome back, this lesson, we need a way to end the game, previous lesson, we set up the aliens,

2
00:00:05,850 --> 00:00:11,010
they're moving along, they're updating the success is being updated, the position of the elements.

3
00:00:11,220 --> 00:00:16,500
And you see that they actually do go below the bottom of the container and we don't want that.

4
00:00:16,620 --> 00:00:19,980
So whenever the aliens hit the bottom, that means that the game is over.

5
00:00:20,160 --> 00:00:25,740
So in this lesson, we're going to add in the functionality to detect if the game is over and the player

6
00:00:25,770 --> 00:00:26,310
lost.

7
00:00:26,580 --> 00:00:32,280
We can detect this as we're moving the elements and each one of these elements were looping through.

8
00:00:32,310 --> 00:00:36,960
So this is all of the elements with a class of alien are included in here.

9
00:00:37,230 --> 00:00:44,340
And as we're updating the position, this is the place that we can check to see where the position of

10
00:00:44,340 --> 00:00:45,060
L is.

11
00:00:45,270 --> 00:00:46,260
So if L.

12
00:00:46,290 --> 00:00:53,430
Y position is actually going to be greater than and this is what we're going to be looking at, the

13
00:00:53,430 --> 00:00:59,820
positioning of the my ship and we can get a value of offset top position for that.

14
00:00:59,970 --> 00:01:06,690
So now whenever the aliens cross over that top position of where the ship is located over, then that

15
00:01:06,690 --> 00:01:10,170
means that it's game over and will add in the functionality for that.

16
00:01:10,200 --> 00:01:11,550
So first, let's try that out.

17
00:01:11,560 --> 00:01:13,560
And you can see that the aliens are coming down.

18
00:01:13,740 --> 00:01:17,430
And during testing, you can also update some of the speed if you want.

19
00:01:17,610 --> 00:01:21,980
So if you want the aliens to move three times faster, you can see you can update that.

20
00:01:22,140 --> 00:01:27,580
And so when they get down to where that position is, we see that game over is being invoked.

21
00:01:27,600 --> 00:01:29,700
So that's where the game needs to end.

22
00:01:29,820 --> 00:01:33,220
And you can also make it a little bit above where the offset is.

23
00:01:33,450 --> 00:01:38,760
So if you wanted to, you could take that offset and you can subtract 20 off of it and that will move

24
00:01:38,760 --> 00:01:39,790
it slightly above.

25
00:01:39,810 --> 00:01:45,380
So that will mean that if they reach offset because the bottom the top position of it is here.

26
00:01:45,510 --> 00:01:50,790
So maybe we want to start it up minus 20 or something like that because we don't want them coming that

27
00:01:50,790 --> 00:01:51,620
close to the ship.

28
00:01:51,630 --> 00:01:54,910
So you can also update these variables as needed.

29
00:01:55,050 --> 00:01:57,240
This is where the game over should function.

30
00:01:57,390 --> 00:02:02,380
And we also have that player object where we've got the game over function.

31
00:02:02,400 --> 00:02:10,080
So setting the game over to true and we can invoke our game over functionality so this can run and setting

32
00:02:10,080 --> 00:02:11,770
this up as a function.

33
00:02:11,790 --> 00:02:15,720
So game over function, we just simply run our game over function.

34
00:02:15,750 --> 00:02:20,810
We're already setting the game over option within player values.

35
00:02:20,820 --> 00:02:25,240
So next, let's create a function that's going to handle the game over functionality.

36
00:02:25,500 --> 00:02:28,020
So what do we want during game over?

37
00:02:28,170 --> 00:02:33,420
You can create some functionality that can happen when the game ends and typically this is going to

38
00:02:33,420 --> 00:02:36,330
be opposite of what you do when the game starts.

39
00:02:36,510 --> 00:02:41,490
So I'm going to move this closer together where we've got the game start function or we've got the start

40
00:02:41,490 --> 00:02:48,390
game and the game over is going to prep in order to be ready once again for the game start.

41
00:02:48,720 --> 00:02:51,380
So game over is true right now.

42
00:02:51,390 --> 00:02:54,340
So that means that we should display the start button again.

43
00:02:54,690 --> 00:02:57,660
So just as we did none, let's display blocked.

44
00:02:57,690 --> 00:03:02,420
So the start button again can update the information within that start button.

45
00:03:02,430 --> 00:03:04,680
So there's a few different options that are available to us.

46
00:03:04,710 --> 00:03:08,990
I'm going to update the inner HTML and we can say restart new game.

47
00:03:09,000 --> 00:03:09,990
So see how that looks.

48
00:03:10,230 --> 00:03:15,780
So now when the aliens reach where our panel is located, we've got game over.

49
00:03:15,900 --> 00:03:19,060
And we also noticed that the game update didn't stop.

50
00:03:19,080 --> 00:03:20,860
So we need to handle that as well.

51
00:03:20,910 --> 00:03:25,980
So with game over, we want to stop the iteration of the gameplay.

52
00:03:26,070 --> 00:03:31,200
So do a check just to make sure that player game over is not true.

53
00:03:31,200 --> 00:03:33,540
And if it is, then we won't launch into this.

54
00:03:33,750 --> 00:03:37,350
And you can also wrap all of the update if you want, within this.

55
00:03:37,500 --> 00:03:42,700
So meaning that if we do run a game over, then we're not going to run any more functions.

56
00:03:42,750 --> 00:03:44,070
So now let's see how that works.

57
00:03:44,100 --> 00:03:48,540
So now the game should stop whenever one of the aliens passes over that area.

58
00:03:48,700 --> 00:03:51,030
And you can see now that alien has crossed over.

59
00:03:51,150 --> 00:03:52,830
So it is game over.

60
00:03:52,860 --> 00:03:57,050
We get our message restart new game and we have the ability to restart the game.

61
00:03:57,420 --> 00:04:02,310
So we need to also when we restart, there's a few things we need to account for, and that's one of

62
00:04:02,340 --> 00:04:04,080
them is clearing out the current aliens.

63
00:04:04,090 --> 00:04:07,710
So whenever we click start game, we can clear out all of the aliens.

64
00:04:07,710 --> 00:04:13,400
And it's going to look better if we remove all of the aliens as we restart the game.

65
00:04:13,830 --> 00:04:19,470
So we'll do a quick loop through and we can use the same loop that we have here going into our start

66
00:04:19,470 --> 00:04:20,100
game.

67
00:04:20,110 --> 00:04:25,370
And what this will do is this will clear the aliens and we can also set up a separate function for that.

68
00:04:25,380 --> 00:04:29,610
So clearing aliens and what this will do, loop through all of the aliens.

69
00:04:29,610 --> 00:04:35,820
And we simply need to remove them from the visible area because that's what's preventing us from restarting

70
00:04:35,820 --> 00:04:36,300
the game.

71
00:04:36,450 --> 00:04:39,960
And maybe we want to show the aliens where they left off last.

72
00:04:39,990 --> 00:04:41,190
So we start the game.

73
00:04:41,190 --> 00:04:46,380
First thing that we're doing is running clear aliens, and then we're looping through all of the aliens.

74
00:04:46,620 --> 00:04:48,940
And we don't have to do this backwards.

75
00:04:48,970 --> 00:04:50,300
We can if we want, of course.

76
00:04:50,640 --> 00:04:52,530
So taking Camp Aliens length.

77
00:04:52,530 --> 00:04:59,400
So while X is less than aliens length, and here we'll just increment X so as we loop.

78
00:04:59,480 --> 00:05:06,710
Through the temp alien's index value of X, we're selecting the element and then what we're doing is

79
00:05:06,710 --> 00:05:11,660
taking the parent node, so moving up one level to whatever the parent is.

80
00:05:11,870 --> 00:05:13,590
And we know in this case it's container.

81
00:05:13,850 --> 00:05:18,620
So in order to have the flexibility, we're not going to specify what the parent is.

82
00:05:18,890 --> 00:05:22,850
So this will give you more dynamic capability in case you make some changes to the core.

83
00:05:22,850 --> 00:05:28,010
And then we're removing a child and the child that removing is the one that's going to match the temp

84
00:05:28,010 --> 00:05:28,600
aliens.

85
00:05:28,610 --> 00:05:29,840
So the element content.

86
00:05:30,000 --> 00:05:31,060
So see what happens now.

87
00:05:31,370 --> 00:05:33,580
So we restart the game and our game is over.

88
00:05:33,590 --> 00:05:38,720
So we have an option to restart and everything is working once again, restart.

89
00:05:38,720 --> 00:05:44,460
And it usually does take some debugging and testing through just to make sure everything is working.

90
00:05:44,480 --> 00:05:48,920
So the thing that we need to add in, we need to add in the ability to actually shoot the aliens and

91
00:05:48,920 --> 00:05:50,450
using collision detection.

92
00:05:50,480 --> 00:05:52,270
So that's going to be coming up in the next lesson.

93
00:05:52,400 --> 00:05:58,370
So go ahead and add in the ability to end the game, check for where the alien position is on the vertical.

94
00:05:58,640 --> 00:06:03,770
And if they've crashed through the bottom of the container, then that means that the game is over.

95
00:06:03,920 --> 00:06:08,770
And we could also end this a little bit sooner as well, where we could adjust instead of negative 40,

96
00:06:08,780 --> 00:06:09,820
it could be negative 50.

97
00:06:09,830 --> 00:06:15,230
And you can see that depending on where you want it to end, we can end it before they even get to the

98
00:06:15,230 --> 00:06:15,580
bottom.

99
00:06:15,710 --> 00:06:16,700
So that's all up to you.

100
00:06:16,910 --> 00:06:23,000
So add that in and then also add in that option to clear out the aliens when we restart the game and

101
00:06:23,000 --> 00:06:25,280
add in the end of game functionality.