Today we're going to draw. But better than that, we're going to have a drawing competition. But first we have to prepare our canvas to our awesome drawings.
In this project you have a few files:
index.html
js/index.js
js/tiny-turtle/
js/listeners.js
You will do all your work in js/listeners.js
. In this file you will need to complete the following steps:
- Create an event listener on the
document
to listen for thekeydown
event - Test which key has been pressed using
event.keyCode
- Decide which controls you want to use (arrow keys are the easiest) and create your event handlers
- Make an event listener and event handler for the "Clear" button
- Draw an awesome picture
After you create your event listeners and event handlers, you'll be able to call a few functions to make the drawing. Here are all the functions:
Turtle.forward()
- This moves the line forward
5px
- This moves the line forward
Turtle.right()
- This rotates the line direction
10 degrees
to the right
- This rotates the line direction
Turtle.left()
- This rotates the line direction
10 degrees
to the left
- This rotates the line direction
Turtle.clear()
- This will erase the image and setup the line for a new drawing
IMPORTANT: There's no 'undo' functionality :)