Graphic JavaScript

Your browser does not support the HTML5 canvas tag.

Controlling object movement using the arrow keys makes a lot of sense and it's not too awfully complicated. The key line you should pay special attention to is:

window.addEventListener("keydown",obmove,false);

Also inspect the obmove function to see how keys are recognized. After experimenting around and inspecting the code, you should be able to figure out which key codes correspond to the up, down, right, and left arrows.

Your assignment is to accomplish the following simple code alterations:

• Use the up and down arrows to enlarge and shrink the donut. Allow for a maximum size of about an inch in diameter and a minimum size of about one-tenth of an inch in diameter.
• Use the left and right arrows to move the donut around the perimeter of the applet area in either a clockwise or counter-clockwise direction.
• The starting location of the donut should be somewhere along the perimeter of the applet area.