HTML and CSS Reference
In-Depth Information
Updating the mouse listening code
Nowthatthegamehasbeenscaled,thecurrentmouselistenercodethatdeterminesclickswill
not work. We need to add in the following code to determine the new scale of the Canvas and
translate that into mouse clicks:
function
function onMouseClick ( e ) {
var
var mouseX ;
var
var mouseY ;
var
var xFactor = theCanvas . width / window . innerWidth ;
var
var yFactor = theCanvas . height / window . innerHeight ;
var
var mouseX1 = event . clientX - theCanvas . offsetLeft ;
var
var mouseY1 = event . clientY - theCanvas . offsetTop ;
mouseX = mouseX1 * xFactor ;
mouseY = mouseY1 * yFactor ;
//find the button clicked
var
var col = Math . floor ( mouseX / ( 92 ));
var
var row = Math . floor ( mouseY / ( 57 ));
console . log ( "row" , row , "col" , col );
tempButton = buttons [ row ][ col ];
clickSound . play ();
tempButton . pressDown ();
tempButton . draw ( context );
}
The xFactor and yFactor variablesmakeupthesecretsaucethatcreatesvaluesthataremul-
tiplied against the mouseX and mouseY values. This allows the col and row values to be easily
determined now that that the scale factor has been applied.
These are determined by dividing the current canvas width and height by the current actual
size of the web browser ( window.innerWidth and window.innerHeight ), respectively. This
will provide us with a scale factor in each dimension that we apply to the mouse position to
find the canvas pixel rather than the browser pixel. This takes the scaling out of the equation
and allows the application to use its original math rather than worry about the actual scaled
size of the Canvas.
One problem you will notice is that if the screen is scrolled vertically, this code will not work.
ThisiswhywewillcreateafullscreenversionofthegamethatcanbeplayedfromtheHome
screen of the iOS device and eliminate as much scrolling as possible.
Search WWH ::




Custom Search