Parallax scrolling

Parallax scrolling is a very neat way of giving a little depth to a 2D game. It uses the principle that the farther away objects are, the slower they seem to move. It's typically what you see when you look through the side window of a moving car.

The first layer in the preceding figure will be the group containing all the sprites and the tile map. The second and third layers will simply be images. We will use the same technique we used in the previous game: we will simply use the background position to generate their movement.

The final code takes place in the main game loop just after we move the group around to keep the player visible on screen:

var margin = 200;
var playerPos = gf.x(player.div);
if(playerPos > 200) {
    gf.x(group, 200 - playerPos);
    $("#backgroundFront").css("background-position",""+(200 * 0.66 - playerPos * 0.66)+"px 0px");
    $("#backgroundBack").css("background-position",""+(200 * 0.33 - playerPos * 0.33)+"px 0px");
}

As you can see, the code...