1
00:00:00,700 --> 00:00:06,370
This lesson, we're going to be setting up our e-mail and then connecting it to our JavaScript to render

2
00:00:06,370 --> 00:00:13,820
out our safe cracking combination game, we need a mean container and give it a class of game.

3
00:00:13,870 --> 00:00:16,060
So this is where all of our gameplay will happen.

4
00:00:16,390 --> 00:00:19,590
Next, we need to have a button and this button.

5
00:00:19,600 --> 00:00:24,770
So this will just be a type button and they're going to give this button initial value of start.

6
00:00:25,480 --> 00:00:30,520
So when we refresh the page, we see a start button and that's where the player's going to start playing

7
00:00:30,520 --> 00:00:30,880
the game.

8
00:00:31,420 --> 00:00:34,470
Let's set up some variables to hold those values.

9
00:00:34,930 --> 00:00:45,010
I call it game area using document query selector selecting that game class element into our game area.

10
00:00:45,010 --> 00:00:46,300
Object in JavaScript.

11
00:00:47,260 --> 00:00:56,750
Also, our button is in the same format with document query selector selecting the button element.

12
00:00:57,250 --> 00:00:59,860
Next, we want to make the button element clickable.

13
00:00:59,890 --> 00:01:05,470
So using button, we're adding an event listener to that button using a click event.

14
00:01:05,980 --> 00:01:08,470
And the function that we're going to be invoking.

15
00:01:08,470 --> 00:01:11,890
This is going to be anonymous function directly within that button element.

16
00:01:12,340 --> 00:01:19,850
We're also going to set up a variable so we'll go variable and this one actually is going to change.

17
00:01:19,900 --> 00:01:25,480
So we're going to use let we'll call it game play and by default, we'll set it to false.

18
00:01:26,080 --> 00:01:31,750
When we click the button, we're going to check to see what the value of gameplay is.

19
00:01:32,050 --> 00:01:37,840
And if the gameplay is currently false, then we're going to set gameplay to true.

20
00:01:37,960 --> 00:01:45,160
And this is going to be how we're going to check to see if our button got clicked for the first time

21
00:01:45,160 --> 00:01:47,200
of our start button got clicked for the first time.

22
00:01:47,440 --> 00:01:52,620
And if it did get clicked for the first time, we're going to take that content of the button.

23
00:01:52,870 --> 00:01:59,650
So update the inner HTML of the button or enter text of the button to try that out.

24
00:01:59,980 --> 00:02:07,480
So refresh hit start and now we have check combo and now we're not doing any additional content to this

25
00:02:07,480 --> 00:02:09,630
gameplay because we're currently in play.

26
00:02:09,760 --> 00:02:15,430
So the game is in play so we can use an air conditioner and output in the console.

27
00:02:15,820 --> 00:02:19,780
And this is where we're going to be checking to see if the player generated the right combination.

28
00:02:20,290 --> 00:02:26,170
So you can see now when I click it the second time, so our buttons actually changed and the functionality

29
00:02:26,170 --> 00:02:28,420
of our button has changed dynamically as well.

30
00:02:28,540 --> 00:02:30,880
And we've only attached that one event listener.

31
00:02:31,180 --> 00:02:35,050
And this is all going by how many times we've iterated through.

32
00:02:35,200 --> 00:02:39,490
So we're using variables really to control how our gameplay progresses.

33
00:02:39,760 --> 00:02:46,960
So go ahead and set this up within your own Ed, setting up a game area so that you can play the game

34
00:02:46,960 --> 00:02:52,390
and we're going to generate all of the HTML elements using JavaScript in the upcoming lesson.

35
00:02:52,390 --> 00:02:53,290
I'll show you how to do that.

36
00:02:53,560 --> 00:02:55,330
We've also got our button.

37
00:02:55,450 --> 00:02:59,020
So this is our main button to create all the interaction for the game.

38
00:02:59,020 --> 00:03:02,170
We only need one button and initially it's going to start.

39
00:03:02,380 --> 00:03:08,650
And then once the game is in play, then it's going to be checking the combination every time the player

40
00:03:08,660 --> 00:03:10,300
passes check combination.

41
00:03:10,870 --> 00:03:13,690
So all of that is still yet to come in the upcoming lessons.