Tutorial 1 - Player

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;

//Global animation holders
var playerAnimation = new Array();

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

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

$.playground().addGroup("actors", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
.addGroup("player", {posx: 300, posy: 50, width: 100, height: 26})
.addSprite("playerBoostUp", {posx: 37, posy: 15, width: 14, height: 18})
.addSprite("playerBody",{animation: playerAnimation["idle"], posx: 0,  posy: 0, width: 100, height: 26})
.addSprite("playerBooster", {animation:playerAnimation["boost"], posx: -32, posy: 5, width: 36, height: 14})
.addSprite("playerBoostDown", {posx: 37, posy: -7, width: 14, height: 18})

$().setLoadBar("loadingBar", 400);
$("#startbutton").click(function(){
   ...