jQuery 1.4 Animation Techniques Beginner's Guide

Time for action – adding the aliens to the page

Add the following code to the addAliens() inline function in the previous code block:

addAliens = function() {

  var alienPos = [13, 0],
  alien = new Image();

  alien.src = "img/alien.gif";
  alien.onload = function () {
    for (var x = 0; x < 15; x++) {
      for (var y = 0; y < 3; y++) {


        context.drawImage(alien, alienPos[0], alienPos[1]);

        var data = {
          img: alien, posX: alienPos[0], posY: alienPos[1] 
        };
        aliens.push(data);

        if (alienPos[1] < 100) {
          alienPos[1] = alienPos[1] + 50;
        } else {
          alienPos[0] = alienPos[0] + 50;
          alienPos[1] = 0;
        }
      };
    }
  };

  motionInt = setInterval(function () { alienMotion("right"); }, alienSpeed);
},

What just happened?

We first define a new array that we'll use to incrementally set the position ...