HTML5 Canvas, 2nd Edition

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 mouseX;
var mouseY;
var touchX;
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 used to set mouseX and mouseY when using a mobile device, while mouseX and mouseY will be 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 gameStatePlayerStart() function from GeoBlaster Extended.

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

We are going to add a listener function for each ...