Tutorial 1 - background animation

by wrxsti85

HTML

<script src="http://gamequery.onaluf.org/download/jquery.gamequery-0.5.0.js"></script>
<div id="playground" style="width: 700px; height: 250px; background: black;">
    <div id="welcomeScreen" style="width: 700px; height: 250px; position: absolute; z-index: 100;">
        <div style="position: absolute; top: 120px; width: 700px; color: white;">
            <div id="loadingBar" style="position: relative; left: 100px; height: 15px; width: 0px; background: red;"></div><br />
            <center><a style="cursor: pointer;" id="startbutton">click here to show the demo</a></center>
        </div>
    </div>
</div>

JavaScript

// Global constants:
var PLAYGROUND_WIDTH    = 700;
var PLAYGROUND_HEIGHT    = 250;
var REFRESH_RATE        = 30;

//Constants for the gameplay
var smallStarSpeed        = 1; //pixels per frame
    
var mediumStarSpeed       = 3; //pixels per frame
    
var bigStarSpeed          = 5; //pixels per frame
    
// --------------------------------------------------------------------
// --                      the main declaration:                     --
// --------------------------------------------------------------------

$(function(){
    // Animations declaration: 
    // The background:    
    var background1 = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/background1.png"});
    var background2 = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/background2.png"}); 
    var background3 = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/background3.png"});
    var background4 = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/background4.png"});
    var background5 = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/background5.png"});
    var background6 = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/background6.png"});

    // Initialize the game:
    $("#playground").playground({
        height: PLAYGROUND_HEIGHT, 
        width: PLAYGROUND_WIDTH, 
        keyTracker: true});

    // Initialize the background
    $.playground()
        .addGroup("background", {width: PLAYGROUND_WIDTH, 
                                 height: PLAYGROUND_HEIGHT})
        .addSprite("background1", {animation: background1, 
                                   width: PLAYGROUND_WIDTH, 
                                   height: PLAYGROUND_HEIGHT})
        .addSprite("background2", {animation: background2,
                                   width: PLAYGROUND_WIDTH, 
                                  ...