diff --git a/gamequery/gamequery-tests.ts b/gamequery/gamequery-tests.ts new file mode 100644 index 0000000000..857a05a484 --- /dev/null +++ b/gamequery/gamequery-tests.ts @@ -0,0 +1,282 @@ +/// + +//Original examples: https://github.com/onaluf/gameQuery/tree/master/tests/human + +$(function () { + var simpleVerticalAnimation = new $.gameQuery.Animation({ imageURL: "sv.png", type: $.gameQuery.ANIMATION_VERTICAL, numberOfFrame: 4, delta: 32, rate: 300 }); + var simpleHorizontalAnimation = new $.gameQuery.Animation({ imageURL: "sh.png", type: $.gameQuery.ANIMATION_HORIZONTAL, numberOfFrame: 4, delta: 32, rate: 300 }); + + var multiVerticalAnimation = new $.gameQuery.Animation({ imageURL: "mv.png", type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_MULTI, numberOfFrame: 4, delta: 32, rate: 300, distance: 32 }); + var multiHorizontalAnimation = new $.gameQuery.Animation({ imageURL: "mh.png", type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI, numberOfFrame: 4, delta: 32, rate: 300, distance: 32 }); + + var simpleOffsetVerticalAnimation = new $.gameQuery.Animation({ imageURL: "sov.png", type: $.gameQuery.ANIMATION_VERTICAL, offsetx: 100, offsety: 100, numberOfFrame: 4, delta: 32, rate: 300 }); + var simpleOffsetHorizontalAnimation = new $.gameQuery.Animation({ imageURL: "soh.png", type: $.gameQuery.ANIMATION_HORIZONTAL, offsetx: 100, offsety: 100, numberOfFrame: 4, delta: 32, rate: 300 }); + + var multiOffsetVerticalAnimation = new $.gameQuery.Animation({ imageURL: "mov.png", type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_MULTI, offsetx: 100, offsety: 100, numberOfFrame: 4, delta: 32, rate: 300, distance: 32 }); + var multiOffsetHorizontalAnimation = new $.gameQuery.Animation({ imageURL: "moh.png", type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI, offsetx: 100, offsety: 100, numberOfFrame: 4, delta: 32, rate: 300, distance: 32 }); + + var pingpongAnimation = new $.gameQuery.Animation({ imageURL: "rebound.png", type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_PINGPONG, numberOfFrame: 9, delta: 64, rate: 60 }); + var multiPingpongAnimation = new $.gameQuery.Animation({ imageURL: "reboundm.png", type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_PINGPONG | $.gameQuery.ANIMATION_MULTI, numberOfFrame: 9, delta: 64, rate: 60, distance: 64 }); + + var callbackAnim = new $.gameQuery.Animation({ imageURL: "sv.png", type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_ONCE | $.gameQuery.ANIMATION_CALLBACK, numberOfFrame: 4, delta: 32, rate: 300 }); + var counter = 0; + $("#playground").playground({ height: 64, width: 500 }); + + $.playground() + .addSprite("simpleVertical", { animation: simpleVerticalAnimation, posx: 0 }) + .addSprite("simpleHorizontal", { animation: simpleHorizontalAnimation, posx: 34 }) + .addSprite("multiVertical", { animation: multiVerticalAnimation, posx: 75 }) + .addSprite("multiHorizontal", { animation: multiHorizontalAnimation, posx: 109 }) + .addSprite("simpleOffsetVertical", { animation: simpleOffsetVerticalAnimation, posx: 150 }) + .addSprite("simpleOffsetHorizontal", { animation: simpleOffsetHorizontalAnimation, posx: 184 }) + .addSprite("multiOffsetVertical", { animation: multiOffsetVerticalAnimation, posx: 225 }) + .addSprite("multiOffsetHorizontal", { animation: multiOffsetHorizontalAnimation, posx: 259 }) + .addSprite("pingpong", { animation: pingpongAnimation, posx: 286, width: 64, height: 64 }) + .addSprite("multiPingpong", { animation: multiPingpongAnimation, posx: 350, width: 64, height: 64 }) + .addSprite("callback", { + animation: callbackAnim, posx: 414, callback: function () { + counter++; + if (counter > 1) { + $("#callback").remove(); + } + } + }); + + $("#multiVertical").setAnimation(1); + $("#multiHorizontal").setAnimation(1); + $("#multiOffsetVertical").setAnimation(1); + $("#multiOffsetHorizontal").setAnimation(1); + $("#multiPingpong").setAnimation(1); + + $.playground().startGame(); +}); +$(function () { + + var red = new $.gameQuery.Animation({ + imageURL: "red.png", + type: $.gameQuery.ANIMATION_HORIZONTAL + }); + var blue = new $.gameQuery.Animation({ + imageURL: "blue.png", + type: $.gameQuery.ANIMATION_HORIZONTAL + }); + + $("#playground").playground({ height: 450, width: 350 }); + + // no group, no translation, no transformation + $.playground() + .addSprite("a1", { animation: red, width: 30, height: 30, posx: 0, posy: 0 }) + .addSprite("b1", { animation: red, width: 30, height: 30, posx: 15, posy: 15 }); + + // one group, no translation, no transformation + $.playground() + .addSprite("a2", { animation: red, width: 30, height: 30, posx: 0, posy: 50 }) + .addGroup("g1", { width: 100, height: 100, posx: -55, posy: -5 }) + .addSprite("b2", { animation: red, width: 30, height: 30, posx: 70, posy: 70 }); + + // no group, absolute translation, no rotation + $.playground() + .addSprite("a3", { animation: red, width: 30, height: 30, posx: 0, posy: 100 }) + .addSprite("b3", { animation: red, width: 30, height: 30, posx: 100, posy: 131 }); + $("#b3").x(15).y(115); + + // no group, relative translation, scale + $.playground() + .addSprite("a4", { animation: red, width: 30, height: 30, posx: 0, posy: 150 }) + .addSprite("b4", { animation: red, width: 30, height: 30, posx: 100, posy: 181 }); + $("#b4").x(-85, true).y(-16, true); + + // no group, no translation, flip + $.playground() + .addSprite("a5", { animation: red, width: 30, height: 30, posx: 0, posy: 200 }) + .addSprite("b5", { animation: red, width: 30, height: 30, posx: 15, posy: 215 }); + $("#a5").flipv(); + $("#b5").fliph(); + + // no group, no translation, rotation + $.playground() + .addSprite("a6", { animation: red, width: 30, height: 30, posx: 0, posy: 250 }) + .addSprite("b6", { animation: red, width: 30, height: 30, posx: 30, posy: 265 }); + $("#b6").rotate(45); + + // no group, no translation, scale + $.playground() + .addSprite("a7", { animation: red, width: 30, height: 30, posx: 0, posy: 300 }) + .addSprite("b7", { animation: red, width: 30, height: 30, posx: 30, posy: 315 }); + $("#b7").scale(1.5); + + // no group, no translation, override + $.playground() + .addSprite("a8", { animation: red, width: 30, height: 30, posx: 0, posy: 370 }) + .addSprite("b8", { animation: red, width: 30, height: 30, posx: 40, posy: 385 }); + + + + // now we try to turn every b* sprites blue + $("#a1").collision().each(function () { + $(this).setAnimation(blue); + }); + + $("#a2").collision().each(function () { + $(this).setAnimation(blue); + }); + + $("#a3").collision().each(function () { + $(this).setAnimation(blue); + }); + + $("#a4").collision().each(function () { + $(this).setAnimation(blue); + }); + + $("#a5").collision().each(function () { + $(this).setAnimation(blue); + }); + + $("#a6").collision().each(function () { + $(this).setAnimation(blue); + }); + + $("#a7").collision().each(function () { + $(this).setAnimation(blue); + }); + + $("#a8").collision({ x: 35 }).each(function () { + $(this).setAnimation(blue); + }); + + $.playground().startGame(); +}); + +$(function () { + var multiAnimation = new $.gameQuery.Animation({ + imageURL: "m.png", + type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI, + numberOfFrame: 3, + delta: 10, + distance: 10, + rate: 300 + }); + + var multiAnimationPingpong = new $.gameQuery.Animation({ + imageURL: "m.png", + type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI | $.gameQuery.ANIMATION_PINGPONG, + numberOfFrame: 3, + delta: 10, + distance: 10, + rate: 300 + }); + var animations = []; + animations[0] = new $.gameQuery.Animation({ + imageURL: "s1.png", + type: $.gameQuery.ANIMATION_HORIZONTAL, + numberOfFrame: 3, + delta: 10, + rate: 300 + }); + animations[1] = new $.gameQuery.Animation({ + imageURL: "s2.png", + type: $.gameQuery.ANIMATION_HORIZONTAL, + numberOfFrame: 3, + delta: 10, + rate: 300 + }); + animations[2] = new $.gameQuery.Animation({ + imageURL: "s3.png", + type: $.gameQuery.ANIMATION_HORIZONTAL, + numberOfFrame: 3, + delta: 10, + rate: 300 + }); + + var animationsPingpong = []; + animationsPingpong[0] = new $.gameQuery.Animation({ + imageURL: "s1.png", + type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_PINGPONG, + numberOfFrame: 3, + delta: 10, + rate: 300 + }); + animationsPingpong[1] = new $.gameQuery.Animation({ + imageURL: "s2.png", + type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_PINGPONG, + numberOfFrame: 3, + delta: 10, + rate: 300 + }); + animationsPingpong[2] = new $.gameQuery.Animation({ + imageURL: "s3.png", + type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_PINGPONG, + numberOfFrame: 3, + delta: 10, + rate: 300 + }); + + var tileDef = [[1, 2, 3], [2, 3, 1], [3, 1, 2]]; + var tileFun = function (i, j) { return 1 + (i + j) % 3; }; + $("#playground").playground({ height: 64, width: 350 }); + + $.playground() + .addTilemap("multiArray", tileDef, multiAnimation, { width: 10, height: 10, sizex: 3, sizey: 3, posx: 0 }).end() + .addTilemap("multiFunction", tileFun, multiAnimation, { width: 10, height: 10, sizex: 3, sizey: 3, posx: 40 }).end() + .addTilemap("arrayArray", tileDef, animations, { width: 10, height: 10, sizex: 3, sizey: 3, posx: 80 }).end() + .addTilemap("arrayFunction", tileFun, animations, { width: 10, height: 10, sizex: 3, sizey: 3, posx: 120 }).end() + .addTilemap("multiArrayPingpong", tileDef, multiAnimationPingpong, { width: 10, height: 10, sizex: 3, sizey: 3, posx: 160 }).end() + .addTilemap("arrayArrayPingpong", tileDef, animationsPingpong, { width: 10, height: 10, sizex: 3, sizey: 3, posx: 200 }).end() + .addGroup("testGroup", { height: 30, width: 30, posx: -40 }).addTilemap("outside", tileDef, multiAnimation, { width: 10, height: 10, sizex: 3, sizey: 3, posx: 0 }); + $("#testGroup").x(240); + $.playground().startGame(); +}); + +$(function () { + var multiAnimation = new $.gameQuery.Animation({ + imageURL: "m.png", + type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI, + numberOfFrame: 3, + delta: 10, + distance: 10, + rate: 300 + }); + + var tileDef = [[1, 2, 3, 1, 2, 3, 1, 2, 3], + [2, 3, 1, 2, 3, 1, 2, 3, 1], + [3, 1, 2, 3, 1, 2, 3, 1, 2]]; + + $("#playground").playground({ height: 60, width: 90 }); + + $.playground() + .addGroup("testGroup1", { height: 60, width: 180, posx: 0 }) + .addTilemap("map1", tileDef, multiAnimation, { width: 10, height: 10, sizex: 9, sizey: 3, posx: 0 }).end() + .addTilemap("map2", tileDef, multiAnimation, { width: 10, height: 10, sizex: 9, sizey: 3, posx: 90 }).end() + .end() + .addGroup("testGroup2", { height: 60, width: 90, posy: 60 }) + .addTilemap("map3", tileDef, multiAnimation, { width: 10, height: 10, sizex: 9, sizey: 3, posx: 0 }); + + + $("#testGroup1").x(-45); + $("#testGroup2").y(30); + $.playground().startGame(); +}); + +$(function () { + var animation = new $.gameQuery.Animation({ imageURL: "sh.png", type: $.gameQuery.ANIMATION_HORIZONTAL, numberOfFrame: 4, delta: 32, rate: 300 }); + + $("#playground").playground({ height: 64, width: 480 }); + + $.playground() + .addSprite("rotate", { animation: animation, posx: 0, posy: 16 }) + .addSprite("scale", { animation: animation, posx: 80, posy: 16 }) + .addSprite("rotateScale", { animation: animation, posx: 160, posy: 16 }) + .addSprite("scaleRotate", { animation: animation, posx: 240, posy: 16 }) + .addSprite("flipH", { animation: animation, posx: 320, posy: 16 }) + .addSprite("flipV", { animation: animation, posx: 400, posy: 16 }) + + $("#rotate").rotate(45); + $("#scale").scale(4); + $("#scale").scale(0.5, true); + $("#rotateScale").rotate(45).scale(2); + $("#scaleRotate").scale(2).rotate(45); + $("#flipV").flipv(true); + $("#flipH").fliph(true); + $.playground().startGame(); +}); \ No newline at end of file diff --git a/gamequery/gamequery.d.ts b/gamequery/gamequery.d.ts new file mode 100644 index 0000000000..dbb68fca4a --- /dev/null +++ b/gamequery/gamequery.d.ts @@ -0,0 +1,171 @@ +// Type definitions for gameQuery 0.7.0 +// Project: http://gamequeryjs.com/ +// Definitions by: David Laubreiter +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +interface PlaygroundOptions{ + height?: number; + width?: number; + refreshRate?: number; + keyTracker?: bool; + mouseTracker?: bool; + position?: string; + disableCollision?: bool; +} + +interface Coordinate3D{ + x: number; + y: number; + z: number; +} + +interface Size{ + w: number; + h: number; +} + +interface SpriteOptions{ + animation?: any; + height?: number; + width?: number; + posx?: number; + posy?: number; + callback?: () => any; +} + +interface GroupOptions{ + overflow?: string; + height?: number; + width?: number; + posx?: number; + posy?: number; +} + +interface TileMapOptions{ + sizex?: number; + sizey?: number; + height?: number; + width?: number; + posx?: number; + posy?: number; + buffer?: number; +} + +interface AnimationOptions{ + imageURL: string; + numberOfFrame?: number; + delta?: number; + rate?: number; + type?: number; + distance?: number; + offsetx?: number; + offsety?: number; +} + +interface Animation{ + imageURL: string; + numberOfFrame: number; + delta: number; + rate: number; + type: number; + distance: number; + offsetx: number; + offsety: number; + + new (options: AnimationOptions): Animation; +} + +interface GameQuery { + ANIMATION_VERTICAL: number; + ANIMATION_HORIZONTAL: number; + ANIMATION_ONCE: number; + ANIMATION_CALLBACK: number; + ANIMATION_MULTI: number; + ANIMATION_PINGPONG: number; + + Animation: Animation; + + keyTracker: bool[]; + + spriteCssClass: string; + groupCssClass: string; + tilemapCssClass: string; + tileCssClass: string; + tileTypePrefix: string; + tileIdPrefix: string; +} + +interface JQuery{ + playground(options?: PlaygroundOptions): JQuery; + + collision(query?: any): JQuery; + + startGame(callback?: () => void): JQuery; + pauseGame(): JQuery; + resumeGame(callback?: () => void ): JQuery; + + registerCallback(callback: () => void , rate: number): JQuery; + registerCallback(callback: () => number , rate: number): JQuery; + registerCallback(callback: () => bool , rate: number): JQuery; + + clearScenegraph(): JQuery; + clearAll(clearCallbacks?: bool): JQuery; + + loadCallback(callback: (percent: number) => void ): JQuery; + + rotate(angle: number, relative?: bool): JQuery; + scale(ratio: number, relative?: bool): JQuery; + flipv(flip?: bool): JQuery; + fliph(flip?: bool): JQuery; + + xyz(x: number, y: number, z: number, relative?: bool): JQuery; + xyz(): Coordinate3D; + + xy(x: number, y: number, relative?: bool): JQuery; + xy(): Coordinate3D; + + x(value: number, relative?: bool): JQuery; + x(): number; + + y(value: number, relative?: bool): JQuery; + y(): number; + + z(value: number, relative?: bool): JQuery; + z(): number; + + wh(width: number, height: number, relative?: bool): JQuery; + wh(): Size; + + w(value: number, relative?: bool): JQuery; + w(): number; + + h(value: number, relative?: bool): JQuery; + h(): number; + + addSprite(name: string, options: SpriteOptions): JQuery; + addGroup(name: string, options: GroupOptions): JQuery; + + addTilemap(name: string, tileDescription: number[][], animationList : Animation[], options: TileMapOptions) : JQuery; + addTilemap(name: string, tileDescription: number[][], animation : Animation, options: TileMapOptions) : JQuery; + addTilemap(name: string, tileDescription: (i: number, j: number) => number, animationList : Animation[], options: TileMapOptions) : JQuery; + addTilemap(name: string, tileDescription: (i: number, j: number) => number, animation : Animation, options: TileMapOptions) : JQuery; + + + gQ: GameQuery; + + setAnimation(animation: Animation, callback?: () => any): JQuery; + setAnimation(animation: number, callback?: () => any): JQuery; + setAnimation(): JQuery; + + pauseAnimation(): JQuery; + resumeAnimation(): JQuery; +} + +interface JQueryStatic{ + playground(): JQuery; + + gQ: GameQuery; + gameQuery: GameQuery; +}