HTML and CSS Reference
In-Depth Information
aliens
.
push
({
speed
:
2
,
x
:
ALIEN_START_X
+
c
*
ALIEN_SPACING
,
y
:
ALIEN_START_Y
+
r
*
ALIEN_SPACING
,
width
:
alienImage
.
width
,
height
:
alienImage
.
height
});
}
}
}
Mouse control
Before we talk about the game play itself, let's quickly discuss mouse event handlers,
which will collect all user input for the game. When the player moves the mouse, the
eventMouseMove()
handler is called. This function operates just like the same function we
created for the audio player, except for the last two lines. Those two lines set the
x
and
y
properties of the
player
object we created back in the variable definition section of
can-
vasApp()
. We will use these two properties to position the
playerImage
on the canvas in the
drawScreen()
function:
function
function
eventMouseMove
(
event
) {
var
var
x
;
var
var
y
;
iif
(
event
.
pageX
||
event
.
pageY
) {
x
=
event
.
pageX
;
y
=
event
.
pageY
;
}
else
else
{
x
=
e
.
clientX
+
document
.
body
.
scrollLeft
+
document
.
documentElement
.
scrollLeft
;
y
=
e
.
clientY
+
document
.
body
.
scrollTop
+
document
.
documentElement
.
scrollTop
;
}
x
-=
theCanvas
.
offsetLeft
;
y
-=
theCanvas
.
offsetTop
;
mouseX
=
x
;
mouseY
=
y
;
player
.
x
=
mouseX
;
player
.
y
=
mouseY
;
}
The
eventMouseUp()
handler is called when the player presses and releases the left mouse
button. When this event occurs, a missile will fire. The
missile
object is almost identical to
the
alien
object, because it includes
speed
,
x
,
y
,
width
, and
height
properties. Because the
player is firing the missile, we set the missile's
x
and
y
positions to the center of the player's
ship on the x-axis (
player.x+.5*playerImage.width
) and to the
y
position of the player's
ship, minus the height of the missile (
player.y - missileImage.height
):
