2D Canvas: low-level, 2D graphics rendering - HTML5 in Action - page 254

it into a separate Ctrl object to prevent cluttering your objects. Here are the steps you'll
follow in this group of tasks:
• Group 2—Capture user input.
◦ Step 1: Create a keyboard listener.
◦ Step 2: Add mouse control.
◦ Step 3: Add touch support.
◦ Step 4: Add control info via HTML.
First, you'll create keyboard listeners for left- and right-arrow keys. Second, you'll create
a mouse listener that monitors cursor movement and places the paddle there. Third,
you'll add touch functionality for devices that support the W3C's Touch Events draft ( ht-
tp://www.w3.org/TR/2011/CR-touch-events-20111215/ ) . When you've finished with the
controls, we'll give you a few tips on best practices for input techniques that improve user
experience.
Step 1: Create a keyboard listener
To detect keyboard events, you'll need to modify the existing Ctrl object with methods to
monitor up and down key presses shown in the next listing. Think of these as switches for
activating left or right paddle movement. Note that the listing's Ctrl.init() is called
from Game.setup() to fire input monitoring.