Now that you've seen how event listeners work, here's a challenge for you.
I want you to build a Etch-A-Sketch app.
This is what you're aiming for.
You should be able to create a turtle that will allow you to press the W key to
go forwards, the S key to go backwards,
the A key to go counterclockwise or leftwards and the D key to go right or
clockwise. And then be able to draw things like this,
or you could do up and right to draw curves like this.
We're kind of creating that childhood game which is Etch-A-Sketch.
When you press the C key,
it should clear all your drawings and put your turtle back in the center.
So think about what you've learned so far about how event listeners work,
and then use the turtle documentation,
read through the different methods that you have access to,
and then try to figure out how you can get this Etch-A-Sketch program to work in
the way that it's shown here. So pause the video and give this challenge a go.
This is the demo code from previously
and this is a really simplified version of how the event handlers work.
So for example, we've got our move_forwards function
which is going to be triggered when the space key is detected by the screen.
And the screen is able to detect it because it's listening for those keyboard
strokes and clicks. Now,
because the onkey function can only receive a function with no arguments,
at least this is what we see in the documentation,
then that means we have to create four separate functions, moveforwards,
move back, turn left, and turn right.
So now all I need is three more of these functions,
move backwards, turn left, and turn right. Now,
I'm going to change this binding from space to w which is going to be move
forwards.
And then I'm going to copy this and make three more of these so that I've got my
w as move_forwards,
and then I've got my S as move_backwards,
my a as turn_left and my d as turn_
right.
So now all we need to do is to actually create these functions.
So let's create our move_backwards
which is going to take Tim backwards by 10 paces.
And then the next function we're going to create is to turn_left.
And this is going to get the current heading of our turtle and add 10 degrees to
it.
So if you imagine that the turtle starts out pointing towards East
and this heading is going to be zero. And we know that to point North,
it becomes 90. So if we want this to turn leftwards,
then we have to add to the current heading value like this.
So this could be our new_heading,
and then we can get Tim to set
it's heading to that new heading so that we turn left by 10 degrees each time.
Now you could have also used simply just the left function.
So you could have said tim.left by 10 degrees. Both methods work
and it's totally up to you which one you choose. Now in order to turn right
it's basically the opposite. So instead of adding 10 degrees,
all we have to do is subtract 10 degrees or alternatively calling
tim.right, passing in 10 degrees.
Now we have all four functions defined and tied to a keystroke
let's go ahead and test it out.
So w should take us forwards, s should take us backwards,
a should turn left and D should turn right.
So perfect.
Now the last thing we wanted to code in was some sort of way of clearing the
screen. And we said we would bind that to the C key.
So I'm going to create a function called clear which I'll define here.
And this function is going to clear the screen wipe out all the drawing
and then take our turtle back to the beginning,
which was at the middle of the screen.
This is going to require a little bit of reading in the turtle documentation.
If you scroll through this list, you'll actually find two clear methods.
One is a method that is for the turtle
and another is a clear method for the screen,
which is the window basically. Now this clear is going to clear everything.
It's going to delete our turtle and everything else that's onscreen.
Whereas this clear,
which is tied to the turtle, is just going to delete this particular turtle's
drawings. So this is what we need to do.
We need to get hold of Tim and then call clear on him to get rid of all the
drawings he's made so far. Now,
the next thing we're going to do is we're going to bring our turtle back to the
center, to the starting point.
And this is going to be aided by one of the methods called home.
So I found this in the documentation and it says that it moves the turtle to the
origin, which is in the middle of the screen. Now,
all we need to do is to call home and notice what happens if I run this as it is.
So I can draw and basically make a mess.
And then when I hit C
you can see it goes back to the home,
but it's actually drawing its whole path back there as well. To prevent this from
happening we have to pull the pen up, which we've used before.
And then once Tim has reached home, then we're going to put the pen down
ready for the next drawing.
So now we can make a drawing, hit C, and then it goes back to the center.
Did you manage to complete this challenge? Don't beat yourself up
if you didn't manage to find some of the methods like home or clear.
It's a matter of getting practice with reading the documentation and having the
patience to go through it and look for the relevant methods.
And on top of that, it's just a matter of messing around with the code.
Try things out, see what happens. And each time you add something, run the code,
see if it does what you want it to do. And if not, fix it.
And that is the endless cycle of software development.
So don't get frustrated if you got stuck.
As long as you managed to make it work in the end
and you've learned some lessons from this process,
then you can congratulate yourself on completing the job.
And I find that I always learn more when I make more mistakes
and when I struggle more. Once you're done playing around with the code,
head over to the next lesson, and we're going to be learning about object
state and creating multiple instances of the same object.
So for all of that and more, I'll see you on the next lesson.