Going Mobile! - HTML5 Canvas - page 864

Touch Move Events

The one difference between a desktop mouse and a mobile device is the finger touch. The
finger-touch movement when “tapped” is identical to the mouse-click, so we were able to use
the same basic code for each in the bsbingo_scaled game. For Retro Blaster Touch, we will
need to have two separate events set up. One will be for the finger-touch events, and one will
be for the mouse events. The same scale factor algorithm as in bsbingo_scaled can be applied
to each set of events to determine the correct x and y coordinate for the mouse for whichever
device (Safari Desktop or Safari Mobile) the game is played on.

New global variables

We will be defining a new set of global variables that will be used to move the player ship on
the game screen:

//touch
var

var mouseX ;
var var mouseY ;

var var touchX ;

var

var touchY ;

The touch and mouse listener functions will translate the position of the finger or mouse on
the game screen to the mouseX and mouseY variables. touchX and touchY will be caught and
usedtoset mouseX and mouseY whenusingamobiledevice,while mouseX and mouseY willbe
used directly when using a desktop browser. We will demonstrate this code in the following
section.

New listener functions

When the player ship starts, we will add these new functions to the gameStatePlayer-
Start() function from GeoBlaster Extended.

theCanvas . addEventListener ( "mousemove" , onMouseMove , false false );

theCanvas . addEventListener ( "touchmove" , onTouchMove , false false );

We are going to add a listener function for each of these and also a separate function that will
translate the touchX and touchY values into mouseX and mouseY . This way, the game doesn't
need to know what type of device it is running on; it will work with both mouse and touch
events in the same manner.

function function onMouseMove ( e ) {

var

var xFactor = theCanvas . width / window . innerWidth ;
var

var yFactor = theCanvas . height / window . innerHeight ;