View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
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.css("z-index", 20); } else if(fighter.currentState == PUNCH || fighter.currentState == KICK){ sprite.css("z-index", 0); } fighter.currentState = nextState; } var scrollStage = function (offset){ if(offset > 50){ offset = 50; } else if(offset < -50) { offset = -50; } $("#foreground").css("left", ""+(-800 + offset/0.5)+"px"); $("#ground").css("left", ""+(-300 + offset)+"px"); $("#fighters").css("left", ""+ offset +"px"); $("#background1").css("left", ""+(50 + offset/2)+"px"); $("#background2").css("left", ""+(30 + offset/4)+"px"); $("#background3").css("left", ""+(90 + offset/5)+"px"); } /*replace with new*/ var changeAnimation = function(sprite, animationArry, newAnimation , oldAnimation){ sprite .setAnimation(animationArry[newAnimation].animation) .width(animationArry[newAnimation].width) .height(animationArry[newAnimation].height) .css("top", sprite.position().top + animationArry[newAnimation].deltaY - animationArry[oldAnimation].deltaY) .css("left", 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 $.gameQuery.Animation({imageURL: "http://gamequeryjs.com/demos/4/stage/foreground.png", type: $.gameQuery.ANIMATION_VERTICAL}); var ground = new $.gameQuery.Animation({imageURL: "http://gamequeryjs.com/demos/4/stage/ground.png"}); var background1 = new $.gameQuery.Animation({imageURL: "http://gamequeryjs.com/demos/4/stage/background1.png"}); var background2 = new $.gameQuery.Animation({imageURL: "http://gamequeryjs.com/demos/4/stage/background2.png"}); var background3 = new $.gameQuery.Animation({imageURL: "http://gamequeryjs.com/demos/4/stage/background3.png"}); $.playground().addSprite( "background3", {posx: 90, posy: 0, height: 200, width: 534, animation: background3}) .addSprite( "background2", {posx:30, posy: -50, height: 180, width: 432, animation: background2}) .addSprite( "background1", {posx:50, posy: -150, height: 317, width: 749, animation: background1}) .addSprite( "ground", {posx: -300, posy: 0, height: 200, width: 1493, animation: ground}).addGroup("fighters").end() .addSprite( "foreground", {posx:-800, posy: 165, height: 44, width: 2000, animation: foreground}); $("#sceengraph").css("background-color","#121423"); //Fighters var cvs = { currentState : IDLE, position: 250, adversary: "#abobo", animations: [ {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/cvs/cvs_idle_59x106x6.png", numberOfFrame: 6, delta: 59, rate:240, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 0, width: 59, height: 106}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/cvs/cvs_walk_forward_58x106x5.png", numberOfFrame: 5, delta: 58, rate:240, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 0, width: 58, height: 106}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/cvs/cvs_walk_backward_58x106x5.png", numberOfFrame: 5, delta: 58, rate:240, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 0, width: 58, height: 106}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/cvs/cvs_punch_120x104x6.png", numberOfFrame: 6, delta: 120, rate:120, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 2, width: 120, height: 104}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/cvs/cvs_kick_156x106x9.png", numberOfFrame: 9, delta: 156, rate:90, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: -20, deltaY: 0, width: 156, height: 106}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/cvs/cvs_block_69x99x2.png", numberOfFrame: 2, delta: 69, rate:480, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 7, width: 69, height: 99}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/cvs/cvs_hit_59x103x1.png", rate: 720, type: $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 3, width: 59, height: 103}] } $("#fighters").addSprite("cvs", {posx: 250, posy: 70, height: 106, width: 58, animation: cvs.animations[0].animation, geometry: $.gameQuery.GEOMETRY_RECTANGLE, callback: animate}); $("#cvs").data("fighter", cvs); var abobo = { currentState : IDLE, position: 500, adversary: "#cvs", animations: [ {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/abobo/abobo_idle_100x121x3.png", numberOfFrame: 3, delta: 100, rate:190, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 49, width: 100, height: 121}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/abobo/abobo_walk_forward_94x126x6.png", numberOfFrame: 6, delta: 94, rate:240, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 44, width: 94, height: 126}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/abobo/abobo_walk_backward_94x126x6.png", numberOfFrame: 6, delta: 94, rate:240, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 44, width: 94, height: 126}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/abobo/abobo_punch_131x170x4.png", numberOfFrame: 4, delta: 131, rate:150, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: -30, deltaY: 0, width: 131, height: 170}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/abobo/abobo_kick_137x130x2.png", numberOfFrame: 2, delta: 137, rate:500, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK}), deltaX: 20, deltaY: 40, width: 137, height: 130}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/abobo/abobo_block_81x130x1.png", rate:700, type: $.gameQuery.ANIMATION_CALLBACK}), deltaX: 0, deltaY: 40, width: 81, height: 130}, {animation: new $.gameQuery.Animation({ imageURL: "http://gamequeryjs.com/demos/4/abobo/abobo_hit_108x120x3.png", numberOfFrame: 3, delta: 108, rate:240, type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.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: $.gameQuery.GEOMETRY_RECTANGLE, callback: animate}); $("#abobo").data("fighter", abobo); //register the main callback $.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.css("left", cvsLeft+2); } } else if ((cvsLeft > 50) && (cvsF.currentState == WALK_BACKWARD)){ cvs.css("left", cvsLeft-2) } if(aboboF.currentState == WALK_FORWARD){ if((cvsLeft+cvsF.animations[cvsF.currentState].width+2) < aboboLeft){ abobo.css("left", aboboLeft - 2); } } else if ((aboboLeft < 650) && (aboboF.currentState == WALK_BACKWARD)){ abobo.css("left", 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! $().setLoadBar("loadingBar", 600); //initialize the start button $.playground().startGame(function(){ $("#welcomMessage").fadeOut(2000, function(){$(this).remove()}); }); });
gameQuery - Super Javascript Fighter 2 Tubro
html,body{ margin: 0; padding: 0; background-color: black; font-family: verdana, sans-serif; font-size: 8pt; }
Pop out
Help
About
×
×