1
00:00:00,240 --> 00:00:05,910
When we come into the game, we're asking the player to press the start to begin and there's a nice

2
00:00:05,910 --> 00:00:10,740
big green start button which isn't doing a whole lot yet, and that's what we're going to take care

3
00:00:10,740 --> 00:00:11,730
of in this lesson.

4
00:00:11,910 --> 00:00:14,600
We're going to add an event listener to that button.

5
00:00:14,910 --> 00:00:20,420
So adding an event listener, we already have the button object as a BTM are variable BTM.

6
00:00:20,760 --> 00:00:26,910
So we're listening for a click on the button and when the button is clicked, then we can launch our

7
00:00:26,910 --> 00:00:30,180
start game function and now we can create start games.

8
00:00:30,180 --> 00:00:32,060
So start game function.

9
00:00:32,490 --> 00:00:34,440
We're not passing in any parameters.

10
00:00:34,440 --> 00:00:40,830
And the next step that we want to do is we actually want to hide this start button and we also want

11
00:00:40,830 --> 00:00:45,990
to hide the message because we don't want we don't need to have any of that information being sent to

12
00:00:45,990 --> 00:00:46,470
the player.

13
00:00:46,680 --> 00:00:48,330
So take that message object.

14
00:00:48,630 --> 00:00:56,100
Apply a style property to it in the style property is display setting display to none and then also

15
00:00:56,100 --> 00:01:03,180
taking button applying style display and equaling that to none as well.

16
00:01:03,210 --> 00:01:03,960
So let's try that.

17
00:01:04,260 --> 00:01:06,270
And remember, this is the player coming in.

18
00:01:06,270 --> 00:01:07,740
We've got some instructions for them.

19
00:01:07,740 --> 00:01:10,020
Press start to begin and a start button.

20
00:01:10,590 --> 00:01:14,160
So we make that button and when they click the button, we've started the game.

21
00:01:14,460 --> 00:01:18,380
So we basically need to hide that option to start the game again.

22
00:01:18,660 --> 00:01:24,960
So this is where we set up some of the player values and we're going to create a global object.

23
00:01:24,960 --> 00:01:27,880
Just call it player and we can leave that blank for now.

24
00:01:28,080 --> 00:01:31,050
So this gives us the ability to add content in there.

25
00:01:31,260 --> 00:01:37,950
And also, if you want, you can set up some values within there so we can have score and set score

26
00:01:37,950 --> 00:01:38,880
to zero.

27
00:01:39,120 --> 00:01:46,440
We can have the total that guys set that to zero as well, just comma separated because it's an object.

28
00:01:46,830 --> 00:01:51,420
Another important variable that I usually use within games is in play.

29
00:01:51,570 --> 00:01:54,510
So this is our controller to start and stop the gameplay.

30
00:01:54,750 --> 00:01:58,650
So we're going to set that to not zero, but we can set it to false.

31
00:01:58,860 --> 00:02:02,940
And then when the game is in play, then we're true and we can constantly check that.

32
00:02:03,180 --> 00:02:08,880
And the more variables you make, the more adjustments and tweaking you can do in the more interesting

33
00:02:08,880 --> 00:02:09,900
you can make your game.

34
00:02:10,080 --> 00:02:13,020
So try to make it as dynamic as possible.

35
00:02:13,260 --> 00:02:16,440
So loading in things like speed is really helpful.

36
00:02:16,440 --> 00:02:22,050
If you want to adjust the speed, then you know you've got that one variable and everything's contained

37
00:02:22,050 --> 00:02:25,560
within the player object and you can update that as needed.

38
00:02:25,890 --> 00:02:29,670
So we can also make sure that the player score is zero.

39
00:02:29,850 --> 00:02:36,060
And this is also going to give us replay ability so we can restart, restart the game if necessary.

40
00:02:36,450 --> 00:02:41,790
And we also want to update that score value within the player's visible area.

41
00:02:42,270 --> 00:02:46,350
So we're going to set up a function so we can just call that score update.

42
00:02:46,500 --> 00:02:53,580
And what this will do is this function will take the score, the element with the class of score and

43
00:02:53,580 --> 00:02:58,890
update its text content and equal that to whatever the value of player scores.

44
00:02:59,220 --> 00:03:00,780
So that's all that one is going to do.

45
00:03:00,930 --> 00:03:03,750
And we can add in additional functionality if needed.

46
00:03:04,050 --> 00:03:09,150
And I would suggest to call this every time you make an adjustment to the score.

47
00:03:09,360 --> 00:03:12,300
So just make that request to that function.

48
00:03:12,300 --> 00:03:16,280
And we also want to update the number of bad guys that are left.

49
00:03:16,650 --> 00:03:21,060
So that was the other value that we had here and updating it.

50
00:03:21,060 --> 00:03:28,140
So we've got our player and we can we've got one called Total Bad and we can set that to whatever number

51
00:03:28,140 --> 00:03:28,620
we want.

52
00:03:28,740 --> 00:03:32,010
So this can be the starting number for the number of bad guys.

53
00:03:32,310 --> 00:03:35,550
And you can also have both of these updates at the same time.

54
00:03:36,060 --> 00:03:41,490
So this is something that we can do, and it probably makes more sense that we have both of them within

55
00:03:41,490 --> 00:03:44,370
that same function so we can have a score update.

56
00:03:44,370 --> 00:03:47,040
And this will also update the number of bad guys.

57
00:03:47,340 --> 00:03:53,910
So instead of selecting the object score, we're going to select the element that is referenced with

58
00:03:53,910 --> 00:04:00,360
bad left and update the text content with whatever the value of total that is.

59
00:04:00,360 --> 00:04:02,580
And this should actually be score output.

60
00:04:02,730 --> 00:04:04,320
That's the name of the object.

61
00:04:04,680 --> 00:04:07,650
So make sure that we get that correct so I can try that out.

62
00:04:07,650 --> 00:04:13,350
And when we press start, we see we've got enemy left ten and our score is updated to zero.

63
00:04:13,620 --> 00:04:15,480
So ready to start the game.

64
00:04:15,690 --> 00:04:19,230
So what else do we need to do in order to build the gameplay?

65
00:04:19,560 --> 00:04:23,310
We need to create the bad guys, so create the bad guys.

66
00:04:24,030 --> 00:04:28,020
And we also have to launch animation.

67
00:04:28,020 --> 00:04:31,530
So within the animation, this is where all the action is going to take place.

68
00:04:32,280 --> 00:04:33,450
And then one last thing.

69
00:04:33,450 --> 00:04:36,990
We're going to take player inplay and we're going to set it to true.

70
00:04:37,140 --> 00:04:39,420
So that will start the gameplay.

71
00:04:39,540 --> 00:04:42,600
So launching the animation setting player in play to true.

72
00:04:42,720 --> 00:04:47,610
And we can actually move this one up as well to here as we're updating the player object.

73
00:04:47,610 --> 00:04:52,260
So ready to move on to the next step where we're going to create the bad guys and we're also going to

74
00:04:52,260 --> 00:04:57,000
launch the animation and we need to add a few other things before we continue.

75
00:04:57,150 --> 00:04:59,580
And that's adding in event listeners for the.

76
00:05:00,480 --> 00:05:02,620
So that's still all to come in the upcoming lesson.