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 ...
Get HTML5 Canvas, 2nd Edition now with O’Reilly online learning.
O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.