jQuery 1.4 Animation Techniques - Index of

Canvas Animations
aliens.splice(x, 1);
clearInterval(bulletInt);
context.clearRect(newBulletPos[0],
newBulletPos[1], 3, 6);
if (!aliens.length) {
clearInterval(motionInt);
dirCounter = 0;
alienSpeed = alienSpeed - 100;
addAliens();
}
}
}
}
} else {
context.clearRect(newBulletPos[0], newBulletPos[1], 3, 6);
clearInterval(bulletInt);
}
},
bulletInt = setInterval(function () { fire(); }, 1);
}
});
};
What just happened?
We use jQuery to attach an event handler to the element that listens for
keydown events. Although we're not providing support for IE and so don't need jQuery for
its cross-browser normalization when attaching events, it still makes the event handling
process much easier.
Within the function that is executed whenever a keydown event is detected, we check for
the presence of either the left or right arrow keys, which have a which property in the event
object of 37 and 39, or the space bar, which has the code 32.
If the code 37 or 39 is detected we then use a nested if statement to determine between
the two keys. We also check that the ship hasn't reached either the left edge, or the right
edge of the canvas.
We then use the clearRect() function to remove the ship and draw a new one either 4
pixels to the left, or 4 pixels to the right depending on which key was pressed. This gives the
ship left and right motion along the bottom of the canvas.
The second branch of the outer conditional deals with the space bar being pressed, which
causes a bullet to leave the ship and travel in a straight line to the top of the canvas. The
bullets will be white, so we set the fillStyle property of the canvas to #fff.
[ 298 ]