HTML and CSS Reference
In-Depth Information
var audioType;
The
mouseX
and
mouseY
variables will hold the current
x
and
y
location of the mouse:
var mouseX;
var mouseY;
The
player
variable will hold a dynamic object with the
x
and
y
location of the player
ship (controlled with the mouse):
var player = {x:250,y:475};
Both the
aliens
and
missiles
arrays will hold lists of dynamic objects for displaying
aliens and missiles on the canvas:
var aliens = new Array();
var missiles = new Array();
The next five constants set the number of aliens (
ALIEN_ROWS
,
ALIEN_COLS
), their starting
location (
ALIEN_START_X
,
ALIEN_START_Y
), and their spacing on screen (
ALIEN_SPACING
):
const ALIEN_START_X = 25;
const ALIEN_START_Y = 25;
const ALIEN_ROWS = 5;
const ALIEN_COLS = 8;
const ALIEN_SPACING = 40;
Also in the
canvasApp()
function, we need to set up event handlers for
mouseup
and
mousemove
. To create the game loop, we need to set up our interval to call the
run()
function:
theCanvas.addEventListener("mouseup",eventMouseUp, false);
theCanvas.addEventListener("mousemove",eventMouseMove, false);
setInterval(run, 33);
At this point,
run()
will be called and our game loop will start by calling the function
associated with the value of
appState
.
Preloading all assets without global variables
We just showed that the
appState
variable was initialized to
STATE_INIT
, which means
that when the
run()
function is called for the first time, the
initApp()
function will be
called. The good news (at least for this discussion) is that
initApp()
does very little that
we have not already seen—it just does it in the context of the Canvas application. The
result? Now we don't need any global variables.
In the code below, notice that we are using the same strategy. We have a single event
handler for all loaded assets (
itemLoaded()
),we set
itemsToLoad
to
5
(three graphics and
two sounds), and we set the
appState
to
STATE_LOADING
at the end of the function. The
rest of the code is all simple review:
function initApp() {
loadCount=0;
itemsToLoad = 5;
