jQuery 1.4 Animation Techniques Beginner's Guide

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 ...