1 00:00:00,240 --> 00:00:03,930 Welcome back in this lesson, we're going to do a quick improvement on the game. 2 00:00:04,170 --> 00:00:09,590 So currently we have a game where we have an element that shows up somewhere randomly within our container. 3 00:00:09,780 --> 00:00:13,270 We track how long it takes the user to click that element. 4 00:00:13,680 --> 00:00:18,840 So what if we want to make an improvement to this where we don't want the game to stop and start and 5 00:00:18,840 --> 00:00:21,840 always have that start button that says we're going to do in this lesson? 6 00:00:21,840 --> 00:00:27,150 Where are we going to set up some intervals and have some timers that we need to clear out and so that 7 00:00:27,150 --> 00:00:29,660 we can continuously keep playing the game. 8 00:00:30,120 --> 00:00:33,770 So we've got our event listener where we're adding in the start button. 9 00:00:34,110 --> 00:00:38,070 So what we want to do here is we want to relaunch Mieke items. 10 00:00:38,070 --> 00:00:40,410 So this will make another item after we clicked it. 11 00:00:40,710 --> 00:00:48,330 We can get rid of the start game button, just simply hide that one and we've got our score area so 12 00:00:48,330 --> 00:00:49,590 that one will still show up. 13 00:00:49,590 --> 00:00:54,620 And instead of having a start button, we're just going to launch another element to try that out. 14 00:00:54,960 --> 00:00:56,180 So we've got our elements. 15 00:00:56,190 --> 00:01:01,140 We've got another element, another element, another element to it if we want to make it even more 16 00:01:01,140 --> 00:01:08,040 interesting where we want to have a timer so that setting up another object here called timer, we're 17 00:01:08,040 --> 00:01:10,350 going to set the time out. 18 00:01:10,800 --> 00:01:15,510 And just as we've built before, we need some values here, some parameters within the timeout. 19 00:01:15,720 --> 00:01:19,870 It's going to run this block a after the timeout completes. 20 00:01:20,160 --> 00:01:22,860 So right now, we'll set it up for one second. 21 00:01:23,100 --> 00:01:28,440 And basically what will happen is we're going to show the element for one second and then we're going 22 00:01:28,440 --> 00:01:30,510 to get rid of it off of the page. 23 00:01:30,750 --> 00:01:38,190 So taking the container and removing the child with the attributes, with the element that matches the 24 00:01:38,190 --> 00:01:42,270 div and we've still got that div object and then we're going to create a brand new one. 25 00:01:42,390 --> 00:01:47,700 So it's going to be a little bit of a problem with this, because what's going to happen is that if 26 00:01:47,700 --> 00:01:52,890 we click it, then we're going to throw an error and if we don't click it, then everything's fine. 27 00:01:53,040 --> 00:01:57,410 We're going to have a new square showing up every second. 28 00:01:57,420 --> 00:01:58,790 It's always going to be moving around. 29 00:01:58,860 --> 00:02:04,590 So what we need to do is we need to update our code where we need to clear the interval. 30 00:02:04,800 --> 00:02:10,560 And that's why I give the interval a variable name so that we can access that interval and we can do 31 00:02:10,560 --> 00:02:13,030 a clear timeout or clear interval. 32 00:02:13,050 --> 00:02:14,460 And in this case, it's a timeout. 33 00:02:14,640 --> 00:02:17,900 So we need to clear this one out before we remove the child. 34 00:02:17,910 --> 00:02:23,490 And this will give us the ability to click it, not have it interfere with our gameplay so we can see 35 00:02:23,490 --> 00:02:26,310 that we're clicking it and we're updating the score. 36 00:02:26,460 --> 00:02:27,690 And it actually doesn't matter. 37 00:02:27,700 --> 00:02:32,400 So if we click it, if we miss it, so sometimes we're clicking at sometimes we're missing it and so 38 00:02:32,400 --> 00:02:32,580 on. 39 00:02:32,730 --> 00:02:35,630 So this is more effective way to create the gameplay. 40 00:02:35,730 --> 00:02:41,820 So go ahead and add in these changes and updates and you're free to update and tweak the game as necessary 41 00:02:41,970 --> 00:02:44,460 in order to produce the gameplay that you're looking for. 42 00:02:44,460 --> 00:02:49,140 And coming up next, we'll do a quick overview and a review of the code that we've worked on in order 43 00:02:49,140 --> 00:02:50,370 to build this application.