Online Book Reader

HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [185]

x = 100, y = 100

The preceding code is when it really pays off to build reusable code. I basically copied the movement.html page with a couple of important changes:

♦ Import the movement.js script. This page uses the same functions as the movement.html page, so just reimport the script.

♦ Add another script specific to reading the keyboard. You need a couple of modifications, which are housed in a second script file called keyboard.js.

♦ Keep the rest of the page similar. You still call init() when the body loads, and you still want the same visual design, except for the buttons. The surface and sprite divs are identical to the movement.html design.

♦ Take out the form. This page responds to the keyboard, so you no longer need a form.

This program begins with the movement.js script. As far as the browser is concerned, that entire script file has been loaded before the keyboard.js script appears. The basic foundation is already in place from movement. The keyboard script just handles the modifications to make keyboard support work.

Overwriting the init() function

Working with a keyboard still requires some initialization. I need a little more work in the init() function, so I make a new version to replace the version created in movement.js.

//assumes movement.js

function init(){

sprite = document.getElementById(“sprite”);

document.onkeydown = keyListener;

} // end init

The order in which you import scripts matters. If you duplicate a function, the browser interprets only the last script read.

Setting up an event handler

In my init() function, I still want to initialize the sprite (as I did in movement.js, described in the “Moving the sprite” section earlier in this chapter). When you want to read the keyboard, you need to tap into the browser’s event-handling facility. Browsers provide basic support for page-based events (such as body.onload and button.onclick), but they also provide a lower level support for more fundamental input, such as keyboard and mouse input.

If you want to read this lower level input, you need to specify a function that will respond to the input.

document.onkeydown = keyListener;

This line specifies that a special function called keyListener is called whenever the user presses a key. Keep a couple of things in mind when you create this type of event handler:

♦ It should be called in init(). You’ll probably want keyboard handling to be available immediately, so setting up event handlers in the init() function is common.

♦ The function is called as if it were a variable. This syntax is slightly different than typically used in JavaScript. When you create function handlers in HTML, you simply feed a string that represents the function name complete with parameters (button onclick = “doSomething()”). When you call a function within JavaScript (as opposed to calling the function in HTML), the function name is actually much like a variable, so it doesn’t require quotes.

If you want to know the truth, functions are variables in JavaScript. Next time somebody tells you JavaScript is a toy language, mention that it supports automatic dereferencing of function pointers and treats functions like first-class citizens. Then run away before they ask you what that means. (That’s what I do. . . .)

♦ You need to create a function with the specified name. If you’ve got this code in init, the browser calls a function called keyListener() whenever a key is pressed. (You can call the function something else, but keyListener() is a pretty good name for it.)

Responding to keystrokes

After you’ve set up an event-handler, you need to write the function to respond to keystrokes. Fortunately, this task turns out to be pretty easy.

function keyListener(e){

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

if (!e){

e = window.event;

} // end IE-specific code

//left

if (e.keyCode == 37){

moveSprite(-10, 0);

} // end if

//up

if (e.keyCode == 38){

moveSprite(0,