1
00:00:00,030 --> 00:00:04,080
Now that you've seen how event listeners work, here's a challenge for you.

2
00:00:04,650 --> 00:00:07,680
I want you to build a Etch-A-Sketch app.

3
00:00:08,370 --> 00:00:09,840
This is what you're aiming for.

4
00:00:10,320 --> 00:00:15,320
You should be able to create a turtle that will allow you to press the W key to

5
00:00:15,990 --> 00:00:19,980
go forwards, the S key to go backwards,

6
00:00:20,310 --> 00:00:25,310
the A key to go counterclockwise or leftwards and the D key to go right or

7
00:00:26,970 --> 00:00:31,440
clockwise. And then be able to draw things like this,

8
00:00:31,530 --> 00:00:36,000
or you could do up and right to draw curves like this.

9
00:00:36,330 --> 00:00:40,410
We're kind of creating that childhood game which is Etch-A-Sketch.

10
00:00:41,070 --> 00:00:42,660
When you press the C key,

11
00:00:42,720 --> 00:00:47,100
it should clear all your drawings and put your turtle back in the center.

12
00:00:47,640 --> 00:00:51,450
So think about what you've learned so far about how event listeners work,

13
00:00:51,690 --> 00:00:53,880
and then use the turtle documentation,

14
00:00:54,120 --> 00:00:56,550
read through the different methods that you have access to,

15
00:00:56,910 --> 00:01:00,900
and then try to figure out how you can get this Etch-A-Sketch program to work in

16
00:01:00,900 --> 00:01:04,739
the way that it's shown here. So pause the video and give this challenge a go.

17
00:01:08,870 --> 00:01:11,780
This is the demo code from previously

18
00:01:11,870 --> 00:01:16,870
and this is a really simplified version of how the event handlers work.

19
00:01:17,960 --> 00:01:21,740
So for example, we've got our move_forwards function

20
00:01:22,040 --> 00:01:27,040
which is going to be triggered when the space key is detected by the screen.

21
00:01:28,880 --> 00:01:33,620
And the screen is able to detect it because it's listening for those keyboard

22
00:01:33,620 --> 00:01:35,720
strokes and clicks. Now,

23
00:01:35,720 --> 00:01:40,720
because the onkey function can only receive a function with no arguments,

24
00:01:41,270 --> 00:01:43,640
at least this is what we see in the documentation,

25
00:01:43,970 --> 00:01:48,680
then that means we have to create four separate functions, moveforwards,

26
00:01:48,710 --> 00:01:50,810
move back, turn left, and turn right.

27
00:01:51,260 --> 00:01:55,970
So now all I need is three more of these functions,

28
00:01:56,360 --> 00:02:01,070
move backwards, turn left, and turn right. Now,

29
00:02:01,130 --> 00:02:06,130
I'm going to change this binding from space to w which is going to be move

30
00:02:07,080 --> 00:02:07,913
forwards.

31
00:02:08,330 --> 00:02:13,330
And then I'm going to copy this and make three more of these so that I've got my

32
00:02:13,730 --> 00:02:15,950
w as move_forwards,

33
00:02:16,430 --> 00:02:20,210
and then I've got my S as move_backwards,

34
00:02:21,050 --> 00:02:26,050
my a as turn_left and my d as turn_

35
00:02:28,070 --> 00:02:28,903
right.

36
00:02:29,840 --> 00:02:34,520
So now all we need to do is to actually create these functions.

37
00:02:35,000 --> 00:02:37,850
So let's create our move_backwards

38
00:02:40,130 --> 00:02:44,990
which is going to take Tim backwards by 10 paces.

39
00:02:45,380 --> 00:02:49,160
And then the next function we're going to create is to turn_left.

40
00:02:49,760 --> 00:02:54,760
And this is going to get the current heading of our turtle and add 10 degrees to

41
00:02:58,400 --> 00:02:59,050
it.

42
00:02:59,050 --> 00:03:03,940
So if you imagine that the turtle starts out pointing towards East

43
00:03:04,120 --> 00:03:08,620
and this heading is going to be zero. And we know that to point North,

44
00:03:08,680 --> 00:03:12,400
it becomes 90. So if we want this to turn leftwards,

45
00:03:12,700 --> 00:03:16,960
then we have to add to the current heading value like this.

46
00:03:17,470 --> 00:03:19,570
So this could be our new_heading,

47
00:03:20,200 --> 00:03:23,170
and then we can get Tim to set

48
00:03:23,230 --> 00:03:28,230
it's heading to that new heading so that we turn left by 10 degrees each time.

49
00:03:30,520 --> 00:03:34,240
Now you could have also used simply just the left function.

50
00:03:34,240 --> 00:03:38,590
So you could have said tim.left by 10 degrees. Both methods work

51
00:03:38,680 --> 00:03:43,630
and it's totally up to you which one you choose. Now in order to turn right

52
00:03:43,660 --> 00:03:48,610
it's basically the opposite. So instead of adding 10 degrees,

53
00:03:48,850 --> 00:03:53,620
all we have to do is subtract 10 degrees or alternatively calling

54
00:03:53,620 --> 00:03:55,870
tim.right, passing in 10 degrees.

55
00:03:56,590 --> 00:04:01,590
Now we have all four functions defined and tied to a keystroke

56
00:04:02,470 --> 00:04:03,730
let's go ahead and test it out.

57
00:04:04,240 --> 00:04:08,320
So w should take us forwards, s should take us backwards,

58
00:04:08,680 --> 00:04:12,160
a should turn left and D should turn right.

59
00:04:12,670 --> 00:04:13,750
So perfect.

60
00:04:14,500 --> 00:04:18,760
Now the last thing we wanted to code in was some sort of way of clearing the

61
00:04:18,760 --> 00:04:22,750
screen. And we said we would bind that to the C key.

62
00:04:23,290 --> 00:04:27,790
So I'm going to create a function called clear which I'll define here.

63
00:04:28,570 --> 00:04:33,160
And this function is going to clear the screen wipe out all the drawing

64
00:04:33,520 --> 00:04:36,940
and then take our turtle back to the beginning,

65
00:04:36,940 --> 00:04:38,950
which was at the middle of the screen.

66
00:04:39,490 --> 00:04:43,750
This is going to require a little bit of reading in the turtle documentation.

67
00:04:43,960 --> 00:04:48,670
If you scroll through this list, you'll actually find two clear methods.

68
00:04:49,150 --> 00:04:53,680
One is a method that is for the turtle

69
00:04:54,130 --> 00:04:58,750
and another is a clear method for the screen,

70
00:04:59,650 --> 00:05:04,330
which is the window basically. Now this clear is going to clear everything.

71
00:05:04,330 --> 00:05:08,260
It's going to delete our turtle and everything else that's onscreen.

72
00:05:08,710 --> 00:05:10,450
Whereas this clear,

73
00:05:10,450 --> 00:05:15,220
which is tied to the turtle, is just going to delete this particular turtle's

74
00:05:15,220 --> 00:05:18,220
drawings. So this is what we need to do.

75
00:05:18,250 --> 00:05:23,250
We need to get hold of Tim and then call clear on him to get rid of all the

76
00:05:23,800 --> 00:05:25,630
drawings he's made so far. Now,

77
00:05:25,630 --> 00:05:30,220
the next thing we're going to do is we're going to bring our turtle back to the

78
00:05:30,220 --> 00:05:32,230
center, to the starting point.

79
00:05:32,560 --> 00:05:37,420
And this is going to be aided by one of the methods called home.

80
00:05:37,450 --> 00:05:41,710
So I found this in the documentation and it says that it moves the turtle to the

81
00:05:41,710 --> 00:05:45,190
origin, which is in the middle of the screen. Now,

82
00:05:45,190 --> 00:05:50,190
all we need to do is to call home and notice what happens if I run this as it is.

83
00:05:52,120 --> 00:05:56,530
So I can draw and basically make a mess.

84
00:05:57,740 --> 00:06:00,170
And then when I hit C

85
00:06:02,180 --> 00:06:04,160
you can see it goes back to the home,

86
00:06:04,190 --> 00:06:09,190
but it's actually drawing its whole path back there as well. To prevent this from

87
00:06:09,740 --> 00:06:13,250
happening we have to pull the pen up, which we've used before.

88
00:06:13,760 --> 00:06:17,960
And then once Tim has reached home, then we're going to put the pen down

89
00:06:18,200 --> 00:06:19,850
ready for the next drawing.

90
00:06:20,390 --> 00:06:25,390
So now we can make a drawing, hit C, and then it goes back to the center.

91
00:06:26,420 --> 00:06:30,470
Did you manage to complete this challenge? Don't beat yourself up

92
00:06:30,500 --> 00:06:34,400
if you didn't manage to find some of the methods like home or clear.

93
00:06:34,820 --> 00:06:38,630
It's a matter of getting practice with reading the documentation and having the

94
00:06:38,630 --> 00:06:42,200
patience to go through it and look for the relevant methods.

95
00:06:42,680 --> 00:06:45,950
And on top of that, it's just a matter of messing around with the code.

96
00:06:46,280 --> 00:06:50,600
Try things out, see what happens. And each time you add something, run the code,

97
00:06:50,600 --> 00:06:54,020
see if it does what you want it to do. And if not, fix it.

98
00:06:54,320 --> 00:06:56,810
And that is the endless cycle of software development.

99
00:06:57,140 --> 00:06:59,450
So don't get frustrated if you got stuck.

100
00:06:59,660 --> 00:07:01,520
As long as you managed to make it work in the end

101
00:07:01,790 --> 00:07:03,680
and you've learned some lessons from this process,

102
00:07:04,130 --> 00:07:07,190
then you can congratulate yourself on completing the job.

103
00:07:07,550 --> 00:07:10,310
And I find that I always learn more when I make more mistakes

104
00:07:10,340 --> 00:07:13,670
and when I struggle more. Once you're done playing around with the code,

105
00:07:13,820 --> 00:07:17,770
head over to the next lesson, and we're going to be learning about object

106
00:07:17,770 --> 00:07:22,770
state and creating multiple instances of the same object.

107
00:07:23,360 --> 00:07:26,300
So for all of that and more, I'll see you on the next lesson.