1
00:00:00,120 --> 00:00:06,000
Looks like we're ready to start the game, let's add in another event listener, so we've got a game

2
00:00:06,150 --> 00:00:12,660
message area that says press here to start and let's deliver on that where the user can press there

3
00:00:12,810 --> 00:00:14,550
and it will start the game.

4
00:00:14,550 --> 00:00:16,320
So start a start function.

5
00:00:16,560 --> 00:00:22,020
The event listener that we're listening for is a click event and we can create a function in order to

6
00:00:22,020 --> 00:00:22,920
start the game.

7
00:00:23,250 --> 00:00:29,120
We can just call it start to keep it really simple and place that under the keys object.

8
00:00:29,220 --> 00:00:32,340
So a function and the function is start.

9
00:00:32,670 --> 00:00:34,320
So this is where our game begins.

10
00:00:34,620 --> 00:00:37,350
And what do we need in order to start the game?

11
00:00:37,500 --> 00:00:41,750
Well, we need a character to move around and in this case, we're creating a plane.

12
00:00:42,270 --> 00:00:44,000
So let's go ahead and create that plane.

13
00:00:44,220 --> 00:00:51,750
I'm also going to create another object that we can store information into or just call it player for

14
00:00:51,750 --> 00:00:52,020
now.

15
00:00:53,260 --> 00:01:00,190
And we can set various variables in here throughout the game so we can have our score and for now default,

16
00:01:00,190 --> 00:01:01,850
we can equal that to zero.

17
00:01:02,170 --> 00:01:03,550
We can also have a speed.

18
00:01:03,970 --> 00:01:11,140
So trying to make it as dynamic as possible and also another one to check to see if the game is in play.

19
00:01:11,860 --> 00:01:17,290
So this is our basic controller for if the game is in play or not in play.

20
00:01:17,530 --> 00:01:21,600
And of course, we can add in additional variables and values as needed.

21
00:01:22,270 --> 00:01:27,700
So once we hit start, we're taking that player object and we're taking the inplay value.

22
00:01:27,700 --> 00:01:30,460
It's the boolean value and we're going to set that to true.

23
00:01:30,550 --> 00:01:32,930
So that's going to kick off our game plan.

24
00:01:33,670 --> 00:01:36,960
We can also add in and create elements.

25
00:01:36,970 --> 00:01:41,410
So creating an element we're going to call it playing so within the player object.

26
00:01:41,420 --> 00:01:42,820
So that's the one that we just created.

27
00:01:43,090 --> 00:01:48,760
We're going to use document and there's a JavaScript method to create elements that create elements

28
00:01:48,940 --> 00:01:50,890
and what type of element we want to create.

29
00:01:50,920 --> 00:01:52,630
So in this case, we want to create a do so.

30
00:01:52,630 --> 00:01:59,140
The reason I'm putting it into Player Plain is that player is a global object and that gives us the

31
00:01:59,140 --> 00:02:02,920
ability to reference it with anywhere within the other functions.

32
00:02:03,130 --> 00:02:08,320
So it makes it essentially really easy for me to grab that and make use of it in other parts of the

33
00:02:08,320 --> 00:02:10,330
code without having to pass it through.

34
00:02:10,360 --> 00:02:14,650
So the next thing we want to do is we want to set some attributes because we want to give it a class

35
00:02:14,830 --> 00:02:15,660
so it stands.

36
00:02:15,890 --> 00:02:22,090
So it's not just a plain div and give it a class and we'll create that class of plane.

37
00:02:22,090 --> 00:02:28,450
And then also what we want to do is take our game area and append a child to it.

38
00:02:28,630 --> 00:02:33,400
And that child is going to be the player playing object that we just created.

39
00:02:33,410 --> 00:02:38,900
So effectively what will happen here is we're going to create an element on the page when we hit start.

40
00:02:38,950 --> 00:02:42,940
So I think we could try that out and we hit start and we don't see anything.

41
00:02:42,940 --> 00:02:47,020
And the reason we don't see anything is that we've got an empty plane.

42
00:02:47,350 --> 00:02:49,070
But you see that it did add that in.

43
00:02:49,090 --> 00:02:53,470
So if I refresh it and if I open the game area up, there's no element.

44
00:02:53,470 --> 00:02:55,420
No, there's no div with the class of plane.

45
00:02:55,420 --> 00:02:56,970
But watch what happens when I click.

46
00:02:56,980 --> 00:02:58,660
You see that it gets added in there.

47
00:02:58,660 --> 00:02:59,950
So plane got added in.

48
00:02:59,980 --> 00:03:02,170
So that's the first step in what we need to do.

49
00:03:02,470 --> 00:03:04,810
And also we need to apply some styling.

50
00:03:04,810 --> 00:03:06,700
So it actually looks like something.

51
00:03:06,880 --> 00:03:10,750
So it actually looks like a plane and that will make a better user experience.

52
00:03:10,750 --> 00:03:15,910
We could, of course, turn it into a square if we wanted to, or we could use a background image.

53
00:03:15,940 --> 00:03:18,400
So setting its position as absolute.

54
00:03:18,400 --> 00:03:23,890
And that is absolutely important because that's going to give us the ability to position it top and

55
00:03:23,890 --> 00:03:24,250
left.

56
00:03:24,250 --> 00:03:30,400
And with JavaScript, we just need to update the style property values and not makes us gives us the

57
00:03:30,400 --> 00:03:33,690
ability to move our object around our element around.

58
00:03:33,820 --> 00:03:39,040
So setting a top position of 100 left position of 50, creating a width.

59
00:03:39,040 --> 00:03:46,480
So by default we can do 80 picks a height and also we can do that 40 kicks and taking a background image.

60
00:03:46,480 --> 00:03:50,530
And luckily for me, I already have an image stored.

61
00:03:50,530 --> 00:03:58,240
So this is called PLEN PMG and then I'm going to use background cover so that it covers the entire position

62
00:03:58,240 --> 00:03:58,570
area.

63
00:03:58,580 --> 00:04:00,580
So background size cover.

64
00:04:00,640 --> 00:04:02,210
So now let's try that out.

65
00:04:02,230 --> 00:04:06,130
So when I click it we get an element plain being attached.

66
00:04:06,130 --> 00:04:10,390
So there's our plane, so now we click it and we get a plane on our screen.

67
00:04:10,750 --> 00:04:13,270
So not a whole lot happening quite yet.

68
00:04:13,570 --> 00:04:18,010
And that's coming up in the next lesson, where we're going to move this around according to our key

69
00:04:18,010 --> 00:04:18,600
process.

70
00:04:18,620 --> 00:04:20,140
So now it's up to you.

71
00:04:20,440 --> 00:04:28,780
Go ahead and add in the start functionality to start the game, adding in our player plane on the screen,

72
00:04:28,990 --> 00:04:35,020
creating an element on the fly dynamically using create element JavaScript document, create element

73
00:04:35,020 --> 00:04:41,650
method and then set an attribute adding in that class of plane and then appending to the element the

74
00:04:41,650 --> 00:04:44,860
game area element, the plane that we just created.

75
00:04:44,860 --> 00:04:49,090
And once you have that in your project, you're ready to move on to the next step and that's to move

76
00:04:49,090 --> 00:04:50,020
that plane around.

77
00:04:50,020 --> 00:04:51,040
And that's coming up next.