jQuery 1.4 Animation Techniques - Index of

Canvas Animations
Time for action – the initial script
The script for the game is quite long so we'll look at it in different sections, starting with the
initial structure of the script. The following code should go into the anonymous function at
the bottom of the page:
var canvas = document.getElementById("c"),
context = canvas.getContext("2d"),
motionInt = null,
dirCounter = 0,
alienSpeed = 1000,
aliens = [],
alienMotion = function(dir) {
},
};
addAliens = function() {
},
ship = new Image(),
shipPos = [430, 600];
ship.src = "img/ship.png";
ship.onload = function() {
context.drawImage(ship, shipPos[0], shipPos[1]);
addAliens();
What just happened?
Essentially, all we've done here is define a series of variables and an onload event handler.
The canvas and context variables are defined first, as in previous examples, in order to
access and manipulate the canvas.
We also set a variable called motionInt which will be used to hold the ID of a
setInterval() function later on, a variable called dirCounter which will be used to
determine which direction the aliens move in, an alienSpeed variable to set the speed that
the aliens move at, and an empty aliens array which we'll use to keep track of each alien
on the page.
[ 292 ]