WEBVTT 0 00:00.030 --> 00:04.080 Now that you've seen how event listeners work, here's a challenge for you. 1 00:04.650 --> 00:07.680 I want you to build a Etch-A-Sketch app. 2 00:08.370 --> 00:09.840 This is what you're aiming for. 3 00:10.320 --> 00:15.320 You should be able to create a turtle that will allow you to press the W key to 4 00:15.990 --> 00:19.980 go forwards, the S key to go backwards, 5 00:20.310 --> 00:25.310 the A key to go counterclockwise or leftwards and the D key to go right or 6 00:26.970 --> 00:31.440 clockwise. And then be able to draw things like this, 7 00:31.530 --> 00:36.000 or you could do up and right to draw curves like this. 8 00:36.330 --> 00:40.410 We're kind of creating that childhood game which is Etch-A-Sketch. 9 00:41.070 --> 00:42.660 When you press the C key, 10 00:42.720 --> 00:47.100 it should clear all your drawings and put your turtle back in the center. 11 00:47.640 --> 00:51.450 So think about what you've learned so far about how event listeners work, 12 00:51.690 --> 00:53.880 and then use the turtle documentation, 13 00:54.120 --> 00:56.550 read through the different methods that you have access to, 14 00:56.910 --> 01:00.900 and then try to figure out how you can get this Etch-A-Sketch program to work in 15 01:00.900 --> 01:04.740 the way that it's shown here. So pause the video and give this challenge a go. 16 01:08.870 --> 01:11.780 This is the demo code from previously 17 01:11.870 --> 01:16.870 and this is a really simplified version of how the event handlers work. 18 01:17.960 --> 01:21.740 So for example, we've got our move_forwards function 19 01:22.040 --> 01:27.040 which is going to be triggered when the space key is detected by the screen. 20 01:28.880 --> 01:33.620 And the screen is able to detect it because it's listening for those keyboard 21 01:33.620 --> 01:35.720 strokes and clicks. Now, 22 01:35.720 --> 01:40.720 because the onkey function can only receive a function with no arguments, 23 01:41.270 --> 01:43.640 at least this is what we see in the documentation, 24 01:43.970 --> 01:48.680 then that means we have to create four separate functions, moveforwards, 25 01:48.710 --> 01:50.810 move back, turn left, and turn right. 26 01:51.260 --> 01:55.970 So now all I need is three more of these functions, 27 01:56.360 --> 02:01.070 move backwards, turn left, and turn right. Now, 28 02:01.130 --> 02:06.130 I'm going to change this binding from space to w which is going to be move 29 02:07.080 --> 02:07.913 forwards. 30 02:08.330 --> 02:13.330 And then I'm going to copy this and make three more of these so that I've got my 31 02:13.730 --> 02:15.950 w as move_forwards, 32 02:16.430 --> 02:20.210 and then I've got my S as move_backwards, 33 02:21.050 --> 02:26.050 my a as turn_left and my d as turn_ 34 02:28.070 --> 02:28.903 right. 35 02:29.840 --> 02:34.520 So now all we need to do is to actually create these functions. 36 02:35.000 --> 02:37.850 So let's create our move_backwards 37 02:40.130 --> 02:44.990 which is going to take Tim backwards by 10 paces. 38 02:45.380 --> 02:49.160 And then the next function we're going to create is to turn_left. 39 02:49.760 --> 02:54.760 And this is going to get the current heading of our turtle and add 10 degrees to 40 02:58.400 --> 02:59.050 it. 41 02:59.050 --> 03:03.940 So if you imagine that the turtle starts out pointing towards East 42 03:04.120 --> 03:08.620 and this heading is going to be zero. And we know that to point North, 43 03:08.680 --> 03:12.400 it becomes 90. So if we want this to turn leftwards, 44 03:12.700 --> 03:16.960 then we have to add to the current heading value like this. 45 03:17.470 --> 03:19.570 So this could be our new_heading, 46 03:20.200 --> 03:23.170 and then we can get Tim to set 47 03:23.230 --> 03:28.230 it's heading to that new heading so that we turn left by 10 degrees each time. 48 03:30.520 --> 03:34.240 Now you could have also used simply just the left function. 49 03:34.240 --> 03:38.590 So you could have said tim.left by 10 degrees. Both methods work 50 03:38.680 --> 03:43.630 and it's totally up to you which one you choose. Now in order to turn right 51 03:43.660 --> 03:48.610 it's basically the opposite. So instead of adding 10 degrees, 52 03:48.850 --> 03:53.620 all we have to do is subtract 10 degrees or alternatively calling 53 03:53.620 --> 03:55.870 tim.right, passing in 10 degrees. 54 03:56.590 --> 04:01.590 Now we have all four functions defined and tied to a keystroke 55 04:02.470 --> 04:03.730 let's go ahead and test it out. 56 04:04.240 --> 04:08.320 So w should take us forwards, s should take us backwards, 57 04:08.680 --> 04:12.160 a should turn left and D should turn right. 58 04:12.670 --> 04:13.750 So perfect. 59 04:14.500 --> 04:18.760 Now the last thing we wanted to code in was some sort of way of clearing the 60 04:18.760 --> 04:22.750 screen. And we said we would bind that to the C key. 61 04:23.290 --> 04:27.790 So I'm going to create a function called clear which I'll define here. 62 04:28.570 --> 04:33.160 And this function is going to clear the screen wipe out all the drawing 63 04:33.520 --> 04:36.940 and then take our turtle back to the beginning, 64 04:36.940 --> 04:38.950 which was at the middle of the screen. 65 04:39.490 --> 04:43.750 This is going to require a little bit of reading in the turtle documentation. 66 04:43.960 --> 04:48.670 If you scroll through this list, you'll actually find two clear methods. 67 04:49.150 --> 04:53.680 One is a method that is for the turtle 68 04:54.130 --> 04:58.750 and another is a clear method for the screen, 69 04:59.650 --> 05:04.330 which is the window basically. Now this clear is going to clear everything. 70 05:04.330 --> 05:08.260 It's going to delete our turtle and everything else that's onscreen. 71 05:08.710 --> 05:10.450 Whereas this clear, 72 05:10.450 --> 05:15.220 which is tied to the turtle, is just going to delete this particular turtle's 73 05:15.220 --> 05:18.220 drawings. So this is what we need to do. 74 05:18.250 --> 05:23.250 We need to get hold of Tim and then call clear on him to get rid of all the 75 05:23.800 --> 05:25.630 drawings he's made so far. Now, 76 05:25.630 --> 05:30.220 the next thing we're going to do is we're going to bring our turtle back to the 77 05:30.220 --> 05:32.230 center, to the starting point. 78 05:32.560 --> 05:37.420 And this is going to be aided by one of the methods called home. 79 05:37.450 --> 05:41.710 So I found this in the documentation and it says that it moves the turtle to the 80 05:41.710 --> 05:45.190 origin, which is in the middle of the screen. Now, 81 05:45.190 --> 05:50.190 all we need to do is to call home and notice what happens if I run this as it is. 82 05:52.120 --> 05:56.530 So I can draw and basically make a mess. 83 05:57.740 --> 06:00.170 And then when I hit C 84 06:02.180 --> 06:04.160 you can see it goes back to the home, 85 06:04.190 --> 06:09.190 but it's actually drawing its whole path back there as well. To prevent this from 86 06:09.740 --> 06:13.250 happening we have to pull the pen up, which we've used before. 87 06:13.760 --> 06:17.960 And then once Tim has reached home, then we're going to put the pen down 88 06:18.200 --> 06:19.850 ready for the next drawing. 89 06:20.390 --> 06:25.390 So now we can make a drawing, hit C, and then it goes back to the center. 90 06:26.420 --> 06:30.470 Did you manage to complete this challenge? Don't beat yourself up 91 06:30.500 --> 06:34.400 if you didn't manage to find some of the methods like home or clear. 92 06:34.820 --> 06:38.630 It's a matter of getting practice with reading the documentation and having the 93 06:38.630 --> 06:42.200 patience to go through it and look for the relevant methods. 94 06:42.680 --> 06:45.950 And on top of that, it's just a matter of messing around with the code. 95 06:46.280 --> 06:50.600 Try things out, see what happens. And each time you add something, run the code, 96 06:50.600 --> 06:54.020 see if it does what you want it to do. And if not, fix it. 97 06:54.320 --> 06:56.810 And that is the endless cycle of software development. 98 06:57.140 --> 06:59.450 So don't get frustrated if you got stuck. 99 06:59.660 --> 07:01.520 As long as you managed to make it work in the end 100 07:01.790 --> 07:03.680 and you've learned some lessons from this process, 101 07:04.130 --> 07:07.190 then you can congratulate yourself on completing the job. 102 07:07.550 --> 07:10.310 And I find that I always learn more when I make more mistakes 103 07:10.340 --> 07:13.670 and when I struggle more. Once you're done playing around with the code, 104 07:13.820 --> 07:17.770 head over to the next lesson, and we're going to be learning about object 105 07:17.770 --> 07:22.770 state and creating multiple instances of the same object. 106 07:23.360 --> 07:26.300 So for all of that and more, I'll see you on the next lesson.