The Basic Approach

By now, you’ve probably seen how to work with the keyboard. You may even have seen the approach we use for having something we draw follow the mouse cursor around. The way we move things using the keyboard combines a little bit of what you’ve seen in those two tutorials. If you haven’t already seen what is in those two tutorials, don’t worry. You aren’t missing that much, and we’ll review the interesting parts again over here :P

Starting at the very top, we have something we’ve drawn on our canvas:

That something for our example is a triangle. This triangle is made up of three points that are represented by a horizontal and vertical number:

These numbers are the only things that ensure our triangle looks they way it does. More importantly, for what we are trying to do, these numbers are the only things that help specify where our triangle is actually positioned.

At this point, our task should be getting a bit clearer. Because we can adjust where the triangle appears by just fiddling around with a couple of numbers, our job is to figure out how to have each arrow key press be responsible for that fiddling. What we are going to do in the next couple of sections is put all of these English words together into some totally rad JavaScript that works...more or less!