1
00:00:00,150 --> 00:00:06,750
Welcome in this lesson, we are going to be building out our basic structure for our game and we're

2
00:00:06,750 --> 00:00:09,980
going to be doing as much as possible with JavaScript.

3
00:00:10,140 --> 00:00:13,580
So that means even creating the elements that we're going to need for our gameplay.

4
00:00:13,770 --> 00:00:16,050
Those are going to be generated with JavaScript.

5
00:00:17,020 --> 00:00:22,080
So we want to make sure before we try to initiate the JavaScript that our document object has loaded,

6
00:00:22,480 --> 00:00:28,660
so the first function that we're going to be using is the Windows object, adding an event listener

7
00:00:28,660 --> 00:00:29,770
to the window object.

8
00:00:29,980 --> 00:00:34,920
And we're going to listen for OnLoad and once load loads.

9
00:00:34,930 --> 00:00:37,390
That basically means that the window object has loaded.

10
00:00:37,570 --> 00:00:42,450
Then we know that we can initiate a function and we've created a function called in it.

11
00:00:42,610 --> 00:00:45,090
And this is the overall load function.

12
00:00:45,120 --> 00:00:46,510
Make sure that this loads.

13
00:00:46,510 --> 00:00:50,930
We're going to refresh into the page we see get ready gets output into the console.

14
00:00:51,160 --> 00:00:53,320
So that means that we're ready to move on to the next step.

15
00:00:53,440 --> 00:00:57,700
And that's going to be to build out the elements that we're going to need for the gameplay, setting

16
00:00:57,700 --> 00:01:04,120
up a variable and to call it a div, we're going to create an element using documents, create element

17
00:01:04,330 --> 00:01:05,740
method in JavaScript.

18
00:01:05,980 --> 00:01:08,470
And what this does is it creates a specific element.

19
00:01:08,770 --> 00:01:11,560
And then we need to specify what type of element we want generate.

20
00:01:11,710 --> 00:01:17,920
So we want to create a div in this case, using that newly, freshly created div object, we're going

21
00:01:17,920 --> 00:01:19,090
to set an attribute.

22
00:01:19,480 --> 00:01:24,400
The attribute that we're setting is a class and the class that we're setting is Messitte.

23
00:01:24,430 --> 00:01:31,620
So let's refresh the page and go over to inspect our elements and we haven't added it yet to the body.

24
00:01:31,660 --> 00:01:35,130
So let's do that now and now using documents.

25
00:01:35,260 --> 00:01:42,400
So let's use document and selecting body using the method append child.

26
00:01:43,120 --> 00:01:47,560
We're going to spend the newly created div to our body element.

27
00:01:47,920 --> 00:01:48,880
So let's refresh.

28
00:01:49,120 --> 00:01:55,000
And now you can see that we've created this element and it's given a class of message has been added

29
00:01:55,000 --> 00:01:55,480
into there.

30
00:01:55,690 --> 00:02:02,330
If we want to add in some content into there, we can use in our text and we can say press.

31
00:02:03,070 --> 00:02:08,680
So this is building out all of our necessary HTML that we're going to need for the gameplay.

32
00:02:09,220 --> 00:02:15,760
Next, we also need to create a button element so we can do that within the same format where we've

33
00:02:15,760 --> 00:02:19,840
got our button that we can use document element.

34
00:02:19,840 --> 00:02:22,720
And the element that we're going to be creating is a button.

35
00:02:23,470 --> 00:02:29,860
Then for this button we're going to specify button type and that means that we're going to create a

36
00:02:29,860 --> 00:02:32,800
button and actually this should be button, not div.

37
00:02:33,220 --> 00:02:40,870
And then using the same format as we did before, we can use document body and append child and that

38
00:02:40,870 --> 00:02:44,470
will allow us to add the button to our body.

39
00:02:44,770 --> 00:02:52,630
So it's refresh and now we've created a button and type of button and we also need to enter in some

40
00:02:52,630 --> 00:02:55,030
inner text to that button.

41
00:02:57,460 --> 00:03:04,150
And we can call it start game, so let's refresh and now we've got our button to start the game and

42
00:03:04,150 --> 00:03:06,490
we're also going to add an event listener to this as well.

43
00:03:06,500 --> 00:03:07,360
So it's still to come.

44
00:03:07,750 --> 00:03:10,680
And we're going to need one more element that we can create.

45
00:03:10,810 --> 00:03:15,430
So this one can be called div one using the same format as earlier.

46
00:03:15,940 --> 00:03:21,910
We're creating an element and the element that we're creating in this case is also a div.

47
00:03:21,910 --> 00:03:27,700
So just like before and then now we've got our object information into div one.

48
00:03:28,730 --> 00:03:35,570
And we can add in a class so we can do it within the same way where we did set attribute or we could

49
00:03:35,570 --> 00:03:44,870
use class list and using add, we can add in a class to that and we can just call that game next document

50
00:03:45,050 --> 00:03:47,540
body append child.

51
00:03:48,050 --> 00:03:51,560
And let's add that div one to the child.

52
00:03:52,100 --> 00:03:55,850
And actually this doesn't need the quotes around it because this is an object.

53
00:03:56,300 --> 00:04:02,360
So save that and let's refresh it and we can see that now we've added in a class of game, we've added

54
00:04:02,360 --> 00:04:08,630
in our start button and we've added in our message and we're ready to present and start the game for

55
00:04:08,660 --> 00:04:13,530
the player and notice no tml all added in within the body via JavaScript.

56
00:04:13,550 --> 00:04:18,590
So go ahead and use JavaScript to construct your basic game starting point.

57
00:04:18,590 --> 00:04:23,150
And coming up next, we're going to make this game interactive and build a more game components.

58
00:04:23,150 --> 00:04:23,960
So that's still to come.