HTML and CSS Reference
In-Depth Information
well as all references to it. Inits place, we have added the following code to the
updatePlay-
er()
function:
var
var
radians
=
Math
.
atan2
((
mouseY
)
-
player
.
y
, (
mouseX
)
-
player
.
x
)
var
var
degrees
=
(
radians
*
(
180
/
Math
.
PI
));
var
var
yChange
=
(
mouseY
-
player
.
y
)
var
var
xChange
=
(
mouseX
-
player
.
x
)
var
var
delay
=
16
;
var
var
yMove
=
(
yChange
/
delay
)
*
frameRateCounter
.
step
;
var
var
xMove
=
(
xChange
/
delay
)
*
frameRateCounter
.
step
;
player
.
x
=
player
.
x
+
xMove
;
player
.
y
=
player
.
y
+
yMove
;
iif
(
degrees
<
0
) {
player
.
rotation
=
359
+
degrees
;
}
else
else
{
player
.
rotation
=
degrees
;
}
First, we find the
radians
value for the direction the player needs to point to follow the
mouse. Next, we use the
yChange
and
xChange
values to find the difference in screen pixel
locationbetweentheplayerpositionandthemouseposition.Finally,wecreatetheactualdelta
for the player movement (
xMove
and
yMove
). We have put in a delay value of
16
. This value
acts like a smooth easing function so that the player doesn't zoom straight to the mouse (or
finger) on each click. This value can be changed to easily modify the easing look and feel.
Finally we check to make sure the
degrees
value is not less than
0
. If it is, we add
359
to the
value. If it is not, we simply use the degree value as calculated. This keeps the player rotation
between
0
and
359
and doesn't allow any negative values.
Checking out the game
You can place them at any location you like. The game will be fully playable from a local
folder, but to play it from a mobile device, you will need to go to the link above or place the
files on the web server of your choice.
Let's take a look at the three different versions of the game. First,
Figure 10-16
shows the
game being played in the desktop Safari Browser. (It will also work fine in Chrome as of this
writing.)
