Mazes - The Essential Guide to HTML5 - page 220

canvas1.addEventListener('mousemove',stretchwall,false);
canvas1.addEventListener('mouseup',finish,false);
Well also use a variable called inmotion to keep track of whether or not the mouse button is down. The
startwall function determines the mouse coordinates (see Chapters 4 and 5 for accessing the mouse
coordinates after an event), creates a new Wall object with a reference stored in the global variable
curwall , adds the wall to the everything array, draws all the items in everything , and sets inmotion to
be true . If inmotion is not true , then the stretchwall function returns immediately without doing
anything. If inmotion is true, the code gets the mouse coordinates and uses them to set the fx and fy
values of curwall . This happens over and over as the player moves the mouse with the button pressed
down. When the button is released, the function finish is called. This function sets inmotion back to
false and adds the curwall to an array called walls.
Detecting the arrow keys
Detecting that a key on the keyboard has been pressed and determining which one is called capturing a
key stroke. This is another type of event that HTML5 and JavaScript can handle. We need to set up a
response to a key event, which is analogous to setting up a response to a mouse event. The coding starts
with invoking the addEventListener method, this time for the window :
window.addEventListener('keydown',getkeyAndMove,false);
The window is the object that holds the document defined by the HTML file. The third parameter, which
could be omitted because false is the default, relates to the order of responding to the event by other
objects. It isn't an issue for this application.
This means the getkeyAndMove function will be invoked if and when a key is pressed.
Tip: Event handling is a big part of programming. Event-based programming is often more complex
than demonstrated in this topic. For example, you may need to consider if a contained object or a
containing object also should respond to the event, or what to do if the user has multiple windows
open. Devices such as cell phones can detect events such as tilting or shaking or using your fingers
to stroke the screen. Incorporating video may involve invoking certain actions when the video is
complete. HTML5 JavaScript is not totally consistent in handling events (setting up a time out or a
time interval does not use addEventListener ), but at this point, you know enough to do research to
identify the event you want, try multiple possibilities to figure out what the event needs to be
associated with (e.g., the window or a canvas element or some other object), and then write the
function to be the event handler.
Now, as you may expect at this point, the coding to get the information for which key was pressed
involves different code for different browsers. The following code, with two ways to get the number
corresponding to the key, works in all current browsers recognizing other new features in HTML5:
if(event == null)
{
keyCode = window.event.keyCode;
window.event.preventDefault();
}
else