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.