HTML5 Game Programming: Adding a Touch with the Virtual Joystick Object

By Andy Harris

Part of HTML5 Game Development For Dummies Cheat Sheet

Create a Joystick object whenever you think your game may be used on touch devices. The scene’s getMouseX() and getMouseY() methods will respond to touch input.

joyName = new Joy() Creates a new Joystick object called
getMouseX(), getMouseY() Gets the X and Y position of the mouse if the user is touching
the screen. Returns screen coordinates, not coordinates in the
scene. Typically, you want to use the scene object’s getMouseX() and getMouseY() methods
getDiffX(), getDiffY() Returns how far the user’s finger has moved from the initial
touch position. Modify these values to get joystick-like
virtKeys = true; If you create a variable called virtKeys in your main code and set it to true before building a joystick object, the
user can drag up to trigger the up arrow key, down to trigger the
down arrow, and so on.