Lesson 19: Detecting Keyboard Input with Event Listeners

Many web-based games require the player to use the keyboard to move about. In this lesson you will learn how to detect keyboard input.

1. Start with these Project Files. After you dowload and unzip the folder, you should see the following files.

You will not be using the ghost images for quite some time. You will be using pacman.gif immediately.

The HTML includes a pacman img inside of a gameWindow div. The loadComplete() function is called once the page has been loaded.

The CSS specifies that pacman have a position of absolute, relative to the gameWindow with the apropriate left and top values so that it appears in the bottom center.

The JavaScript has only the loadComplete() function.

When index.html is opened in a web-browser, the 'page loaded' message is displayed. When this message is closed, you can see that pacman.gif is opening and closing its mouth: it is an animated GIF.

2. Add an output div. You will need this to print output to the screen during the Game Loop. The color is set to white so text will be visible on the black background. The style is inline since this element is only used for testing purposes and will eventually be deleted.

3. Remove the alert() in the loadComplete() function. Declare a global variable and once the page has loaded, set it equal to the output div, and change the HTML content of output to 'page loaded'.

When the page loads the 'page loaded' text should appear below the gameWindow.

4. Modify the loadComplete() function to display the src of the pacman img in output.

Notice that we set the src of pacman to "images/pacman.gif", the relative path, but the absolute path is displayed in output.

5. Create a Game Loop that continuously updates output to display the number of times the code has repeated. First, add loopTimer as a global variable and then in loadComplete(), start the timer that will call loop() every 50 milliseconds. Also add numLoops as another global variable and set its initial value to zero. Create the loop() function to increment the value of numLoops and then display the value in output.

As soon as the page loads, the number of loops displayed in output should begin incrementing.

6. Once you have the timer working, comment out the line of code that outputs the number of loops. Add an event listener function to run every time a key is pressed down.

There are two arguments passed to the document.addEventListener() function. The first argument, 'keydown', tells the function what you are listening for, in this example you are listening for the moment when a key is pressed down on the keyboard. The second argument is the function that will run every time the event occurs. The function here accepts an Event object as an argument (which has information about the event such as which key was pressed) and saves it as event. The function currently only does one thing, updates output to display the keyCode of the key that was pressed.

7. Reload the page and notice the values that appear as different keys are pressed. Write the keyCode of the up, down, left, and right arrows. You will be using these keys later to move pacman around the gameWindow

8. Add another event listener to run every time a key that was pressed down comes back up.

Here, you are setting the content of output to nothing when the 'keyup' event occurs. Now, the keyCode is only displayed while the key is still being held down.

keycode.info is a nice resource for determining key codes.

Test Yourself!

1. The document.addEventListener() function expects how many arguments?
2. What is the document.addEventListener() function used for?
To detect when audio is playing, such as music and sound clips.
To detect when the user makes sound, such as when they are talking or laughing.
To detect when an event occurs, such as when the user clicks the mouse or presses a key on the keyboard.
To detect when an event occurs, such as when the programmer makes an error or writes a new function.
3. What property of the Event object should you use within a keydown event listener to determine which key was pressed?
4. How can you remove all the HTML from an HTML element with an id of 'message' using JavaScript?
document.getElementById('message') = '';
document.getElementById('message').innerHTML = '';