1
00:00:00,400 --> 00:00:05,490
This lesson we're going to be introducing how we can end the game and one of the best ways to do that

2
00:00:05,490 --> 00:00:09,630
is to have a value that's going to be true.

3
00:00:09,630 --> 00:00:15,690
So boolean value, if the game is in play and then we set it to false, well, we want the game played

4
00:00:15,690 --> 00:00:16,440
to stop.

5
00:00:16,860 --> 00:00:23,150
And the way that we can also do that is we're going to wrap our play game function to check to see if

6
00:00:23,160 --> 00:00:28,290
player in play is true and if it is the winner take all these actions.

7
00:00:28,740 --> 00:00:32,340
And if it's not true, well, then nothing is going to happen.

8
00:00:32,650 --> 00:00:35,910
So that gives us the ability really easily to end the game.

9
00:00:36,120 --> 00:00:43,560
So we go to game over, we're going to we can call it play game over function and let's create that

10
00:00:43,560 --> 00:00:43,750
one.

11
00:00:44,310 --> 00:00:49,950
So within here, we'll take our function and this is what we're going to launch whenever the game is

12
00:00:49,950 --> 00:00:50,350
ending.

13
00:00:50,550 --> 00:00:56,250
So the first thing that we want to do is take our player in play value and set it to have a problem

14
00:00:56,250 --> 00:01:02,850
with one of the calculations that we're not able to get the bird offset top and we can always use the

15
00:01:02,850 --> 00:01:05,340
player y value in Head Start.

16
00:01:05,520 --> 00:01:10,340
And we see that the game automatically stops when we hit the bottom of the screen.

17
00:01:11,160 --> 00:01:16,880
And this is where our game is over and we can continue to add in our game over functionality.

18
00:01:17,310 --> 00:01:19,680
So adding in our game message.

19
00:01:20,130 --> 00:01:28,320
So just as we had our class list and we added a class of hide, we're going to do the opposite here.

20
00:01:28,710 --> 00:01:30,870
We're going to add the class of remove.

21
00:01:32,480 --> 00:01:38,120
We're also going to take the bird object, let's pass in bird so we don't have to call out to it again

22
00:01:38,360 --> 00:01:43,700
and we'll pass in the current bird object, or we could just create another variable and do another

23
00:01:43,700 --> 00:01:45,890
query selector of the bird element.

24
00:01:46,980 --> 00:01:51,500
This is a couple of options there that we could do, but we're going to pass it in and we'll just call

25
00:01:51,500 --> 00:01:52,070
it bird.

26
00:01:52,280 --> 00:01:58,310
And taking that value can set the attribute and taking the style attribute.

27
00:01:58,520 --> 00:02:03,700
I'm going to add in a trance form rotate and we'll flip them upside down.

28
00:02:04,520 --> 00:02:08,180
So whenever he crashes, then he's just going to flip upside down.

29
00:02:08,960 --> 00:02:16,610
And then in the game message area, we can update the inner HTML since we're showing the game message

30
00:02:16,910 --> 00:02:18,230
and here we can write a message.

31
00:02:18,240 --> 00:02:19,250
So game over.

32
00:02:20,140 --> 00:02:21,360
And it's HTML.

33
00:02:21,400 --> 00:02:27,730
I'll make this bigger because it's going to be a long statement, so you scored and here we can output

34
00:02:27,880 --> 00:02:31,730
for the player, the player score so they can see how much they scored.

35
00:02:32,140 --> 00:02:33,230
So let's try that out.

36
00:02:33,250 --> 00:02:38,310
So now when we refresh, we hit start and we hit the bottom.

37
00:02:38,320 --> 00:02:44,260
There we see that the bird turns upside down because we hit the bottom of the available screen area

38
00:02:44,650 --> 00:02:49,750
and we get our message to start again so you can press the start again and we're actually creating another

39
00:02:49,750 --> 00:02:50,050
bird.

40
00:02:50,290 --> 00:02:52,900
There's a little bit of a problem there, a little bit of a bug there.

41
00:02:53,170 --> 00:02:57,640
So just as we're hitting start, that means that we need to clear out a few things.

42
00:02:57,850 --> 00:03:00,600
And one of the things is we've got to clear that game area.

43
00:03:00,820 --> 00:03:07,720
So before we write to it, let's take the game area and clear out our inner HTML just to be blank so

44
00:03:07,720 --> 00:03:09,310
we don't have any content in there.

45
00:03:10,000 --> 00:03:11,190
And try that again.

46
00:03:11,200 --> 00:03:13,480
Suppress press start.

47
00:03:14,440 --> 00:03:20,290
So now we can run multiple times, as many times as we want and also want to update some of the styling

48
00:03:20,290 --> 00:03:24,360
of that message area because it doesn't look good there.

49
00:03:24,370 --> 00:03:27,280
And let's add in some styling to the message area.

50
00:03:27,300 --> 00:03:28,450
So it looks a little bit better.

51
00:03:29,350 --> 00:03:33,720
And we can position this absolute so that we have more control of where we're setting it.

52
00:03:33,910 --> 00:03:37,030
So within the top and we'll make it fully dynamic.

53
00:03:37,030 --> 00:03:45,100
So text aligned center align and we'll move it left 20 percent and set its width to be 60 percent.

54
00:03:45,220 --> 00:03:50,200
So it doesn't matter what size of a screen we're always going to have, it's centered and we can set

55
00:03:50,200 --> 00:03:51,440
a background color.

56
00:03:52,090 --> 00:03:54,580
And how about we set a bigger font size?

57
00:03:55,390 --> 00:03:57,310
So to see what that looks like.

58
00:03:57,850 --> 00:03:58,570
So try that.

59
00:03:58,720 --> 00:03:59,220
So there we go.

60
00:03:59,230 --> 00:04:00,220
We got game over.

61
00:04:00,220 --> 00:04:02,670
You scored thirty one click here to start again.

62
00:04:03,130 --> 00:04:03,750
Game over.

63
00:04:03,760 --> 00:04:05,800
You scored thirty one click here to start again.

64
00:04:05,810 --> 00:04:08,350
So everything is working as expected.

65
00:04:08,680 --> 00:04:14,980
So go ahead and try this out, try it within your own application as well and create the ability to

66
00:04:14,980 --> 00:04:16,150
end the gameplay.