1
00:00:00,330 --> 00:00:01,770
Hello and welcome back.

2
00:00:01,800 --> 00:00:06,750
So now that we've concluded our reaction game, we actually showed a couple of different versions of

3
00:00:06,750 --> 00:00:07,740
how it can work.

4
00:00:07,950 --> 00:00:13,080
We've got now one that constantly builds new clickable objects.

5
00:00:13,290 --> 00:00:17,090
And we also had one earlier that just had the one object that you had to click.

6
00:00:17,370 --> 00:00:19,640
So these ones disappear after one second.

7
00:00:19,740 --> 00:00:22,530
You have to be relatively fairly quick to click them.

8
00:00:22,530 --> 00:00:25,740
And if you go over one second, then they're already going to disappear.

9
00:00:26,010 --> 00:00:29,510
So you can't actually score anything over than one second.

10
00:00:29,670 --> 00:00:31,410
Let's go through our source code.

11
00:00:31,650 --> 00:00:35,710
So we had some styling that we set up for our elements to make them look a little bit nicer.

12
00:00:35,760 --> 00:00:41,940
We also had some HTML that we had to add in for the essential gameplay that we use JavaScript in order

13
00:00:41,940 --> 00:00:47,910
to connect to the player, the objects so that we could select them and utilize them within our code.

14
00:00:48,140 --> 00:00:53,850
We set up a player score which were not really making use of, but we could track how many times and

15
00:00:53,850 --> 00:00:54,680
high scores.

16
00:00:54,900 --> 00:00:58,140
So that's an option there to extend on the current gameplay.

17
00:00:58,350 --> 00:01:00,540
Next, we came in and we added an event listener.

18
00:01:00,720 --> 00:01:03,360
So the event listener was to start the game off.

19
00:01:03,570 --> 00:01:06,780
So we come into the state where the game hasn't started.

20
00:01:06,930 --> 00:01:12,150
There's no gameplay happening and it's up it's up to the user to click the start game button whenever

21
00:01:12,150 --> 00:01:12,570
they're ready.

22
00:01:12,930 --> 00:01:19,440
So the start game and then it launches the creation of the element that has to be clicked and that is

23
00:01:19,440 --> 00:01:21,660
done within the make item function.

24
00:01:21,660 --> 00:01:24,390
So that was really where the core gameplay comes into place.

25
00:01:24,720 --> 00:01:32,250
We get our container boundaries and place them into an object so that we know where we've got our boundaries

26
00:01:32,250 --> 00:01:35,040
and we don't want to place any of the elements outside of the boundaries.

27
00:01:35,070 --> 00:01:38,760
Then we create an elements using create elements in JavaScript.

28
00:01:38,760 --> 00:01:41,250
So create a diff setting all of the styling.

29
00:01:41,250 --> 00:01:47,940
So there's a ton of styling that we set and all using JavaScript and also some math random in order

30
00:01:47,940 --> 00:01:50,120
to randomize some of these values.

31
00:01:50,130 --> 00:01:56,040
Then we had some objects that we were adding in some values that we were adding in in order to help

32
00:01:56,040 --> 00:01:57,210
improve our gameplay.

33
00:01:57,420 --> 00:02:01,650
And this is a good object to add that in because this is our existing object.

34
00:02:01,830 --> 00:02:04,860
So it's always going to stay within that existing object.

35
00:02:05,070 --> 00:02:09,210
So we'll always have a start time value within this object that we created.

36
00:02:09,360 --> 00:02:15,090
And we can then use this start time to calculate out the difference between the end time and the start

37
00:02:15,090 --> 00:02:15,480
time.

38
00:02:15,630 --> 00:02:16,740
Divide up by a thousand.

39
00:02:16,740 --> 00:02:21,390
And that's how many seconds it took the user to click the next element.

40
00:02:21,780 --> 00:02:27,330
We output a score for the user to see how they scored, that we clear the timeout interval.

41
00:02:27,330 --> 00:02:33,990
And so this was essential because if we're removing the element and we've got a timeout and then it

42
00:02:33,990 --> 00:02:37,310
goes to try to remove the element, it's going to throw an error, as we saw.

43
00:02:37,410 --> 00:02:39,210
So that's where we've got the clear timeout.

44
00:02:39,210 --> 00:02:43,650
And then over here we're setting the timeout in a variable called div timer.

45
00:02:43,650 --> 00:02:46,170
So that's where we get that one that we can also clear out.

46
00:02:46,320 --> 00:02:47,640
And then these two do the same.

47
00:02:47,640 --> 00:02:53,760
So they make a new element under make item and it also clears that div from the existing one.

48
00:02:53,820 --> 00:02:55,680
I'm going to just change the order of that.

49
00:02:55,680 --> 00:03:01,800
Even though it is working, it's always better to remove the element and then go initiate the function

50
00:03:01,800 --> 00:03:02,820
to create a new one.

51
00:03:03,120 --> 00:03:07,290
So I'm going to do the same for over here where we're going to remove the element.

52
00:03:07,290 --> 00:03:08,400
Actually, this one was right.

53
00:03:08,640 --> 00:03:10,590
So we removed the element and then make a new one.

54
00:03:10,590 --> 00:03:16,410
And then lastly, we're appending that element that we just created into the container object.

55
00:03:16,470 --> 00:03:21,420
And even though these are going to be different instances, so every time we create a new one, it's

56
00:03:21,420 --> 00:03:25,050
creating a new div and it's playing all these properties to that new one.

57
00:03:25,050 --> 00:03:26,460
So they're not really going to interfere.

58
00:03:26,610 --> 00:03:31,020
But again, good idea to kind of to clear that up and keep the order in place.

59
00:03:31,020 --> 00:03:34,440
So thanks again for taking this section and I hope you've enjoyed it.

60
00:03:34,470 --> 00:03:40,590
I'm also always happy to answer and clarify any content questions that you may have in regards to the

61
00:03:40,590 --> 00:03:42,540
content that we've covered in this section.

62
00:03:42,570 --> 00:03:47,580
Please feel free to connect with me any time and also want to remind you that the source code has been

63
00:03:47,580 --> 00:03:51,690
included so you can trade it for yourself and build your own version of the game.