1
00:00:00,150 --> 00:00:05,460
Welcome back in this lesson, we are going to be setting up our game board, let's start with a little

2
00:00:05,460 --> 00:00:09,120
bit of success, setting up our game play area.

3
00:00:10,840 --> 00:00:17,380
Having a height of two hundred pecs and having a width of two hundred pixels, adding in a border so

4
00:00:17,380 --> 00:00:24,130
that we can see where our game play areas, we also need to set up a series of boxes that we're going

5
00:00:24,130 --> 00:00:31,300
to use in order to show the colors and give the user an area to see another class where we've got a

6
00:00:31,300 --> 00:00:39,070
width and the boxes are going to be 50 percent white height is going to also be 50 percent so that we

7
00:00:39,070 --> 00:00:46,060
end up with four boxes, a cube with four boxes and the color of the text inside the box, we can make

8
00:00:46,060 --> 00:00:48,880
it black out in a text line.

9
00:00:48,880 --> 00:00:56,170
So a center align the text and we're going to display them as in line block elements so that they stuck

10
00:00:56,170 --> 00:00:56,700
together.

11
00:00:57,190 --> 00:01:00,220
And then lastly, we've also got an active area.

12
00:01:00,910 --> 00:01:04,870
So we want to have blocks that are active in this case.

13
00:01:04,870 --> 00:01:06,570
We're going to update the border color.

14
00:01:07,690 --> 00:01:10,390
So instead of a black border, it's going to be a red border.

15
00:01:10,900 --> 00:01:12,940
And the font color is also going to be red.

16
00:01:13,720 --> 00:01:22,130
Next, going down to our Timal set up an area that we can add and send messages to.

17
00:01:22,510 --> 00:01:28,990
So this is how we can communicate with the player of the game and we're going to start by press start

18
00:01:29,650 --> 00:01:30,100
button.

19
00:01:31,000 --> 00:01:33,280
So that will be our message to the players.

20
00:01:33,760 --> 00:01:35,230
We've got our start button.

21
00:01:35,230 --> 00:01:43,570
We've got our game area now going into our Java's setting up our main objects to contain the elements

22
00:01:43,570 --> 00:01:47,080
from the page using document query selector.

23
00:01:47,570 --> 00:01:49,960
We're going to select the elements first.

24
00:01:49,960 --> 00:01:52,570
Select the one with a class of message.

25
00:01:53,200 --> 00:01:56,200
I'll make the screen a little bit more this way.

26
00:01:56,200 --> 00:01:57,420
Space within the editor.

27
00:01:57,850 --> 00:02:03,370
So first we're getting an object called message that's going to contain the element with the class of

28
00:02:03,370 --> 00:02:03,880
message.

29
00:02:04,630 --> 00:02:10,570
Also, we're going to have one for the game area and this is going to be where all of our game area

30
00:02:10,570 --> 00:02:11,530
content is going to be.

31
00:02:11,920 --> 00:02:19,960
So using query selector, again, selecting an element with a class of game area and then lastly, selecting

32
00:02:19,960 --> 00:02:20,440
our button.

33
00:02:20,440 --> 00:02:28,570
We only have one button so we can select the button using the button tag and then add let's add in a

34
00:02:28,570 --> 00:02:29,980
click event for the button.

35
00:02:30,580 --> 00:02:37,480
So using add event listener, the event that we're listening for is a click to an anonymous function

36
00:02:37,480 --> 00:02:37,780
here.

37
00:02:38,020 --> 00:02:41,770
So whenever the button is clicked, they're going to output for now.

38
00:02:41,800 --> 00:02:44,830
Will output in the console, the word works.

39
00:02:45,040 --> 00:02:46,570
So let's go ahead and try that out.

40
00:02:46,900 --> 00:02:47,740
So refresh.

41
00:02:48,460 --> 00:02:53,110
And now when we click the start button, we see that works gets put in the console.

42
00:02:53,650 --> 00:02:55,810
So we're ready to proceed to the next step.

43
00:02:56,140 --> 00:02:59,200
So go ahead and build out your gameplay area.

44
00:03:00,730 --> 00:03:08,050
Select your elements, bring them into JavaScript as JavaScript objects, so they're ready to be used

45
00:03:08,050 --> 00:03:11,290
within the scripting that we're going to be building out in the upcoming lessons.

46
00:03:12,040 --> 00:03:17,950
Also adding an event listener to your button so that your button is fully functional and your game is

47
00:03:17,950 --> 00:03:22,060
ready to start play and you'll be ready to move on to the next lesson.

48
00:03:22,390 --> 00:03:24,880
We're going to continue to build out this application.