1
00:00:02,020 --> 00:00:02,730
Welcome back.

2
00:00:02,740 --> 00:00:09,340
In the earlier lesson, we set up our HTML, then use JavaScript in order to listen for the DOM content

3
00:00:09,340 --> 00:00:14,650
to be loaded, and now we're ready to initiate and set up our gameplay and we can do this in the same

4
00:00:14,650 --> 00:00:14,830
way.

5
00:00:14,840 --> 00:00:20,110
So if you're not creating the same game, if you want to create different types of games, the methodology

6
00:00:20,110 --> 00:00:20,680
is the same.

7
00:00:20,690 --> 00:00:27,580
You come into your HTML application and you look at what do you what does a user need in order to interact

8
00:00:27,580 --> 00:00:28,390
with their content?

9
00:00:28,570 --> 00:00:30,010
So they're going to need an input.

10
00:00:30,040 --> 00:00:31,300
That's why we created an input.

11
00:00:31,510 --> 00:00:36,280
They're not going need a button trigger, an event that's going to pick up that input information.

12
00:00:36,280 --> 00:00:40,090
So when they're ready and they've updated the input, they need a way to trigger that event.

13
00:00:40,210 --> 00:00:43,120
And then we also needed a way to communicate back to the user.

14
00:00:43,120 --> 00:00:48,950
And that's why we created that message element and the same thing here when we initiate the game.

15
00:00:48,970 --> 00:00:50,260
So what do we want to set up?

16
00:00:50,380 --> 00:00:56,080
The user has just come into the game and we should provide a message to that user about what's happening

17
00:00:56,080 --> 00:00:57,880
and what they can expect within the game.

18
00:00:57,880 --> 00:00:59,230
And with the messaging.

19
00:00:59,440 --> 00:01:05,770
The way I usually like to do it is I like to create the ability to have different ways to easily message

20
00:01:05,770 --> 00:01:10,570
to the user, because this is a function that we're going to be using over and over and over again.

21
00:01:10,720 --> 00:01:12,730
So let's create a function in order to handle that.

22
00:01:12,940 --> 00:01:16,060
So this is a message and we can just have mess in here.

23
00:01:16,600 --> 00:01:25,750
And then any time any of that content is sent out to us, we can update the inner HTML of that element

24
00:01:25,780 --> 00:01:27,630
with the value of message.

25
00:01:27,640 --> 00:01:34,030
So this way we can actually pass an HTML code and update it where you're taking that same message elements

26
00:01:34,030 --> 00:01:36,870
and we're going to update one of the style properties to it.

27
00:01:36,880 --> 00:01:43,480
So set the colour of the font so we have an option to have different font colours.

28
00:01:43,900 --> 00:01:48,640
And if we are passing in a value here, we're going to set that for the user.

29
00:01:49,150 --> 00:01:52,480
And if there's no value, then the colour will just be black.

30
00:01:52,600 --> 00:01:59,830
And for now we'll type welcome to the game and person of value for red and see if it goes to red colour.

31
00:02:00,190 --> 00:02:03,970
So we refresh and we get a message and it's red going.

32
00:02:03,970 --> 00:02:05,560
Welcome to the game.

33
00:02:05,560 --> 00:02:08,170
And we should also provide some instructions.

34
00:02:08,170 --> 00:02:10,240
So I'll create a temporary message.

35
00:02:10,270 --> 00:02:15,640
Instead of having that here, we're going to pass that information and we have more flexibility in the

36
00:02:15,640 --> 00:02:17,520
content that we're outputting from.

37
00:02:17,530 --> 00:02:24,820
And this is where we're going to also add in some dynamic capabilities, game minimum value to and then

38
00:02:24,820 --> 00:02:27,650
whatever we want the game maximum to.

39
00:02:27,820 --> 00:02:34,600
So this is our initial value and we can set that here when we're setting up game as well, or we can

40
00:02:34,600 --> 00:02:36,370
set it within this option.

41
00:02:36,370 --> 00:02:37,690
So let's call it a minimum.

42
00:02:37,690 --> 00:02:43,180
And this is just the number that we're going to use to be the minimum value that the guests can be.

43
00:02:43,330 --> 00:02:46,560
And then our maximum value is going to be ten.

44
00:02:46,600 --> 00:02:49,180
So I guess a number from one to ten.

45
00:02:49,180 --> 00:02:55,750
And that's where getting those values and you can use the game logic in order to create even more functionality

46
00:02:56,050 --> 00:02:58,240
instead of sending it as read.

47
00:02:58,240 --> 00:03:00,550
Let's set it up as you come into the game.

48
00:03:00,560 --> 00:03:01,630
Welcome to the game.

49
00:03:01,630 --> 00:03:03,730
Gets a number from one to ten.

50
00:03:03,850 --> 00:03:05,620
So the instructions are fairly clear.

51
00:03:05,740 --> 00:03:11,710
We've got an input area where the user can input some content and then they can click yes, in order

52
00:03:11,710 --> 00:03:14,950
to trigger that check to make sure that they've guessed it properly.

53
00:03:14,980 --> 00:03:20,560
So the thing that we need to do whenever we start the game is we need to create that number that they're

54
00:03:20,560 --> 00:03:21,070
guessing.

55
00:03:21,070 --> 00:03:24,640
So whatever value we want them to guess, we need to generate that.

56
00:03:24,820 --> 00:03:30,730
So that's coming up in the next lesson set up, the ability to send messages, date the style colour

57
00:03:30,730 --> 00:03:37,540
of the font, and then set up that initial message and have some dynamic values within the game that

58
00:03:37,540 --> 00:03:41,110
can be updated within the gameplay to make it easier or harder.

59
00:03:41,140 --> 00:03:43,090
And you got to be ready to move on to the next step.