topical media & game development
mobile-query-game-demos-3-tutorial.js / js
// Global constants:
var PLAYGROUND_WIDTH = 700;
var PLAYGROUND_HEIGHT = 250;
var REFRESH_RATE = 15;
var GRACE = 2000;
var MISSILE_SPEED = 10; //px per frame
/*Constants for the gameplay*/
var smallStarSpeed = 1 //pixels per frame
var mediumStarSpeed = 3 //pixels per frame
var bigStarSpeed = 4 //pixels per frame
// Gloabl animation holder
var playerAnimation = new Array();
var missile = new Array();
var enemies = new Array(3); // There are three kind of enemies in the game
// Game state
var bossMode = false;
var bossName = null;
var playerHit = false;
var timeOfRespawn = 0;
var gameOver = false;
var missileCounter = 0;
// Some hellper functions :
// Function to restart the game:
function restartgame(){
window.location.reload();
};
function explodePlayer(playerNode){
playerNode.children().hide();
playerNode.addSprite("explosion",{animation: playerAnimation["explode"], width: 100, height: 26})
playerHit = true;
}
// Game objects:
function Player(node){
this.node = node;
//this.animations = animations;
this.grace = false;
this.replay = 3;
this.shield = 3;
this.respawnTime = -1;
// This function damage the ship and return true if this cause the ship to die
this.damage = function(){
if(!this.grace){
this.shield--;
if (this.shield == 0){
return true;
}
return false;
}
return false;
};
// this try to respawn the ship after a death and return true if the game is over
this.respawn = function(){
this.replay--;
if(this.replay==0){
return true;
}
this.grace = true;
this.shield = 3;
this.respawnTime = (new Date()).getTime();
$(this.node).fadeTo(0, 0.5);
return false;
};
this.update = function(){
if((this.respawnTime > 0) && (((new Date()).getTime()-this.respawnTime) > 3000)){
this.grace = false;
$(this.node).fadeTo(500, 1);
this.respawnTime = -1;
}
}
return true;
}
function Enemy(node){
this.shield = 2;
this.speedx = -5;
this.speedy = 0;
this.node = node;
// deals with damage endured by an enemy
this.damage = function(){
this.shield--;
if(this.shield == 0){
return true;
}
return false;
};
// updates the position of the enemy
this.update = function(playerNode){
this.updateX(playerNode);
this.updateY(playerNode);
};
this.updateX = function(playerNode){
this.node.x(this.speedx, true);
};
this.updateY= function(playerNode){
var newpos = parseInt(this.node.css("top"))+this.speedy;
this.node.y(this.speedy, true);
};
}
function Minion(node){
this.node = node;
}
Minion.prototype = new Enemy();
Minion.prototype.updateY = function(playerNode){
if(this.node.y() > (PLAYGROUND_HEIGHT - 100)){
this.node.y(-2, true)
}
}
function Brainy(node){
this.node = node;
this.shield = 5;
this.speedy = 1;
this.alignmentOffset = 5;
}
Brainy.prototype = new Enemy();
Brainy.prototype.updateY = function(playerNode){
if((this.node.y()+this.alignmentOffset) > playerNode.y()){
this.node.y(-this.speedy, true);
} else if((this.node.y()+this.alignmentOffset) < playerNode.y()){
this.node.y(this.speedy, true);
}
}
function Bossy(node){
this.node = node;
this.shield = 20;
this.speedx = -1;
this.alignmentOffset = 35;
}
Bossy.prototype = new Brainy();
Bossy.prototype.updateX = function(){
if(this.node.x() > (PLAYGROUND_WIDTH - 200)){
this.node.x(this.speedx, true)
}
}
// --------------------------------------------------------------------------------------------------------------------
// -- the main declaration: --
// --------------------------------------------------------------------------------------------------------------------
$(function(){
// Aniomations declaration:
// The background:
var background1 = new .gQ.Animation({imageURL: "background2.png"});
var background3 = new .gQ.Animation({imageURL: "background4.png"});
var background5 = new .gQ.Animation({imageURL: "background6.png"});
// Player space shipannimations:
playerAnimation["idle"] = new .gQ.Animation({imageURL: "player_explode.png", numberOfFrame: 4, delta: 26, rate: 60, type: .gQ.Animation({imageURL: "boosterup.png", numberOfFrame: 6, delta: 14, rate: 60, type: .gQ.Animation({imageURL: "boosterdown.png", numberOfFrame: 6, delta: 14, rate: 60, type: .gQ.Animation({imageURL: "booster1.png" , numberOfFrame: 6, delta: 14, rate: 60, type: .gQ.Animation({imageURL: "booster2.png", numberOfFrame: 6, delta: 14, rate: 60, type: .gQ.Animation({imageURL: "minion_idle.png", numberOfFrame: 5, delta: 52, rate: 60, type: .gQ.Animation({imageURL: "minion_explode.png", numberOfFrame: 11, delta: 52, rate: 30, type: .gQ.ANIMATION_CALLBACK});
// 2nd kind of enemy:
enemies[1] = new Array();
enemies[1]["idle"] = new .gQ.ANIMATION_VERTICAL});
enemies[1]["explode"] = new .gQ.ANIMATION_VERTICAL | .gQ.Animation({imageURL: "bossy_idle.png", numberOfFrame: 5, delta: 100, rate: 60, type: .gQ.Animation({imageURL: "bossy_explode.png", numberOfFrame: 9, delta: 100, rate: 60, type: .gQ.ANIMATION_CALLBACK});
// Weapon missile:
missile["player"] = new .gQ.ANIMATION_VERTICAL});
missile["enemies"] = new .gQ.ANIMATION_VERTICAL});
missile["playerexplode"] = new .gQ.ANIMATION_VERTICAL | .gQ.Animation({imageURL: "enemy_missile_explode.png" , numberOfFrame: 6, delta: 15, rate: 90, type: .gQ.ANIMATION_CALLBACK});
// Initialize the game:
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH, keyTracker: true});
// Initialize the background
.loadCallback(function(percent){
$("#loadingBar").width(400*percent);
});
//initialize the start button
$("#startbutton").click(function(){
.playground().registerCallback(function(){
if(!gameOver){
$("#shieldHUD").html("shield: "+$("#player")[0].player.shield);
$("#lifeHUD").html("life: "+$("#player")[0].player.replay);
//Update the movement of the ship:
if(!playerHit){
$("#player")[0].player.update();
if(jQuery.gameQuery.keyTracker[65]){ //this is left! (a)
var nextpos = $("#player").x()-5;
if(nextpos > 0){
$("#player").x(nextpos);
}
}
if(jQuery.gameQuery.keyTracker[68]){ //this is right! (d)
var nextpos = $("#player").x()+5;
if(nextpos < PLAYGROUND_WIDTH - 100){
$("#player").x(nextpos);
}
}
if(jQuery.gameQuery.keyTracker[87]){ //this is up! (w)
var nextpos = $("#player").y()-3;
if(nextpos > 0){
$("#player").y(nextpos);
}
}
if(jQuery.gameQuery.keyTracker[83]){ //this is down! (s)
var nextpos = $("#player").y()+3;
if(nextpos < PLAYGROUND_HEIGHT - 30){
$("#player").y(nextpos);
}
}
} else {
var posy = $("#player").y()+5;
var posx = $("#player").x()-5;
if(posy > PLAYGROUND_HEIGHT){
//Does the player did get out of the screen?
if($("#player")[0].player.respawn()){
gameOver = true;
$("#playground").append('<div style="position: absolute; top: 50px; width: 700px; color: white; font-family: verdana, sans-serif;"><center><h1>Game Over</h1><br><a style="cursor: pointer;" id="restartbutton">Click here to restart the game!</a></center></div>');
$("#restartbutton").click(restartgame);
$("#actors,#playerMissileLayer,#enemiesMissileLayer").fadeTo(1000,0);
$("#background").fadeTo(5000,0);
} else {
$("#explosion").remove();
$("#player").children().show();
$("#player").y(PLAYGROUND_HEIGHT / 2);
$("#player").x(PLAYGROUND_WIDTH / 2);
playerHit = false;
}
} else {
$("#player").y(posy);
$("#player").x(posx);
}
}
//Update the movement of the enemies
$(".enemy").each(function(){
this.enemy.update($("#player"));
var posx = this.x();
if((posx + 100) < 0){
this.remove();
return;
}
//Test for collisions
var collided = this.collision("#playerBody,."+.gQ.groupCssClass);
if(collided.length > 0){
//An enemy has been hit!
collided.each(function(){
if(this[0].enemy.damage()){
if(this.enemy instanceof Bossy){
this.setAnimation(enemies[2]["explode"], function(node){node.remove();});
this.css("width", 150);
} else if(this.enemy instanceof Brainy) {
this.setAnimation(enemies[1]["explode"], function(node){node.remove();});
this.css("width", 150);
} else {
this.setAnimation(enemies[0]["explode"], function(node){node.remove();});
this.css("width", 200);
}
this.removeClass("enemy");
}
})
this.setAnimation(missile["playerexplode"], function(node){node.remove();});
this.css("width", 38);
this.css("height", 23);
this.y(-7, true);
this.removeClass("playerMissiles");
}
});
$(".enemiesMissiles").each(function(){
var posx = this.x();
if(posx < 0){
this.remove();
return;
}
this.x(-MISSILE_SPEED, true);
//Test for collisions
var collided = this.collision("#playerBody,."+.playground().registerCallback(function(){
if(!bossMode && !gameOver){
if(Math.random() < 0.4){
var name = "enemy1_"+Math.ceil(Math.random()*1000);
$("#actors").addSprite(name, {animation: enemies[0]["idle"], posx: PLAYGROUND_WIDTH, posy: Math.random()*PLAYGROUND_HEIGHT,width: 150, height: 52});
$("#"+name).addClass("enemy");
$("#"+name)[0].enemy = new Minion($("#"+name));
} else if (Math.random() < 0.5){
var name = "enemy1_"+Math.ceil(Math.random()*1000);
$("#actors").addSprite(name, {animation: enemies[1]["idle"], posx: PLAYGROUND_WIDTH, posy: Math.random()*PLAYGROUND_HEIGHT,width: 100, height: 42});
$("#"+name).addClass("enemy");
$("#"+name)[0].enemy = new Brainy($("#"+name));
} else if(Math.random() > 0.8){
bossMode = true;
bossName = "enemy1_"+Math.ceil(Math.random()*1000);
$("#actors").addSprite(bossName, {animation: enemies[2]["idle"], posx: PLAYGROUND_WIDTH, posy: Math.random()*PLAYGROUND_HEIGHT,width: 100, height: 100});
$("#"+bossName).addClass("enemy");
$("#"+bossName)[0].enemy = new Bossy($("#"+bossName));
}
} else {
if($("#"+bossName).length == 0){
bossMode = false;
}
}
}, 1000); //once per seconds is enough for this
//This is for the background animation
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.