ratbum - Docs

Incomplete docs may be viewed here.

This is almost the minimum amount of code required to set up gameQuery.

(Some superfluous code has been left in for demonstrative purposes.)

<div id="playground" style="width: 700px; height: 250px; background: black;">
<div id="welcomeScreen" style="width: 700px; height: 250px; position: absolute; z-index: 100; font-family: sans-serif;">
  <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>
    <center>
      <a style="cursor: pointer;" id="startbutton" name="startbutton">Click here to start!</a>
    </center>
  </div>
</div>

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

// --------------------------------------------------------------------
// --                      the main declaration:                     --
// --------------------------------------------------------------------

$(function(){

    // Animations declaration: 
    // The background:    
    var background1 = new $.gameQuery.Animation({
        imageURL: "http://gamequery.onaluf.org/tutorials/1/background1.png"});
    var background2 = new $.gameQuery.Animation({
        imageURL: "http://gamequery.onaluf.org/tutorials/1/background2.png"}); 
    var background3 = new $.gameQuery.Animation({
        imageURL: "http://gamequery.onaluf.org/tutorials/1/background3.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, height: PLAYGROUND_HEIGHT, posx: PLAYGROUND_WIDTH})
        .addSprite("background3", {animation: background3, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
      .addGroup("foreground", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
    
    
    // this sets the id of the loading bar:
    $().setLoadBar("loadingBar", 400);

    //initialize the start button
    $("#startbutton").click(function(){
      $.playground().startGame(function(){
        $("#welcomeScreen").remove();
      });
    })
    
    $.playground().registerCallback(function(){
      //Game Logic
    }, REFRESH_RATE);
});

The result of this code can be seen below.