• Choose a category
• All
• Classic-Fiction

} // end if

//right

if (e.keyCode == 39){

moveSprite(10, 0);

} // end if

//down

if (e.keyCode == 40){

moveSprite(0, 10);

} // end if

} // end keyListener

The keyListener() function is a good example of an event handler. These functions are used to determine what events have happened in the system, and to respond to those events. Here’s how to build this one:

♦ Event functions have event objects. Just knowing that an event has occurred isn’t enough. You need to know which key has been pressed. Fortunately, the browsers all have an event object available to tell you what’s happened.

♦ Many browsers pass the event as a parameter. When you create an event function, the browser automatically assigns a special parameter to the function. This parameter (normally called e) represents the event. Just make the function with a parameter called e, and most browsers create e automatically.

function keyListener(e){

♦ Internet Explorer needs a little more help. Internet Explorer doesn’t automatically create an event object for you, so you need to specifically create it.

// if e doesn’t already exist, we’re in IE so make it

if (!e){

e = window.event;

} // end IE-specific code

♦ You can use e to figure out which key was pressed. The e object has some nifty properties, including keyCode. This property returns a number that tells you which key was pressed.

Do a quick search on JavaScript event object to discover other kinds of event tricks. I show the most critical features here, but this section is just an introduction to the many interesting things you can do with events.

♦ Compare to known keycodes. You can figure out the keycodes of any keys on your keyboard and use basic if statements to respond appropriately. See the next section to discover what code is attached to your favorite keys on the keyboard.

//left

if (e.keyCode == 37){

moveSprite(-10, 0);

} // end if

♦ Call appropriate variations of moveSprite. If the user presses the left arrow, move the sprite to the left. You can use the moveSprite() function defined in movement.js (in the “Moving the sprite” section of this chapter) for this task.

Deciphering the mystery of key codes

Of course, the big mystery of a keyboard handler is where all those funky key numbers came from. How did I know that the left arrow is keycode 37, for example? It’s pretty simple, really. I just wrote a program to tell me. Figure 7-3 shows readKeys.html in action.

Run readKeys and press a few keys. You can then easily determine what keycode is related to which key on the keyboard. You may also want to look over this code if you’re a little confused; because all the code is in one place, it may be a bit easier to read than the movement examples.

If you use a notebook or international keyboard, be aware that some of the key codes may be nonstandard, especially numeric keypad keys. Try to stick to standard keys if you want to ensure that your program works on all keyboards.

Figure 7-3: This program reads the keyboard and reports the key codes.

Following the Mouse

You can also create an event-handler that reads the mouse. Figure 7-4 shows such a program.

Figure 7-4: Now the sprite stays with the mouse.

The mouse-following effect is actually quite an easy effect once you know how to read the keyboard because it works in almost exactly the same way as the keyboard approach.

Looking over the HTML

The code for followMouse.html is simple enough that I kept it in one file:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>