Tutorial 1 - background animation

by Quan Tran

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_HEIGHT = 250;
var PLAYGROUND_WIDTH = 700;
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:                     --
// --------------------------------------------------------------------

// Background animation
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH})
.addGroup("background", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
.addGroup("actors", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
.addGroup("playerMissileLayer", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
.addGroup("enemiesMissileLayer", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()

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"});

$("#background").addSprite("background1", {animation: background1, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
       .addSprite("background2", {animation: background2, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT, posx: PLAYGROUND_WIDTH})
       .addSprite("background3", {animation: background3, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
...