HTML and CSS Reference
In-Depth Information
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:
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
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
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 onMouseMove ( e ) {
var xFactor = theCanvas . width / window . innerWidth ;
var yFactor = theCanvas . height / window . innerHeight ;
Search WWH ::

Custom Search