Tutorial 1 - player movements

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;

// Gloabl animation holder
var playerAnimation = new Array();

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

$(function(){
    // Animations declaration: 
    
    // Player space shipannimations:
    playerAnimation["idle"]    = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/player_spaceship.png"});
    playerAnimation["explode"] = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/explode.png"});
    playerAnimation["up"]      = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/boosterup.png", 
        numberOfFrame: 6, 
        delta: 14, 
        rate: 60, 
        type: $.gameQuery.ANIMATION_HORIZONTAL});
    playerAnimation["down"]    = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/boosterdown.png", 
        numberOfFrame: 6, 
        delta: 14, 
        rate: 60, 
        type: $.gameQuery.ANIMATION_HORIZONTAL});
    playerAnimation["boost"]   = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/booster1.png" , 
        numberOfFrame: 6, 
        delta: 14, 
        rate: 60, 
        type: $.gameQuery.ANIMATION_VERTICAL});
    playerAnimation["booster"] = new $.gameQuery.Animation({
        imageURL: "http://gamequeryjs.com/demos/3/booster2.png", 
        numberOfFrame: 6, 
        delta: 14, 
        rate: 60, 
        type: $.gameQuery.ANIMATION_VERTICAL});
    
    // Initialize the game:
    $("#playground").playground({height: PLAYGROUND_HEIGHT, 
                                 width: PLAYGROUND_WIDTH, 
                                 keyTracker: true});
    
    // Initialize the background
   ...