1
00:00:00,870 --> 00:00:05,040
Welcome back in this lesson, I'm going to show you how we're going to initiate the start of the game,

2
00:00:05,190 --> 00:00:10,030
as well as how we can set up a message area to send messages to the player.

3
00:00:10,230 --> 00:00:13,080
So right now, we don't have anything happening for the player.

4
00:00:13,260 --> 00:00:14,780
The player just sees a start button.

5
00:00:14,940 --> 00:00:16,440
They're not really sure what to do with it.

6
00:00:16,530 --> 00:00:19,360
They can click the start on it and it will disappear.

7
00:00:19,650 --> 00:00:23,570
So what we want to do is add some inter text into message.

8
00:00:23,790 --> 00:00:29,220
Now, of course, we can go into the HTML and we can type some text, refresh it and have the text show

9
00:00:29,220 --> 00:00:29,640
up there.

10
00:00:29,790 --> 00:00:32,970
But we want to do as much as possible within JavaScript.

11
00:00:33,120 --> 00:00:36,420
So let's remove that and go into our JavaScript.

12
00:00:36,540 --> 00:00:42,420
And once we've selected the message area, I also want to set up a function in order to handle some

13
00:00:42,420 --> 00:00:42,750
of this.

14
00:00:43,080 --> 00:00:50,490
We can take a message and we can update the inner HTML of message because we've got it within the message

15
00:00:50,490 --> 00:00:52,710
object just as we were using the button.

16
00:00:52,950 --> 00:00:56,550
And we can type in whatever content we want in there.

17
00:00:56,940 --> 00:00:58,920
And let me just update this before we try.

18
00:00:58,920 --> 00:01:00,050
It should say message.

19
00:01:00,330 --> 00:01:06,750
So let me refresh and we can see that Hello World now gets output into the HTML.

20
00:01:06,870 --> 00:01:12,690
And when you go into the HTML, you can see that the div with the class message now has the words hello

21
00:01:12,720 --> 00:01:17,870
world inside of it, and likely we are going to be doing this quite often.

22
00:01:18,120 --> 00:01:23,610
So usually if I'm repeating something within JavaScript, I'll create a function for it.

23
00:01:23,850 --> 00:01:29,730
So I'm going to create a function called messenger and it's going to pass in an argument of a message.

24
00:01:29,940 --> 00:01:35,540
And then within this argument, this is where we're going to just return back and do that content.

25
00:01:35,790 --> 00:01:41,370
So instead of typing in Hello World, it will take in whatever value is passed in the argument, which

26
00:01:41,370 --> 00:01:45,410
is going to make it a little bit easier for me to continuously call to it.

27
00:01:45,540 --> 00:01:47,700
So separating out that function for it.

28
00:01:47,820 --> 00:01:50,060
And I'm also going to need it down here as well.

29
00:01:50,310 --> 00:01:52,410
So here we can start by click.

30
00:01:53,280 --> 00:02:01,620
And because we did it, as in our HTML, we can set HTML as well into the messenger function within

31
00:02:01,620 --> 00:02:02,160
the argument.

32
00:02:02,910 --> 00:02:12,000
Add some values here and it'll say click the circles as quickly as you see them.

33
00:02:12,300 --> 00:02:13,880
So that's the objective of the game.

34
00:02:14,130 --> 00:02:15,060
So let's try that out.

35
00:02:15,360 --> 00:02:17,700
So say we see it says click start button.

36
00:02:18,000 --> 00:02:19,130
We click the start button.

37
00:02:19,350 --> 00:02:22,320
Now click the circles as quickly as you see them.

38
00:02:22,470 --> 00:02:23,760
We don't see any circles.

39
00:02:23,760 --> 00:02:25,080
We don't see anything happening.

40
00:02:25,230 --> 00:02:27,510
And that's what we've got to work on in the upcoming lessons.

41
00:02:27,670 --> 00:02:30,270
So for now, let's create a function.

42
00:02:30,450 --> 00:02:33,300
And this function is basically going to launch the game.

43
00:02:33,630 --> 00:02:38,640
So whatever gameplay in whatever game or actions we're going to have in here, this is all going to

44
00:02:38,640 --> 00:02:41,220
be launched within that show box.

45
00:02:41,490 --> 00:02:47,340
And essentially we're going to be showing boxes or circles and this will begin the game play.

46
00:02:48,150 --> 00:02:49,980
And that's coming up in the next session.

47
00:02:49,980 --> 00:02:50,870
I'll show you how to do that.

48
00:02:51,300 --> 00:02:52,950
So for now in this.

49
00:02:54,280 --> 00:02:59,360
Lesson we've covered off how to set up a function to update the inner HTML.

50
00:02:59,500 --> 00:03:01,330
So go ahead and add that into your project.

51
00:03:01,660 --> 00:03:04,600
And coming up next, we'll show you how to launch the gameplay.