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()
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() {
itemsToLoad = 5;
Search WWH ::

Custom Search