topical media & game development
mobile-query-game-demos-4-superjavascriptfighter2.js / js
var PLAYGROUND_WIDTH = 800 ;
var PLAYGROUND_HEIGHT = 200;
$(function(){
// This is the AI that determines the next move
// level=0: totaly random
// level=1: totaly "rational"
// possible move;
IDLE= 0;
WALK_FORWARD= 1;
WALK_BACKWARD= 2;
PUNCH= 3;
KICK= 4;
BLOCK= 5;
BEATEN= 6;
//constantes:
NEAR= 100;
// this is a methods that returns a random element from the given array
function or(choice){
return choice[Math.round(Math.random()*(choice.length-1))];
};
// return the distance between the opponents
function distance(a, b){
return Math.abs(a.position().left-b.position().left);
};
function nextMove(level, a, b){
if(Math.random() > level){
return Math.round(Math.random()*5);
}
switch(b.data("fighter").currentState){
// if the adversary is idle or moves away from us we get near him or attack ihm
case IDLE:
case WALK_BACKWARD:
case BLOCK:
if(distance(a,b) < NEAR){
return or([KICK, PUNCH, WALK_BACKWARD]);
} else {
return or([WALK_FORWARD, IDLE]);
}
break;
// if the adversary moves toward us we get away or attack ihm
case WALK_FORWARD:
if(distance(a,b) < NEAR){
return or([KICK, PUNCH, WALK_BACKWARD]);
} else {
return or([WALK_FORWARD, IDLE]);
}
break;
// if we are under attack we either block go back or try to fight back
case PUNCH:
case KICK:
return or([BLOCK, PUNCH, KICK, IDLE]);
break;
// if beaten we block or go back
case BEATEN:
return or([BLOCK, WALK_BACKWARD, IDLE]);
break;
}
}
function animate(sprite){
sprite = sprite;
fighter = sprite.data("fighter");
adversary = $(fighter.adversary);
adversaryFighter = adversary.data("fighter");
var nextState = nextMove(0.8, sprite, adversary);
changeAnimation(sprite, fighter.animations, nextState, fighter.currentState);
if(nextState == PUNCH || nextState == KICK){
sprite.z(20);
} else if(fighter.currentState == PUNCH || fighter.currentState == KICK){
sprite.z(0);
}
fighter.currentState = nextState;
}
var scrollStage = function (offset){
if(offset > 50){
offset = 50;
} else if(offset < -50) {
offset = -50;
}
$("#foreground").x(-800 + offset/0.5);
$("#ground").x(-300 + offset);
$("#fighters").x(offset);
$("#background1").x(50 + offset/2);
$("#background2").x(30 + offset/4);
$("#background3").x(90 + offset/5);
}
/*replace with new*/
var changeAnimation = function(sprite, animationArry, newAnimation , oldAnimation){
sprite
.setAnimation(animationArry[newAnimation].animation)
.width(animationArry[newAnimation].width)
.height(animationArry[newAnimation].height)
.y(sprite.position().top + animationArry[newAnimation].deltaY - animationArry[oldAnimation].deltaY)
.x(sprite.position().left + animationArry[newAnimation].deltaX - animationArry[oldAnimation].deltaX);
};
// the game
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH, refreshRate: 30, keyTracker: true});
//Playground Sprites
var foreground = new .gQ.ANIMATION_VERTICAL});
var ground = new .gQ.Animation({imageURL: "./stage/background1.png"});
var background2 = new .gQ.Animation({imageURL: "./stage/background3.png"});
.gQ.Animation({ imageURL: "./cvs/cvs_idle_59x106x6.png",
numberOfFrame: 6,
delta: 59,
rate:240,
type: .gQ.ANIMATION_CALLBACK}),
deltaX: 0, deltaY: 0, width: 59, height: 106},
{animation: new .gQ.ANIMATION_HORIZONTAL | .gQ.Animation({ imageURL: "./cvs/cvs_walk_backward_58x106x5.png",
numberOfFrame: 5,
delta: 58,
rate:240,
type: .gQ.ANIMATION_CALLBACK}),
deltaX: 0, deltaY: 0, width: 58, height: 106},
{animation: new .gQ.ANIMATION_HORIZONTAL | .gQ.Animation({ imageURL: "./cvs/cvs_kick_156x106x9.png",
numberOfFrame: 9,
delta: 156,
rate:90,
type: .gQ.ANIMATION_CALLBACK}),
deltaX: -20, deltaY: 0, width: 156, height: 106},
{animation: new .gQ.ANIMATION_HORIZONTAL | .gQ.Animation({ imageURL: "./cvs/cvs_hit_59x103x1.png",
rate: 720,
type: .gQ.GEOMETRY_RECTANGLE,
callback: animate});
$("#cvs").data("fighter", cvs);
var abobo = {
currentState : IDLE,
position: 500,
adversary: "#cvs",
animations: [ {animation: new .gQ.ANIMATION_HORIZONTAL | .gQ.Animation({ imageURL: "./abobo/abobo_walk_forward_94x126x6.png",
numberOfFrame: 6,
delta: 94,
rate:240,
type: .gQ.ANIMATION_CALLBACK}),
deltaX: 0, deltaY: 44, width: 94, height: 126},
{animation: new .gQ.ANIMATION_HORIZONTAL | .gQ.Animation({ imageURL: "./abobo/abobo_punch_131x170x4.png",
numberOfFrame: 4,
delta: 131,
rate:150,
type: .gQ.ANIMATION_CALLBACK}),
deltaX: -30, deltaY: 0, width: 131, height: 170},
{animation: new .gQ.ANIMATION_HORIZONTAL | .gQ.Animation({ imageURL: "./abobo/abobo_block_81x130x1.png",
rate:700,
type: .gQ.Animation({ imageURL: "./abobo/abobo_hit_108x120x3.png",
numberOfFrame: 3,
delta: 108,
rate:240,
type: .gQ.ANIMATION_CALLBACK}),
deltaX: 0, deltaY: 50, width: 108, height: 120}]
}
$("#fighters").addSprite("abobo",
{posx: 550,
posy: 60,
height: 121,
width: 100,
animation: abobo.animations[0].animation,
geometry: .playground().registerCallback(function(){
var cvs = $("#cvs");
var cvsF = cvs.data("fighter");
var cvsLeft = cvs.position().left;
var abobo = $("#abobo");
var aboboF = abobo.data("fighter");
var aboboLeft = abobo.position().left;
//hit?
if(cvsLeft+cvsF.animations[cvsF.currentState].width - 2 > aboboLeft){
if((cvsF.currentState == KICK || cvsF.currentState == PUNCH) && aboboF.currentState != BEATEN){
if (aboboF.currentState == KICK || aboboF.currentState == PUNCH) {
changeAnimation(abobo, aboboF.animations, BEATEN, aboboF.currentState);
aboboF.currentState = BEATEN;
changeAnimation(cvs, cvsF.animations, BEATEN, cvsF.currentState);
cvsF.currentState = BEATEN;
} else {
changeAnimation(abobo, aboboF.animations, BEATEN, aboboF.currentState);
aboboF.currentState = BEATEN;
}
} else if ((aboboF.currentState == KICK || aboboF.currentState == PUNCH) && cvsF.currentState != BEATEN) {
changeAnimation(cvs, cvsF.animations, BEATEN, cvsF.currentState);
cvsF.currentState = BEATEN;
}
}
//Move
if(cvsF.currentState == WALK_FORWARD){
if((cvsLeft+cvsF.animations[cvsF.currentState].width+2) < aboboLeft){
cvs.x(cvsLeft+2);
}
} else if ((cvsLeft > 50) && (cvsF.currentState == WALK_BACKWARD)){
cvs.x(cvsLeft-2)
}
if(aboboF.currentState == WALK_FORWARD){
if((cvsLeft+cvsF.animations[cvsF.currentState].width+2) < aboboLeft){
abobo.x(aboboLeft - 2);
}
} else if ((aboboLeft < 650) && (aboboF.currentState == WALK_BACKWARD)){
abobo.x(aboboLeft + 2);
}
var al = abobo.position().left - aboboF.animations[aboboF.currentState].deltaX;
var cl = cvs.position().left - cvsF.animations[cvsF.currentState].deltaX;
var centerPos = (al - cl)/2 + cl;
scrollStage(-(centerPos-400)*0.5);
return false;
}, 30);
//start loading!
.playground().startGame(function(){
$("#welcomMessage").fadeOut(2000, function(){this.remove()});
});
});
(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.