|
|
@@ -0,0 +1,1849 @@
|
|
|
+/*
|
|
|
+ * gameQuery rev. 0.7.1
|
|
|
+ *
|
|
|
+ * Copyright (c) 2012 Selim Arsever (http://gamequeryjs.com)
|
|
|
+ * licensed under the MIT-License
|
|
|
+ */
|
|
|
+
|
|
|
+// This allows use of the convenient $ notation in a plugin
|
|
|
+(function($) {
|
|
|
+
|
|
|
+ // CSS Feature detection from: Craig Buckler (http://www.sitepoint.com/detect-css3-property-browser-support/)
|
|
|
+ var cssTransform = false;
|
|
|
+
|
|
|
+ var detectElement = document.createElement("detect"),
|
|
|
+ CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
|
|
|
+ All = ("transform," + CSSprefix.join("Transform,") + "Transform").split(",");
|
|
|
+ for (var i = 0, l = All.length; i < l; i++) {
|
|
|
+ if (detectElement.style[All[i]] === "") {
|
|
|
+ cssTransform = All[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // This prefix can be use whenever needed to namespace CSS classes, .data() inputs aso.
|
|
|
+ var gQprefix = "gQ_";
|
|
|
+
|
|
|
+ // Those are the possible states of the engine
|
|
|
+ var STATE_NEW = 0; // Not yet started for the first time
|
|
|
+ var STATE_RUNNING = 1; // Started and running
|
|
|
+ var STATE_PAUSED = 2; // Paused
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Utility function that returns the radius for a geometry.
|
|
|
+ *
|
|
|
+ * @param {object} elem DOM element
|
|
|
+ * @param {float} angle the angle in degrees
|
|
|
+ * @return {object} .x, .y radius of geometry
|
|
|
+ */
|
|
|
+ var proj = function (elem, angle) {
|
|
|
+ switch (elem.geometry){
|
|
|
+ case $.gameQuery.GEOMETRY_RECTANGLE :
|
|
|
+ var b = angle*Math.PI*2/360;
|
|
|
+ var Rx = Math.abs(Math.cos(b)*elem.width/2*elem.factor)+Math.abs(Math.sin(b)*elem.height/2*elem.factor);
|
|
|
+ var Ry = Math.abs(Math.cos(b)*elem.height/2*elem.factor)+Math.abs(Math.sin(b)*elem.width/2*elem.factor);
|
|
|
+
|
|
|
+ return {x: Rx, y: Ry};
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Utility function that checks for collision between two elements.
|
|
|
+ *
|
|
|
+ * @param {object} elem1 DOM for the first element
|
|
|
+ * @param {float} offset1 offset of the first element
|
|
|
+ * @param {object} elem2 DOM for the second element
|
|
|
+ * @param {float} offset2 offset of the second element
|
|
|
+ * @return {boolean} if the two elements collide or not
|
|
|
+ */
|
|
|
+ var collide = function(elem1, offset1, elem2, offset2) {
|
|
|
+ // test real collision (only for two rectangles...)
|
|
|
+ if((elem1.geometry == $.gameQuery.GEOMETRY_RECTANGLE && elem2.geometry == $.gameQuery.GEOMETRY_RECTANGLE)){
|
|
|
+
|
|
|
+ var dx = offset2.x + elem2.boundingCircle.x - elem1.boundingCircle.x - offset1.x;
|
|
|
+ var dy = offset2.y + elem2.boundingCircle.y - elem1.boundingCircle.y - offset1.y;
|
|
|
+ var a = Math.atan(dy/dx);
|
|
|
+
|
|
|
+ var Dx = Math.abs(Math.cos(a-elem1.angle*Math.PI*2/360)/Math.cos(a)*dx);
|
|
|
+ var Dy = Math.abs(Math.sin(a-elem1.angle*Math.PI*2/360)/Math.sin(a)*dy);
|
|
|
+
|
|
|
+ var R = proj(elem2, elem2.angle-elem1.angle);
|
|
|
+
|
|
|
+ if((elem1.width/2*elem1.factor+R.x <= Dx) || (elem1.height/2*elem1.factor+R.y <= Dy)) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ var Dx = Math.abs(Math.cos(a-elem2.angle*Math.PI*2/360)/Math.cos(a)*-dx);
|
|
|
+ var Dy = Math.abs(Math.sin(a-elem2.angle*Math.PI*2/360)/Math.sin(a)*-dy);
|
|
|
+
|
|
|
+ var R = proj(elem1, elem1.angle-elem2.angle);
|
|
|
+
|
|
|
+ if((elem2.width/2*elem2.factor+R.x <= Dx) || (elem2.height/2*elem2.factor+R.y <= Dy)) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Utility function computes the offset relative to the playground of a gameQuery element without using DOM's position.
|
|
|
+ * This should be faster than the standand .offset() function.
|
|
|
+ *
|
|
|
+ * Warning: No non-gameQuery elements should be present between this element and the playground div!
|
|
|
+ *
|
|
|
+ * @param {jQuery} element the jQuery wrapped DOM element representing the gameQuery object.
|
|
|
+ * @return {object} an object {x:, y: } containing the x and y offset. (Not top and left like jQuery's .offset())
|
|
|
+ */
|
|
|
+ var offset = function(element) {
|
|
|
+ // Get the tileSet offset (relative to the playground)
|
|
|
+ var offset = {x: 0, y: 0};
|
|
|
+ var parent = element[0];
|
|
|
+
|
|
|
+ while(parent !== $.gameQuery.playground[0] && parent.gameQuery !== undefined) {
|
|
|
+ offset.x += parent.gameQuery.posx;
|
|
|
+ offset.y += parent.gameQuery.posy;
|
|
|
+ parent = parent.parentNode;
|
|
|
+ }
|
|
|
+
|
|
|
+ return offset
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Utility function computes the index range of the tiles for a tilemap.
|
|
|
+ *
|
|
|
+ * @param {jQuery} element the jQuery wrapped DOM element representing the tilemap.
|
|
|
+ * @param {object} offset an object holding the x and y offset of the tilemap, this is optional and will be computed if not provided.
|
|
|
+ * @return {object} an object {firstColumn: , lastColumn: , fristRow: , lastRow: }
|
|
|
+ */
|
|
|
+ var visibleTilemapIndexes = function (element, elementOffset) {
|
|
|
+ if (elementOffset === undefined) {
|
|
|
+ elementOffset = offset(element);
|
|
|
+ }
|
|
|
+
|
|
|
+ var gameQuery = element[0].gameQuery;
|
|
|
+ // Activate the visible tiles
|
|
|
+ return {
|
|
|
+ firstRow: Math.max(Math.min(Math.floor(-elementOffset.y/gameQuery.height), gameQuery.sizey), 0),
|
|
|
+ lastRow: Math.max(Math.min(Math.ceil(($.gameQuery.playground[0].height-elementOffset.y)/gameQuery.height), gameQuery.sizey), 0),
|
|
|
+ firstColumn: Math.max(Math.min(Math.floor(-elementOffset.x/gameQuery.width), gameQuery.sizex), 0),
|
|
|
+ lastColumn: Math.max(Math.min(Math.ceil(($.gameQuery.playground[0].width-elementOffset.x)/gameQuery.width), gameQuery.sizex), 0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Utility function thast computes the buffered zone of a tilemap
|
|
|
+ *
|
|
|
+ * @param {jQuery} element the jQuery wrapped DOM element representing the tilemap.
|
|
|
+ * @param {object} visible an object describing the visible zone
|
|
|
+ * @return {object} an object {firstColumn: , lastColumn: , fristRow: , lastRow: }
|
|
|
+ */
|
|
|
+ var bufferedTilemapIndexes = function (element, visible) {
|
|
|
+ var gameQuery = element[0].gameQuery;
|
|
|
+
|
|
|
+ return {
|
|
|
+ firstRow: Math.max(Math.min(visible.firstRow - gameQuery.buffer, gameQuery.sizey), 0),
|
|
|
+ lastRow: Math.max(Math.min(visible.lastRow + gameQuery.buffer, gameQuery.sizey), 0),
|
|
|
+ firstColumn: Math.max(Math.min(visible.firstColumn - gameQuery.buffer, gameQuery.sizex), 0),
|
|
|
+ lastColumn: Math.max(Math.min(visible.lastColumn + gameQuery.buffer, gameQuery.sizex), 0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Utility function that creates a tile in the given tilemap
|
|
|
+ *
|
|
|
+ * @param {jQuery} tileSet the jQuery element representing the tile map
|
|
|
+ * @param {integer} row the row index of the tile in the tile map
|
|
|
+ * @param {integer} column the column index of the tile in the tile map
|
|
|
+ */
|
|
|
+ var addTile = function(tileSet, row, column) {
|
|
|
+ var gameQuery = tileSet[0].gameQuery;
|
|
|
+ var name = tileSet.attr("id");
|
|
|
+
|
|
|
+ var tileDescription;
|
|
|
+ if(gameQuery.func) {
|
|
|
+ tileDescription = gameQuery.tiles(row,column)-1;
|
|
|
+ } else {
|
|
|
+ tileDescription = gameQuery.tiles[row][column]-1;
|
|
|
+ }
|
|
|
+
|
|
|
+ var animation;
|
|
|
+ if(gameQuery.multi) {
|
|
|
+ animation = gameQuery.animations;
|
|
|
+ } else {
|
|
|
+ animation = gameQuery.animations[tileDescription];
|
|
|
+ }
|
|
|
+
|
|
|
+ if(tileDescription >= 0){
|
|
|
+ tileSet.addSprite($.gameQuery.tileIdPrefix+name+"_"+row+"_"+column,
|
|
|
+ {width: gameQuery.width,
|
|
|
+ height: gameQuery.height,
|
|
|
+ posx: column*gameQuery.width,
|
|
|
+ posy: row*gameQuery.height,
|
|
|
+ animation: animation});
|
|
|
+
|
|
|
+ var newTile = tileSet.find("#"+$.gameQuery.tileIdPrefix+name+"_"+row+"_"+column);
|
|
|
+ if (gameQuery.multi) {
|
|
|
+ newTile.setAnimation(tileDescription);
|
|
|
+ } else {
|
|
|
+ newTile[0].gameQuery.animationNumber = tileDescription;
|
|
|
+ }
|
|
|
+ newTile.removeClass($.gameQuery.spriteCssClass);
|
|
|
+ newTile.addClass($.gameQuery.tileCssClass);
|
|
|
+ newTile.addClass($.gameQuery.tileTypePrefix+tileDescription);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Define the list of object/function accessible through $.
|
|
|
+ $.extend({ gameQuery: {
|
|
|
+ /**
|
|
|
+ * This is the Animation Object
|
|
|
+ */
|
|
|
+ Animation: function (options, imediateCallback) {
|
|
|
+ // private default values
|
|
|
+ var defaults = {
|
|
|
+ imageURL: "",
|
|
|
+ numberOfFrame: 1,
|
|
|
+ delta: 0,
|
|
|
+ rate: 30,
|
|
|
+ type: 0,
|
|
|
+ distance: 0,
|
|
|
+ offsetx: 0,
|
|
|
+ offsety: 0
|
|
|
+ };
|
|
|
+
|
|
|
+ // options extends defaults
|
|
|
+ options = $.extend(defaults, options);
|
|
|
+
|
|
|
+ // "public" attributes:
|
|
|
+ this.imageURL = options.imageURL; // The url of the image to be used as an animation or sprite
|
|
|
+ this.numberOfFrame = options.numberOfFrame; // The number of frames to be displayed when playing the animation
|
|
|
+ this.delta = options.delta; // The distance in pixels between two frames
|
|
|
+ this.rate = options.rate; // The rate at which the frames change in miliseconds
|
|
|
+ this.type = options.type; // The type of the animation.This is a bitwise OR of the properties.
|
|
|
+ this.distance = options.distance; // The distance in pixels between two animations
|
|
|
+ this.offsetx = options.offsetx; // The x coordinate where the first sprite begins
|
|
|
+ this.offsety = options.offsety; // The y coordinate where the first sprite begins
|
|
|
+
|
|
|
+ // Whenever a new animation is created we add it to the ResourceManager animation list
|
|
|
+ $.gameQuery.resourceManager.addAnimation(this, imediateCallback);
|
|
|
+
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * "constants" for the different types of an animation
|
|
|
+ */
|
|
|
+ ANIMATION_VERTICAL: 1, // Generated by a vertical offset of the background
|
|
|
+ ANIMATION_HORIZONTAL: 2, // Generated by a horizontal offset of the background
|
|
|
+ ANIMATION_ONCE: 4, // Played only once (else looping indefinitely)
|
|
|
+ ANIMATION_CALLBACK: 8, // A callback is exectued at the end of a cycle
|
|
|
+ ANIMATION_MULTI: 16, // The image file contains many animations
|
|
|
+ ANIMATION_PINGPONG: 32, // At the last frame of the animation it reverses (if used in conjunction with ONCE it will have no effect)
|
|
|
+
|
|
|
+ // "constants" for the different type of geometry for a sprite
|
|
|
+ GEOMETRY_RECTANGLE: 1,
|
|
|
+ GEOMETRY_DISC: 2,
|
|
|
+
|
|
|
+ // basic values
|
|
|
+ refreshRate: 30,
|
|
|
+
|
|
|
+ /**
|
|
|
+ * An object to manage resource loading
|
|
|
+ */
|
|
|
+ resourceManager: {
|
|
|
+ animations: [], // List of animations / images used in the game
|
|
|
+ sounds: [], // List of sounds used in the game
|
|
|
+ callbacks: [], // List of the functions called at each refresh
|
|
|
+ loadedAnimationsPointer: 0, // Keep track of the last loaded animation
|
|
|
+ loadedSoundsPointer: 0, // Keep track of the last loaded sound
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Load resources before starting the game.
|
|
|
+ */
|
|
|
+ preload: function() {
|
|
|
+ // Start loading the images
|
|
|
+ for (var i = this.animations.length-1 ; i >= this.loadedAnimationsPointer; i --){
|
|
|
+ this.animations[i].domO = new Image();
|
|
|
+ this.animations[i].domO.src = this.animations[i].imageURL;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Start loading the sounds
|
|
|
+ for (var i = this.sounds.length-1 ; i >= this.loadedSoundsPointer; i --){
|
|
|
+ this.sounds[i].load();
|
|
|
+ }
|
|
|
+
|
|
|
+ $.gameQuery.resourceManager.waitForResources();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Wait for all the resources called for in preload() to finish loading.
|
|
|
+ */
|
|
|
+ waitForResources: function() {
|
|
|
+ // Check the images
|
|
|
+ var imageCount = 0;
|
|
|
+ for(var i=this.loadedAnimationsPointer; i < this.animations.length; i++){
|
|
|
+ if(this.animations[i].domO.complete){
|
|
|
+ imageCount++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // Check the sounds
|
|
|
+ var soundCount = 0;
|
|
|
+ for(var i=this.loadedSoundsPointer; i < this.sounds.length; i++){
|
|
|
+ var temp = this.sounds[i].ready();
|
|
|
+ if(temp){
|
|
|
+ soundCount++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // Call the load callback with the current progress
|
|
|
+ if($.gameQuery.resourceManager.loadCallback){
|
|
|
+ var percent = (imageCount + soundCount)/(this.animations.length + this.sounds.length - this.loadedAnimationsPointer - this.loadedSoundsPointer)*100;
|
|
|
+ $.gameQuery.resourceManager.loadCallback(percent);
|
|
|
+ }
|
|
|
+ if(imageCount + soundCount < (this.animations.length + this.sounds.length - this.loadedAnimationsPointer - this.loadedSoundsPointer)){
|
|
|
+ imgWait=setTimeout(function () {
|
|
|
+ $.gameQuery.resourceManager.waitForResources();
|
|
|
+ }, 100);
|
|
|
+ } else {
|
|
|
+ this.loadedAnimationsPointer = this.animations.length;
|
|
|
+ this.loadedSoundsPointer = this.sounds.length;
|
|
|
+
|
|
|
+ // All the resources are loaded! We can now associate the animation's images to their corresponding sprites
|
|
|
+ $.gameQuery.scenegraph.children().each(function(){
|
|
|
+ // recursive call on the children:
|
|
|
+ $(this).children().each(arguments.callee);
|
|
|
+ // add the image as a background
|
|
|
+ if(this.gameQuery && this.gameQuery.animation){
|
|
|
+ $(this).css("background-image", "url("+this.gameQuery.animation.imageURL+")");
|
|
|
+ // we set the correct kind of repeat
|
|
|
+ if(this.gameQuery.animation.type & $.gameQuery.ANIMATION_VERTICAL) {
|
|
|
+ $(this).css("background-repeat", "repeat-x");
|
|
|
+ } else if(this.gameQuery.animation.type & $.gameQuery.ANIMATION_HORIZONTAL) {
|
|
|
+ $(this).css("background-repeat", "repeat-y");
|
|
|
+ } else {
|
|
|
+ $(this).css("background-repeat", "no-repeat");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // Launch the refresh loop
|
|
|
+ if($.gameQuery.state === STATE_NEW){
|
|
|
+ setInterval(function () {
|
|
|
+ $.gameQuery.resourceManager.refresh();
|
|
|
+ },($.gameQuery.refreshRate));
|
|
|
+ }
|
|
|
+ $.gameQuery.state = STATE_RUNNING;
|
|
|
+ if($.gameQuery.startCallback){
|
|
|
+ $.gameQuery.startCallback();
|
|
|
+ }
|
|
|
+ // Make the scenegraph visible
|
|
|
+ $.gameQuery.scenegraph.css("visibility","visible");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * This function refresh a unique sprite here 'this' represent a dom object
|
|
|
+ */
|
|
|
+ refreshSprite: function() {
|
|
|
+ // Check if 'this' is a gameQuery element
|
|
|
+ if(this.gameQuery != undefined){
|
|
|
+ var gameQuery = this.gameQuery;
|
|
|
+ // Does 'this' has an animation ?
|
|
|
+ if(gameQuery.animation){
|
|
|
+ // Do we have anything to do?
|
|
|
+ if ( (gameQuery.idleCounter == gameQuery.animation.rate-1) && gameQuery.playing){
|
|
|
+
|
|
|
+ // Does 'this' loops?
|
|
|
+ if(gameQuery.animation.type & $.gameQuery.ANIMATION_ONCE){
|
|
|
+ if(gameQuery.currentFrame < gameQuery.animation.numberOfFrame-1){
|
|
|
+ gameQuery.currentFrame += gameQuery.frameIncrement;
|
|
|
+ } else if(gameQuery.currentFrame == gameQuery.animation.numberOfFrame-1) {
|
|
|
+ // Does 'this' has a callback ?
|
|
|
+ if(gameQuery.animation.type & $.gameQuery.ANIMATION_CALLBACK){
|
|
|
+ if($.isFunction(gameQuery.callback)){
|
|
|
+ gameQuery.callback(this);
|
|
|
+ gameQuery.callback = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(gameQuery.animation.type & $.gameQuery.ANIMATION_PINGPONG){
|
|
|
+ if(gameQuery.currentFrame == gameQuery.animation.numberOfFrame-1 && gameQuery.frameIncrement == 1) {
|
|
|
+ gameQuery.frameIncrement = -1;
|
|
|
+ } else if (gameQuery.currentFrame == 0 && gameQuery.frameIncrement == -1) {
|
|
|
+ gameQuery.frameIncrement = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ gameQuery.currentFrame = (gameQuery.currentFrame+gameQuery.frameIncrement)%gameQuery.animation.numberOfFrame;
|
|
|
+ if(gameQuery.currentFrame == 0){
|
|
|
+ // Does 'this' has a callback ?
|
|
|
+ if(gameQuery.animation.type & $.gameQuery.ANIMATION_CALLBACK){
|
|
|
+ if($.isFunction(gameQuery.callback)){
|
|
|
+ gameQuery.callback(this);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // Update the background
|
|
|
+ if((gameQuery.animation.type & $.gameQuery.ANIMATION_VERTICAL) && (gameQuery.animation.numberOfFrame > 1)){
|
|
|
+ if(gameQuery.multi){
|
|
|
+ $(this).css("background-position",""+(-gameQuery.animation.offsetx-gameQuery.multi)+"px "+(-gameQuery.animation.offsety-gameQuery.animation.delta*gameQuery.currentFrame)+"px");
|
|
|
+ } else {
|
|
|
+ $(this).css("background-position",""+(-gameQuery.animation.offsetx)+"px "+(-gameQuery.animation.offsety-gameQuery.animation.delta*gameQuery.currentFrame)+"px");
|
|
|
+ }
|
|
|
+ } else if((gameQuery.animation.type & $.gameQuery.ANIMATION_HORIZONTAL) && (gameQuery.animation.numberOfFrame > 1)) {
|
|
|
+ if(gameQuery.multi){
|
|
|
+ $(this).css("background-position",""+(-gameQuery.animation.offsetx-gameQuery.animation.delta*gameQuery.currentFrame)+"px "+(-gameQuery.animation.offsety-gameQuery.multi)+"px");
|
|
|
+ } else {
|
|
|
+ $(this).css("background-position",""+(-gameQuery.animation.offsetx-gameQuery.animation.delta*gameQuery.currentFrame)+"px "+(-gameQuery.animation.offsety)+"px");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ gameQuery.idleCounter = (gameQuery.idleCounter+1)%gameQuery.animation.rate;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * This function refresh a unique tile-map, here 'this' represent a dom object
|
|
|
+ */
|
|
|
+ refreshTilemap: function() {
|
|
|
+ // Check if 'this' is a gameQuery element
|
|
|
+ if(this.gameQuery != undefined){
|
|
|
+ var gameQuery = this.gameQuery;
|
|
|
+ if($.isArray(gameQuery.frameTracker)){
|
|
|
+ for(var i=0; i<gameQuery.frameTracker.length; i++){
|
|
|
+ // Do we have anything to do?
|
|
|
+ if(gameQuery.idleCounter[i] == gameQuery.animations[i].rate-1){
|
|
|
+ // Does 'this' loops?
|
|
|
+ if(gameQuery.animations[i].type & $.gameQuery.ANIMATION_ONCE){
|
|
|
+ if(gameQuery.frameTracker[i] < gameQuery.animations[i].numberOfFrame-1){
|
|
|
+ gameQuery.frameTracker[i] += gameQuery.frameIncrement[i];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(gameQuery.animations[i].type & $.gameQuery.ANIMATION_PINGPONG){
|
|
|
+ if(gameQuery.frameTracker[i] == gameQuery.animations[i].numberOfFrame-1 && gameQuery.frameIncrement[i] == 1) {
|
|
|
+ gameQuery.frameIncrement[i] = -1;
|
|
|
+ } else if (gameQuery.frameTracker[i] == 0 && gameQuery.frameIncrement[i] == -1) {
|
|
|
+ gameQuery.frameIncrement[i] = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ gameQuery.frameTracker[i] = (gameQuery.frameTracker[i]+gameQuery.frameIncrement[i])%gameQuery.animations[i].numberOfFrame;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ gameQuery.idleCounter[i] = (gameQuery.idleCounter[i]+1)%gameQuery.animations[i].rate;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // Do we have anything to do?
|
|
|
+ if(gameQuery.idleCounter == gameQuery.animations.rate-1){
|
|
|
+ // Does 'this' loops?
|
|
|
+ if(gameQuery.animations.type & $.gameQuery.ANIMATION_ONCE){
|
|
|
+ if(gameQuery.frameTracker < gameQuery.animations.numberOfFrame-1){
|
|
|
+ gameQuery.frameTracker += gameQuery.frameIncrement;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(gameQuery.animations.type & $.gameQuery.ANIMATION_PINGPONG){
|
|
|
+ if(gameQuery.frameTracker == gameQuery.animations.numberOfFrame-1 && gameQuery.frameIncrement == 1) {
|
|
|
+ gameQuery.frameIncrement = -1;
|
|
|
+ } else if (gameQuery.frameTracker == 0 && gameQuery.frameIncrement == -1) {
|
|
|
+ gameQuery.frameIncrement = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ gameQuery.frameTracker = (gameQuery.frameTracker+gameQuery.frameIncrement)%gameQuery.animations.numberOfFrame;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ gameQuery.idleCounter = (gameQuery.idleCounter+1)%gameQuery.animations.rate;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // Update the background of all active tiles
|
|
|
+ $(this).find("."+$.gameQuery.tileCssClass).each(function(){
|
|
|
+ if($.isArray(gameQuery.frameTracker)){
|
|
|
+ var animationNumber = this.gameQuery.animationNumber
|
|
|
+ if((gameQuery.animations[animationNumber].type & $.gameQuery.ANIMATION_VERTICAL) && (gameQuery.animations[animationNumber].numberOfFrame > 1)){
|
|
|
+ $(this).css("background-position",""+(-gameQuery.animations[animationNumber].offsetx)+"px "+(-gameQuery.animations[animationNumber].offsety-gameQuery.animations[animationNumber].delta*gameQuery.frameTracker[animationNumber])+"px");
|
|
|
+ } else if((gameQuery.animations[animationNumber].type & $.gameQuery.ANIMATION_HORIZONTAL) && (gameQuery.animations[animationNumber].numberOfFrame > 1)) {
|
|
|
+ $(this).css("background-position",""+(-gameQuery.animations[animationNumber].offsetx-gameQuery.animations[animationNumber].delta*gameQuery.frameTracker[animationNumber])+"px "+(-gameQuery.animations[animationNumber].offsety)+"px");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if((gameQuery.animations.type & $.gameQuery.ANIMATION_VERTICAL) && (gameQuery.animations.numberOfFrame > 1)){
|
|
|
+ $(this).css("background-position",""+(-gameQuery.animations.offsetx-this.gameQuery.multi)+"px "+(-gameQuery.animations.offsety-gameQuery.animations.delta*gameQuery.frameTracker)+"px");
|
|
|
+ } else if((gameQuery.animations.type & $.gameQuery.ANIMATION_HORIZONTAL) && (gameQuery.animations.numberOfFrame > 1)) {
|
|
|
+ $(this).css("background-position",""+(-gameQuery.animations.offsetx-gameQuery.animations.delta*gameQuery.frameTracker)+"px "+(-gameQuery.animations.offsety-this.gameQuery.multi)+"px");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Called periodically to refresh the state of the game.
|
|
|
+ */
|
|
|
+ refresh: function() {
|
|
|
+ if($.gameQuery.state === STATE_RUNNING) {
|
|
|
+ $.gameQuery.playground.find("."+$.gameQuery.spriteCssClass).each(this.refreshSprite);
|
|
|
+ $.gameQuery.playground.find("."+$.gameQuery.tilemapCssClass).each(this.refreshTilemap);
|
|
|
+ var deadCallback= new Array();
|
|
|
+ for (var i = this.callbacks.length-1; i >= 0; i--){
|
|
|
+ if(this.callbacks[i].idleCounter == this.callbacks[i].rate-1){
|
|
|
+ var returnedValue = this.callbacks[i].fn();
|
|
|
+ if(typeof returnedValue == 'boolean'){
|
|
|
+ // If we have a boolean: 'true' means 'no more execution', 'false' means 'keep on executing'
|
|
|
+ if(returnedValue){
|
|
|
+ deadCallback.push(i);
|
|
|
+ }
|
|
|
+ } else if(typeof returnedValue == 'number') {
|
|
|
+ // If we have a number it re-defines the time to the next call
|
|
|
+ this.callbacks[i].rate = Math.round(returnedValue/$.gameQuery.refreshRate);
|
|
|
+ this.callbacks[i].idleCounter = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.callbacks[i].idleCounter = (this.callbacks[i].idleCounter+1)%this.callbacks[i].rate;
|
|
|
+ }
|
|
|
+ for(var i = deadCallback.length-1; i >= 0; i--){
|
|
|
+ this.callbacks.splice(deadCallback[i],1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Add an animation to the resource Manager
|
|
|
+ */
|
|
|
+ addAnimation: function(animation, callback) {
|
|
|
+ if($.inArray(animation,this.animations)<0){
|
|
|
+ //normalize the animation rate:
|
|
|
+ animation.rate = Math.round(animation.rate/$.gameQuery.refreshRate);
|
|
|
+ if(animation.rate==0){
|
|
|
+ animation.rate = 1;
|
|
|
+ }
|
|
|
+ this.animations.push(animation);
|
|
|
+ switch ($.gameQuery.state){
|
|
|
+ case STATE_NEW:
|
|
|
+ case STATE_PAUSED:
|
|
|
+ // Nothing to do for now
|
|
|
+ break;
|
|
|
+ case STATE_RUNNING:
|
|
|
+ // immediatly load the animation and call the callback if any
|
|
|
+ this.animations[this.loadedAnimationsPointer].domO = new Image();
|
|
|
+ this.animations[this.loadedAnimationsPointer].domO.src = animation.imageURL;
|
|
|
+ if (callback !== undefined){
|
|
|
+ this.animations[this.loadedAnimationsPointer].domO.onload = callback;
|
|
|
+ }
|
|
|
+ this.loadedAnimationsPointer++;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Add a sound to the resource Manager
|
|
|
+ */
|
|
|
+ addSound: function(sound, callback){
|
|
|
+ if($.inArray(sound,this.sounds)<0){
|
|
|
+ this.sounds.push(sound);
|
|
|
+ switch ($.gameQuery.state){
|
|
|
+ case STATE_NEW:
|
|
|
+ case STATE_PAUSED:
|
|
|
+ // Nothing to do for now
|
|
|
+ break;
|
|
|
+ case STATE_RUNNING:
|
|
|
+ // immediatly load the sound and call the callback if any
|
|
|
+ sound.load();
|
|
|
+ // TODO callback....
|
|
|
+ this.loadedSoundsPointer++;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Register a callback
|
|
|
+ *
|
|
|
+ * @param {function} fn the callback
|
|
|
+ * @param {integer} rate the rate in ms at which the callback should be called (should be a multiple of the playground rate or will be rounded)
|
|
|
+ */
|
|
|
+ registerCallback: function(fn, rate){
|
|
|
+ rate = Math.round(rate/$.gameQuery.refreshRate);
|
|
|
+ if(rate==0){
|
|
|
+ rate = 1;
|
|
|
+ }
|
|
|
+ this.callbacks.push({fn: fn, rate: rate, idleCounter: 0});
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Clear the animations and sounds
|
|
|
+ */
|
|
|
+ clear: function(callbacksToo){
|
|
|
+ this.animations = [];
|
|
|
+ this.loadedAnimationsPointer = 0;
|
|
|
+ this.sounds = [];
|
|
|
+ this.loadedSoundsPointer = 0;
|
|
|
+ if(callbacksToo) {
|
|
|
+ this.callbacks = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * This is a single place to update the underlying data of sprites/groups/tiles after a position or dimesion modification.
|
|
|
+ */
|
|
|
+ update: function(descriptor, transformation) {
|
|
|
+ // Did we really receive a descriptor or a jQuery object instead?
|
|
|
+ if(!$.isPlainObject(descriptor)){
|
|
|
+ // Then we must get real descriptor
|
|
|
+ if(descriptor.length > 0){
|
|
|
+ var gameQuery = descriptor[0].gameQuery;
|
|
|
+ } else {
|
|
|
+ var gameQuery = descriptor.gameQuery;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var gameQuery = descriptor;
|
|
|
+ }
|
|
|
+ // If we couldn't find one we return
|
|
|
+ if(!gameQuery) return;
|
|
|
+ if(gameQuery.tileSet === true){
|
|
|
+ // We have a tilemap
|
|
|
+
|
|
|
+ var visible = visibleTilemapIndexes(descriptor);
|
|
|
+ var buffered = gameQuery.buffered;
|
|
|
+
|
|
|
+ // Test what kind of transformation we have and react accordingly
|
|
|
+ for(property in transformation){
|
|
|
+ switch(property){
|
|
|
+ case "x":
|
|
|
+
|
|
|
+ if(visible.lastColumn > buffered.lastColumn) {
|
|
|
+
|
|
|
+ // Detach the tilemap
|
|
|
+ var parent = descriptor[0].parentNode;
|
|
|
+ var tilemap = descriptor.detach();
|
|
|
+
|
|
|
+ var newBuffered = bufferedTilemapIndexes(descriptor, visible);
|
|
|
+ for(var i = gameQuery.buffered.firstRow; i < gameQuery.buffered.lastRow; i++){
|
|
|
+ // Remove the newly invisible tiles
|
|
|
+ for(var j = gameQuery.buffered.firstColumn; j < Math.min(newBuffered.firstColumn, gameQuery.buffered.lastColumn); j++) {
|
|
|
+ tilemap.find("#"+$.gameQuery.tileIdPrefix+descriptor.attr("id")+"_"+i+"_"+j).remove();
|
|
|
+ }
|
|
|
+ // And add the newly visible tiles
|
|
|
+ for(var j = Math.max(gameQuery.buffered.lastColumn,newBuffered.firstColumn); j < newBuffered.lastColumn ; j++) {
|
|
|
+ addTile(tilemap,i,j);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ gameQuery.buffered.firstColumn = newBuffered.firstColumn;
|
|
|
+ gameQuery.buffered.lastColumn = newBuffered.lastColumn;
|
|
|
+
|
|
|
+ // Attach the tilemap back
|
|
|
+ tilemap.appendTo(parent);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if(visible.firstColumn < buffered.firstColumn) {
|
|
|
+
|
|
|
+ // Detach the tilemap
|
|
|
+ var parent = descriptor[0].parentNode;
|
|
|
+ var tilemap = descriptor.detach();
|
|
|
+
|
|
|
+ var newBuffered = bufferedTilemapIndexes(descriptor, visible);
|
|
|
+ for(var i = gameQuery.buffered.firstRow; i < gameQuery.buffered.lastRow; i++){
|
|
|
+ // Remove the newly invisible tiles
|
|
|
+ for(var j = Math.max(newBuffered.lastColumn,gameQuery.buffered.firstColumn); j < gameQuery.buffered.lastColumn ; j++) {
|
|
|
+ tilemap.find("#"+$.gameQuery.tileIdPrefix+descriptor.attr("id")+"_"+i+"_"+j).remove();
|
|
|
+ }
|
|
|
+ // And add the newly visible tiles
|
|
|
+ for(var j = newBuffered.firstColumn; j < Math.min(gameQuery.buffered.firstColumn,newBuffered.lastColumn); j++) {
|
|
|
+ addTile(tilemap,i,j);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ gameQuery.buffered.firstColumn = newBuffered.firstColumn;
|
|
|
+ gameQuery.buffered.lastColumn = newBuffered.lastColumn;
|
|
|
+
|
|
|
+ // Attach the tilemap back
|
|
|
+ tilemap.appendTo(parent);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "y":
|
|
|
+
|
|
|
+ if(visible.lastRow > buffered.lastRow) {
|
|
|
+
|
|
|
+ // Detach the tilemap
|
|
|
+ var parent = descriptor[0].parentNode;
|
|
|
+ var tilemap = descriptor.detach();
|
|
|
+
|
|
|
+ var newBuffered = bufferedTilemapIndexes(descriptor, visible);
|
|
|
+ for(var j = gameQuery.buffered.firstColumn; j < gameQuery.buffered.lastColumn ; j++) {
|
|
|
+ // Remove the newly invisible tiles
|
|
|
+ for(var i = gameQuery.buffered.firstRow; i < Math.min(newBuffered.firstRow, gameQuery.buffered.lastRow); i++){
|
|
|
+ tilemap.find("#"+$.gameQuery.tileIdPrefix+descriptor.attr("id")+"_"+i+"_"+j).remove();
|
|
|
+ }
|
|
|
+ // And add the newly visible tiles
|
|
|
+ for(var i = Math.max(gameQuery.buffered.lastRow, newBuffered.firstRow); i < newBuffered.lastRow; i++){
|
|
|
+ addTile(tilemap,i,j);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ gameQuery.buffered.firstRow = newBuffered.firstRow;
|
|
|
+ gameQuery.buffered.lastRow = newBuffered.lastRow;
|
|
|
+
|
|
|
+ // Attach the tilemap back
|
|
|
+ tilemap.appendTo(parent);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if(visible.firstRow < buffered.firstRow) {
|
|
|
+
|
|
|
+ // Detach the tilemap
|
|
|
+ var parent = descriptor[0].parentNode;
|
|
|
+ var tilemap = descriptor.detach();
|
|
|
+
|
|
|
+ var newBuffered = bufferedTilemapIndexes(descriptor, visible);
|
|
|
+ for(var j = gameQuery.buffered.firstColumn; j < gameQuery.buffered.lastColumn ; j++) {
|
|
|
+ // Remove the newly invisible tiles
|
|
|
+ for(var i = Math.max(newBuffered.lastRow, gameQuery.buffered.firstRow); i < gameQuery.buffered.lastRow; i++){
|
|
|
+ tilemap.find("#"+$.gameQuery.tileIdPrefix+descriptor.attr("id")+"_"+i+"_"+j).remove();
|
|
|
+ }
|
|
|
+ // And add the newly visible tiles
|
|
|
+ for(var i = newBuffered.firstRow; i < Math.min(gameQuery.buffered.firstRow, newBuffered.lastRow); i++){
|
|
|
+ addTile(tilemap,i,j);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ gameQuery.buffered.firstRow = newBuffered.firstRow;
|
|
|
+ gameQuery.buffered.lastRow = newBuffered.lastRow;
|
|
|
+
|
|
|
+ // Attach the tilemap back
|
|
|
+ tilemap.appendTo(parent);
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "angle":
|
|
|
+ //TODO
|
|
|
+ break;
|
|
|
+
|
|
|
+ case "factor":
|
|
|
+ //TODO
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ var refreshBoundingCircle = $.gameQuery.playground && !$.gameQuery.playground.disableCollision;
|
|
|
+
|
|
|
+ // Update the descriptor
|
|
|
+ for(property in transformation){
|
|
|
+ switch(property){
|
|
|
+ case "x":
|
|
|
+ if(refreshBoundingCircle){
|
|
|
+ gameQuery.boundingCircle.x = gameQuery.posx+gameQuery.width/2;
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "y":
|
|
|
+ if(refreshBoundingCircle){
|
|
|
+ gameQuery.boundingCircle.y = gameQuery.posy+gameQuery.height/2;
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case "w":
|
|
|
+ case "h":
|
|
|
+ gameQuery.boundingCircle.originalRadius = Math.sqrt(Math.pow(gameQuery.width,2) + Math.pow(gameQuery.height,2))/2
|
|
|
+ gameQuery.boundingCircle.radius = gameQuery.factor*gameQuery.boundingCircle.originalRadius;
|
|
|
+ break;
|
|
|
+ case "angle": //(in degrees)
|
|
|
+ gameQuery.angle = parseFloat(transformation.angle);
|
|
|
+ break;
|
|
|
+ case "factor":
|
|
|
+ gameQuery.factor = parseFloat(transformation.factor);
|
|
|
+ if(refreshBoundingCircle){
|
|
|
+ gameQuery.boundingCircle.radius = gameQuery.factor*gameQuery.boundingCircle.originalRadius;
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // State of the engine
|
|
|
+ state: STATE_NEW,
|
|
|
+
|
|
|
+ // CSS classes used to mark game element
|
|
|
+ spriteCssClass: gQprefix + "sprite",
|
|
|
+ groupCssClass: gQprefix + "group",
|
|
|
+ tilemapCssClass: gQprefix + "tilemap",
|
|
|
+ tileCssClass: gQprefix + "tile",
|
|
|
+ // Prefix for CSS Ids or Classes
|
|
|
+ tileTypePrefix: gQprefix + "tileType_",
|
|
|
+ tileIdPrefix: gQprefix + "tile_"
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Mute (or unmute) all the sounds.
|
|
|
+ */
|
|
|
+ muteSound: function(muted){
|
|
|
+ for (var i = $.gameQuery.resourceManager.sounds.length-1 ; i >= 0; i --) {
|
|
|
+ $.gameQuery.resourceManager.sounds[i].muted(muted);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Accessor for the currently defined playground as a jQuery object
|
|
|
+ */
|
|
|
+ playground: function() {
|
|
|
+ return $.gameQuery.playground
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Define a callback called during the loading of the game's resources.
|
|
|
+ *
|
|
|
+ * The function will recieve as unique parameter
|
|
|
+ * a number representing the progess percentage.
|
|
|
+ */
|
|
|
+ loadCallback: function(callback){
|
|
|
+ $.gameQuery.resourceManager.loadCallback = callback;
|
|
|
+ }
|
|
|
+ }); // end of the extensio of $
|
|
|
+
|
|
|
+
|
|
|
+ // fragments used to create DOM element
|
|
|
+ var spriteFragment = $("<div class='"+$.gameQuery.spriteCssClass+"' style='position: absolute; display: block; overflow: hidden' />");
|
|
|
+ var groupFragment = $("<div class='"+$.gameQuery.groupCssClass+"' style='position: absolute; display: block; overflow: hidden' />");
|
|
|
+ var tilemapFragment = $("<div class='"+$.gameQuery.tilemapCssClass+"' style='position: absolute; display: block; overflow: hidden;' />");
|
|
|
+
|
|
|
+
|
|
|
+ // Define the list of object/function accessible through $("selector").
|
|
|
+ $.fn.extend({
|
|
|
+ /**
|
|
|
+ * Defines the currently selected div to which contains the game and initialize it.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call
|
|
|
+ */
|
|
|
+ playground: function(options) {
|
|
|
+ if(this.length == 1){
|
|
|
+ if(this[0] == document){
|
|
|
+ // Old usage detected, this is not supported anymore
|
|
|
+ throw "Old playground usage, use $.playground() to retreive the playground and $('mydiv').playground(options) to set the div!";
|
|
|
+ }
|
|
|
+ options = $.extend({
|
|
|
+ height: 320,
|
|
|
+ width: 480,
|
|
|
+ refreshRate: 30,
|
|
|
+ position: "absolute",
|
|
|
+ keyTracker: false,
|
|
|
+ mouseTracker: false,
|
|
|
+ disableCollision: false
|
|
|
+ }, options);
|
|
|
+ // We save the playground node and set some variable for this node:
|
|
|
+ $.gameQuery.playground = this;
|
|
|
+ $.gameQuery.refreshRate = options.refreshRate;
|
|
|
+ $.gameQuery.playground[0].height = options.height;
|
|
|
+ $.gameQuery.playground[0].width = options.width;
|
|
|
+
|
|
|
+ // We initialize the display of the div
|
|
|
+ $.gameQuery.playground.css({
|
|
|
+ position: options.position,
|
|
|
+ display: "block",
|
|
|
+ overflow: "hidden",
|
|
|
+ height: options.height+"px",
|
|
|
+ width: options.width+"px"
|
|
|
+ })
|
|
|
+ .append("<div id='"+gQprefix+"scenegraph' style='visibility: hidden'/>");
|
|
|
+
|
|
|
+ $.gameQuery.scenegraph = $("#"+gQprefix+"scenegraph");
|
|
|
+
|
|
|
+ // Add the keyTracker to the gameQuery object:
|
|
|
+ $.gameQuery.keyTracker = {};
|
|
|
+ // We only enable the real tracking if the users wants it
|
|
|
+ if(options.keyTracker){
|
|
|
+ $(document).keydown(function(event){
|
|
|
+ $.gameQuery.keyTracker[event.keyCode] = true;
|
|
|
+ });
|
|
|
+ $(document).keyup(function(event){
|
|
|
+ $.gameQuery.keyTracker[event.keyCode] = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Add the mouseTracker to the gameQuery object:
|
|
|
+ $.gameQuery.mouseTracker = {
|
|
|
+ x: 0,
|
|
|
+ y: 0};
|
|
|
+ // We only enable the real tracking if the users wants it
|
|
|
+ var scenegraphOffset = $.gameQuery.playground.offset();
|
|
|
+ if(options.mouseTracker){
|
|
|
+ $($.gameQuery.playground).mousemove(function(event){
|
|
|
+ $.gameQuery.mouseTracker.x = event.pageX - scenegraphOffset.left;
|
|
|
+ $.gameQuery.mouseTracker.y = event.pageY - scenegraphOffset.top;
|
|
|
+ });
|
|
|
+ $(document).mousedown(function(event){
|
|
|
+ $.gameQuery.mouseTracker[event.which] = true;
|
|
|
+ });
|
|
|
+ $(document).mouseup(function(event){
|
|
|
+ $.gameQuery.mouseTracker[event.which] = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Starts the game.
|
|
|
+ *
|
|
|
+ * Resources from the resource manager are preloaded if necesary
|
|
|
+ * Works only for the playground node.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call
|
|
|
+ */
|
|
|
+ startGame: function(callback) {
|
|
|
+ $.gameQuery.startCallback = callback;
|
|
|
+ $.gameQuery.resourceManager.preload();
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * TODO
|
|
|
+ */
|
|
|
+ pauseGame: function() {
|
|
|
+ $.gameQuery.state = STATE_PAUSED;
|
|
|
+ $.gameQuery.scenegraph.css("visibility","hidden");
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Resume the game if it was paused and call the callback passed in argument once the newly added ressources are loaded.
|
|
|
+ */
|
|
|
+ resumeGame: function(callback) {
|
|
|
+ if($.gameQuery.state === STATE_PAUSED){
|
|
|
+ $.gameQuery.startCallback = callback;
|
|
|
+ $.gameQuery.resourceManager.preload();
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Removes all the sprites, groups and tilemaps present in the scenegraph
|
|
|
+ */
|
|
|
+ clearScenegraph: function() {
|
|
|
+ $.gameQuery.scenegraph.empty()
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Removes all the sprites, groups and tilemaps present in the scenegraph as well as all loaded animations and sounds
|
|
|
+ */
|
|
|
+ clearAll: function(callbackToo) {
|
|
|
+ $.gameQuery.scenegraph.empty();
|
|
|
+ $.gameQuery.resourceManager.clear(callbackToo)
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Add a group to the scene graph. Works only on the scenegraph root or on another group
|
|
|
+ *
|
|
|
+ * This IS a destructive call and should be terminated with end()
|
|
|
+ * to go back one level up in the chaining
|
|
|
+ */
|
|
|
+ addGroup: function(group, options) {
|
|
|
+ options = $.extend({
|
|
|
+ width: 32,
|
|
|
+ height: 32,
|
|
|
+ posx: 0,
|
|
|
+ posy: 0,
|
|
|
+ posz: 0,
|
|
|
+ posOffsetX: 0,
|
|
|
+ posOffsetY: 0,
|
|
|
+ overflow: "visible",
|
|
|
+ geometry: $.gameQuery.GEOMETRY_RECTANGLE,
|
|
|
+ angle: 0,
|
|
|
+ factor: 1,
|
|
|
+ factorh: 1,
|
|
|
+ factorv: 1
|
|
|
+ }, options);
|
|
|
+
|
|
|
+ var newGroupElement = groupFragment.clone().attr("id",group).css({
|
|
|
+ overflow: options.overflow,
|
|
|
+ height: options.height,
|
|
|
+ width: options.width
|
|
|
+ });
|
|
|
+
|
|
|
+ if(this == $.gameQuery.playground){
|
|
|
+ $.gameQuery.scenegraph.append(newGroupElement);
|
|
|
+ } else if ((this == $.gameQuery.scenegraph)||(this.hasClass($.gameQuery.groupCssClass))){
|
|
|
+ this.append(newGroupElement);
|
|
|
+ }
|
|
|
+ newGroupElement[0].gameQuery = options;
|
|
|
+ newGroupElement[0].gameQuery.boundingCircle = {x: options.posx + options.width/2,
|
|
|
+ y: options.posy + options.height/0,
|
|
|
+ originalRadius: Math.sqrt(Math.pow(options.width,2) + Math.pow(options.height,2))/2};
|
|
|
+ newGroupElement[0].gameQuery.boundingCircle.radius = newGroupElement[0].gameQuery.boundingCircle.originalRadius;
|
|
|
+ newGroupElement[0].gameQuery.group = true;
|
|
|
+ newGroupElement.transform();
|
|
|
+ return this.pushStack(newGroupElement);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Add a sprite to the current node. Works only on the playground or any of its sub-nodes
|
|
|
+ *
|
|
|
+ * This is a non-destructive call
|
|
|
+ */
|
|
|
+ addSprite: function(sprite, options) {
|
|
|
+ options = $.extend({
|
|
|
+ width: 32,
|
|
|
+ height: 32,
|
|
|
+ posx: 0,
|
|
|
+ posy: 0,
|
|
|
+ posz: 0,
|
|
|
+ posOffsetX: 0,
|
|
|
+ posOffsetY: 0,
|
|
|
+ idleCounter: 0,
|
|
|
+ currentFrame: 0,
|
|
|
+ frameIncrement: 1,
|
|
|
+ geometry: $.gameQuery.GEOMETRY_RECTANGLE,
|
|
|
+ angle: 0,
|
|
|
+ factor: 1,
|
|
|
+ playing: true,
|
|
|
+ factorh: 1,
|
|
|
+ factorv: 1
|
|
|
+ }, options);
|
|
|
+
|
|
|
+ var newSpriteElem = spriteFragment.clone().attr("id",sprite).css({
|
|
|
+ height: options.height,
|
|
|
+ width: options.width,
|
|
|
+ backgroundPosition: ((options.animation)? -options.animation.offsetx : 0)+"px "+((options.animation)? -options.animation.offsety : 0)+"px"
|
|
|
+ });
|
|
|
+
|
|
|
+ if(this == $.gameQuery.playground){
|
|
|
+ $.gameQuery.scenegraph.append(newSpriteElem);
|
|
|
+ } else {
|
|
|
+ this.append(newSpriteElem);
|
|
|
+ }
|
|
|
+
|
|
|
+ // If the game has already started we want to add the animation's image as a background now
|
|
|
+ if(options.animation){
|
|
|
+ // The second test is a fix for default background (https://github.com/onaluf/gameQuery/issues/3)
|
|
|
+ if($.gameQuery.state === STATE_RUNNING && options.animation.imageURL !== ''){
|
|
|
+ newSpriteElem.css("background-image", "url("+options.animation.imageURL+")");
|
|
|
+ }
|
|
|
+ if(options.animation.type & $.gameQuery.ANIMATION_VERTICAL) {
|
|
|
+ newSpriteElem.css("background-repeat", "repeat-x");
|
|
|
+ } else if(options.animation.type & $.gameQuery.ANIMATION_HORIZONTAL) {
|
|
|
+ newSpriteElem.css("background-repeat", "repeat-y");
|
|
|
+ } else {
|
|
|
+ newSpriteElem.css("background-repeat", "no-repeat");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ var spriteDOMObject = newSpriteElem[0];
|
|
|
+ if(spriteDOMObject != undefined){
|
|
|
+ spriteDOMObject.gameQuery = options;
|
|
|
+ // Compute bounding Circle
|
|
|
+ spriteDOMObject.gameQuery.boundingCircle = {x: options.posx + options.width/2,
|
|
|
+ y: options.posy + options.height/2,
|
|
|
+ originalRadius: Math.sqrt(Math.pow(options.width,2) + Math.pow(options.height,2))/2};
|
|
|
+ spriteDOMObject.gameQuery.boundingCircle.radius = spriteDOMObject.gameQuery.boundingCircle.originalRadius;
|
|
|
+ }
|
|
|
+ newSpriteElem.transform();
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Add a Tile Map to the selected element.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call. The added sprite is NOT selected after a call to this function!
|
|
|
+ */
|
|
|
+ addTilemap: function(name, tileDescription, animationList, options){
|
|
|
+ options = $.extend({
|
|
|
+ width: 32,
|
|
|
+ height: 32,
|
|
|
+ sizex: 32,
|
|
|
+ sizey: 32,
|
|
|
+ posx: 0,
|
|
|
+ posy: 0,
|
|
|
+ posz: 0,
|
|
|
+ posOffsetX: 0,
|
|
|
+ posOffsetY: 0,
|
|
|
+ angle: 0,
|
|
|
+ factor: 1,
|
|
|
+ factorh: 1,
|
|
|
+ factorv: 1,
|
|
|
+ buffer: 1
|
|
|
+ }, options);
|
|
|
+
|
|
|
+ var tileSet = tilemapFragment.clone().attr("id",name).css({
|
|
|
+ height: options.height*options.sizey,
|
|
|
+ width: options.width*options.sizex
|
|
|
+ });
|
|
|
+
|
|
|
+ if(this == $.gameQuery.playground){
|
|
|
+ $.gameQuery.scenegraph.append(tileSet);
|
|
|
+ } else {
|
|
|
+ this.append(tileSet);
|
|
|
+ }
|
|
|
+
|
|
|
+ tileSet[0].gameQuery = options;
|
|
|
+ var gameQuery = tileSet[0].gameQuery;
|
|
|
+ gameQuery.tileSet = true;
|
|
|
+ gameQuery.tiles = tileDescription;
|
|
|
+ gameQuery.func = (typeof tileDescription === "function");
|
|
|
+
|
|
|
+ if($.isArray(animationList)){
|
|
|
+ var frameTracker = [];
|
|
|
+ var idleCounter = [];
|
|
|
+ var frameIncrement = [];
|
|
|
+ for(var i=0; i<animationList.length; i++){
|
|
|
+ frameTracker[i] = 0;
|
|
|
+ idleCounter[i] = 0;
|
|
|
+ frameIncrement[i] = 1;
|
|
|
+ }
|
|
|
+ gameQuery.frameTracker = frameTracker;
|
|
|
+ gameQuery.animations = animationList;
|
|
|
+ gameQuery.idleCounter = idleCounter;
|
|
|
+ gameQuery.frameIncrement = frameIncrement;
|
|
|
+ gameQuery.multi = false;
|
|
|
+ } else {
|
|
|
+ gameQuery.frameTracker = 0;
|
|
|
+ gameQuery.frameIncrement = 1;
|
|
|
+ gameQuery.animations = animationList;
|
|
|
+ gameQuery.idleCounter = 0;
|
|
|
+ gameQuery.multi = true;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // Get the tileSet offset (relative to the playground)
|
|
|
+ var visible = visibleTilemapIndexes(tileSet);
|
|
|
+ var buffered = bufferedTilemapIndexes(tileSet, visible);
|
|
|
+ gameQuery.buffered = buffered;
|
|
|
+
|
|
|
+ // For many simple animation
|
|
|
+ for(var i = buffered.firstRow; i < buffered.lastRow; i++){
|
|
|
+ for(var j = buffered.firstColumn; j < buffered.lastColumn ; j++) {
|
|
|
+ addTile(tileSet, i, j);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tileSet.transform()
|
|
|
+ return this.pushStack(tileSet);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * This function imports a JSON file generated by Tiled (http://www.mapeditor.org/).
|
|
|
+ * All the created tilemaps will be directly under the currently selected element.
|
|
|
+ * Their name will be made of the provided prefix followed by a number starting at 0.
|
|
|
+ *
|
|
|
+ * Only layer of type "tilelayer" are supported for now. Only one single tileset
|
|
|
+ * per layer is supported.
|
|
|
+ *
|
|
|
+ * After the call to this function the second argument will hold two new arrays:
|
|
|
+ * - tiles: an arrays of tilemaps wraped in jQuery.
|
|
|
+ * - animations: an arrays of animations
|
|
|
+ *
|
|
|
+ * This is a non-destructive call
|
|
|
+ */
|
|
|
+ importTilemaps: function(url, prefix, generatedElements){
|
|
|
+ var animations = [];
|
|
|
+ var tilemaps = [];
|
|
|
+
|
|
|
+ var that = this;
|
|
|
+
|
|
|
+ var tilemapJsonLoaded = function(json){
|
|
|
+ var tilesetGID = [];
|
|
|
+ for (var i = 0; i < json.tilesets.length; i++) {
|
|
|
+ tilesetGID[i] = json.tilesets[i].firstgid;
|
|
|
+ }
|
|
|
+
|
|
|
+ var getTilesetIndex = function(index){
|
|
|
+ var i = 0;
|
|
|
+ while(index >= tilesetGID[i] && i < tilesetGID.length){
|
|
|
+ i++;
|
|
|
+ }
|
|
|
+ return i-1;
|
|
|
+ }
|
|
|
+
|
|
|
+ var height = json.height;
|
|
|
+ var width = json.width;
|
|
|
+ var tileHeight = json.tileheight;
|
|
|
+ var tileWidth = json.tilewidth;
|
|
|
+
|
|
|
+ var layers = json.layers;
|
|
|
+ var usedTiles = [];
|
|
|
+ var animationCounter = 0;
|
|
|
+ var tilemapArrays = [];
|
|
|
+
|
|
|
+ // Detect which animations we need to generate
|
|
|
+ // and convert the tiles array indexes to the new ones
|
|
|
+ for (var i=0; i < layers.length; i++){
|
|
|
+ if(layers[i].type === "tilelayer"){
|
|
|
+ var tilemapArray = new Array(height);
|
|
|
+ for (var j=0; j<height; j++){
|
|
|
+ tilemapArray[j] = new Array(width);
|
|
|
+ }
|
|
|
+ for (var j=0; j < layers[i].data.length; j++){
|
|
|
+ var tile = layers[i].data[j];
|
|
|
+ if(tile === 0){
|
|
|
+ tilemapArray[Math.floor(j / width)][j % width] = 0;
|
|
|
+ } else {
|
|
|
+ if(!usedTiles[tile]){
|
|
|
+ animationCounter++;
|
|
|
+ usedTiles[tile] = animationCounter;
|
|
|
+ animations.push(new $.gameQuery.Animation({
|
|
|
+ imageURL: json.tilesets[getTilesetIndex(tile)].image,
|
|
|
+ offsetx: ((tile-1) % Math.floor(json.tilesets[getTilesetIndex(tile)].imagewidth / tileWidth)) * tileWidth,
|
|
|
+ offsety: Math.floor((tile-1) / Math.floor(json.tilesets[getTilesetIndex(tile)].imagewidth / tileWidth)) * tileHeight
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ tilemapArray[Math.floor(j / width)][j % width] = usedTiles[tile];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tilemapArrays.push(tilemapArray);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // adding the tilemaps
|
|
|
+ for (var i=0; i<tilemapArrays.length; i++){
|
|
|
+ tilemaps.push(that.addTilemap(
|
|
|
+ prefix+i,
|
|
|
+ tilemapArrays[i],
|
|
|
+ animations,
|
|
|
+ {
|
|
|
+ sizex: width,
|
|
|
+ sizey: height,
|
|
|
+ width: tileWidth,
|
|
|
+ height: tileHeight
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: url,
|
|
|
+ async: false,
|
|
|
+ dataType: 'json',
|
|
|
+ success: tilemapJsonLoaded
|
|
|
+ });
|
|
|
+
|
|
|
+ if(generatedElements !== undefined){
|
|
|
+ generatedElements.animations = animations;
|
|
|
+ generatedElements.tilemaps = tilemaps;
|
|
|
+ }
|
|
|
+
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Stop the animation at the current frame
|
|
|
+ *
|
|
|
+ * This is a non-destructive call.
|
|
|
+ */
|
|
|
+ pauseAnimation: function() {
|
|
|
+ this[0].gameQuery.playing = false;
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Resume the animation (if paused)
|
|
|
+ *
|
|
|
+ * This is a non-destructive call.
|
|
|
+ */
|
|
|
+ resumeAnimation: function() {
|
|
|
+ this[0].gameQuery.playing = true;
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Changes the animation associated with a sprite.
|
|
|
+ *
|
|
|
+ * WARNING: no checks are made to ensure that the object is really a sprite
|
|
|
+ *
|
|
|
+ * This is a non-destructive call.
|
|
|
+ */
|
|
|
+ setAnimation: function(animation, callback) {
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+ if(typeof animation == "number"){
|
|
|
+ if(gameQuery.animation.type & $.gameQuery.ANIMATION_MULTI){
|
|
|
+ var distance = gameQuery.animation.distance * animation;
|
|
|
+ gameQuery.multi = distance;
|
|
|
+ gameQuery.frameIncrement = 1;
|
|
|
+ gameQuery.currentFrame = 0;
|
|
|
+
|
|
|
+ if(gameQuery.animation.type & $.gameQuery.ANIMATION_VERTICAL) {
|
|
|
+ this.css("background-position",""+(-distance-gameQuery.animation.offsetx)+"px "+(-gameQuery.animation.offsety)+"px");
|
|
|
+ } else if(gameQuery.animation.type & $.gameQuery.ANIMATION_HORIZONTAL) {
|
|
|
+ this.css("background-position",""+(-gameQuery.animation.offsetx)+"px "+(-distance-gameQuery.animation.offsety)+"px");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(animation){
|
|
|
+ gameQuery.animation = animation;
|
|
|
+ gameQuery.currentFrame = 0;
|
|
|
+ gameQuery.frameIncrement = 1;
|
|
|
+
|
|
|
+ if (animation.imageURL !== '') {this.css("backgroundImage", "url('"+animation.imageURL+"')");}
|
|
|
+ this.css({"background-position": ""+(-animation.offsetx)+"px "+(-animation.offsety)+"px"});
|
|
|
+
|
|
|
+ if(gameQuery.animation.type & $.gameQuery.ANIMATION_VERTICAL) {
|
|
|
+ this.css("background-repeat", "repeat-x");
|
|
|
+ } else if(gameQuery.animation.type & $.gameQuery.ANIMATION_HORIZONTAL) {
|
|
|
+ this.css("background-repeat", "repeat-y");
|
|
|
+ } else {
|
|
|
+ this.css("background-repeat", "no-repeat");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.css("background-image", "");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if(callback != undefined){
|
|
|
+ this[0].gameQuery.callback = callback;
|
|
|
+ }
|
|
|
+
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Register a callback funnction
|
|
|
+ *
|
|
|
+ * This is a non-destructive call
|
|
|
+ *
|
|
|
+ * @param {Function} fn the callback function.
|
|
|
+ * @param {Number} rate time in milliseconds between calls.
|
|
|
+ */
|
|
|
+ registerCallback: function(fn, rate) {
|
|
|
+ $.gameQuery.resourceManager.registerCallback(fn, rate);
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Retrieve a list of objects in collision with the subject.
|
|
|
+ *
|
|
|
+ * If 'this' is a sprite or a group, the function will retrieve the list of sprites (not groups!!!) that touch it. For now all abject are considered to be boxes.
|
|
|
+ *
|
|
|
+ * This IS a destructive call and should be terminated with end() to go back one level up in the chaining.
|
|
|
+ */
|
|
|
+ collision: function(arg1, arg2){
|
|
|
+ var filter, override;
|
|
|
+ if ($.isPlainObject(arg1)){
|
|
|
+ override = arg1;
|
|
|
+ } else if (typeof arg1 === "string") {
|
|
|
+ filter = arg1;
|
|
|
+ }
|
|
|
+ if ($.isPlainObject(arg2)){
|
|
|
+ override = arg2;
|
|
|
+ } else if (typeof arg2 === "string") {
|
|
|
+ filter = arg2;
|
|
|
+ }
|
|
|
+
|
|
|
+ var resultList = [];
|
|
|
+
|
|
|
+ // Retrieve 'this' offset by looking at the parents
|
|
|
+ var itsParent = this[0].parentNode, offsetX = 0, offsetY = 0;
|
|
|
+ while (itsParent != $.gameQuery.playground[0]){
|
|
|
+ if(itsParent.gameQuery){
|
|
|
+ offsetX += itsParent.gameQuery.posx;
|
|
|
+ offsetY += itsParent.gameQuery.posy;
|
|
|
+ }
|
|
|
+ itsParent = itsParent.parentNode;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Retrieve the playground's absolute position and size information
|
|
|
+ var pgdGeom = {top: 0, left: 0, bottom: $.playground().height(), right: $.playground().width()};
|
|
|
+
|
|
|
+ // Retrieve the gameQuery object and correct it with the override
|
|
|
+ var gameQuery = jQuery.extend(true, {}, this[0].gameQuery);
|
|
|
+
|
|
|
+ // Retrieve the BoundingCircle and correct it with the override
|
|
|
+ var boundingCircle = jQuery.extend(true, {}, gameQuery.boundingCircle);
|
|
|
+ if(override && override.w){
|
|
|
+ gameQuery.width = override.w;
|
|
|
+ }
|
|
|
+ if(override && override.h){
|
|
|
+ gameQuery.height = override.h;
|
|
|
+ }
|
|
|
+ boundingCircle.originalRadius = Math.sqrt(Math.pow(gameQuery.width,2) + Math.pow(gameQuery.height,2))/2
|
|
|
+ boundingCircle.radius = gameQuery.factor*boundingCircle.originalRadius;
|
|
|
+
|
|
|
+ if(override && override.x){
|
|
|
+ boundingCircle.x = override.x + gameQuery.width/2.0;
|
|
|
+ }
|
|
|
+ if(override && override.y){
|
|
|
+ boundingCircle.y = override.y + gameQuery.height/2.0;
|
|
|
+ }
|
|
|
+
|
|
|
+ gameQuery.boundingCircle = boundingCircle;
|
|
|
+
|
|
|
+
|
|
|
+ // Is 'this' inside the playground ?
|
|
|
+ if( (gameQuery.boundingCircle.y + gameQuery.boundingCircle.radius + offsetY < pgdGeom.top) ||
|
|
|
+ (gameQuery.boundingCircle.x + gameQuery.boundingCircle.radius + offsetX < pgdGeom.left) ||
|
|
|
+ (gameQuery.boundingCircle.y - gameQuery.boundingCircle.radius + offsetY > pgdGeom.bottom) ||
|
|
|
+ (gameQuery.boundingCircle.x - gameQuery.boundingCircle.radius + offsetX > pgdGeom.right)){
|
|
|
+ return this.pushStack(new $([]));
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this !== $.gameQuery.playground){
|
|
|
+ // We must find all the elements that touche 'this'
|
|
|
+ var elementsToCheck = new Array();
|
|
|
+ elementsToCheck.push($.gameQuery.scenegraph.children(filter).get());
|
|
|
+ elementsToCheck[0].offsetX = 0;
|
|
|
+ elementsToCheck[0].offsetY = 0;
|
|
|
+
|
|
|
+ for(var i = 0, len = elementsToCheck.length; i < len; i++) {
|
|
|
+ var subLen = elementsToCheck[i].length;
|
|
|
+ while(subLen--){
|
|
|
+ var elementToCheck = elementsToCheck[i][subLen];
|
|
|
+ // Is it a gameQuery generated element?
|
|
|
+ if(elementToCheck.gameQuery){
|
|
|
+ // We don't want to check groups
|
|
|
+ if(!elementToCheck.gameQuery.group && !elementToCheck.gameQuery.tileSet){
|
|
|
+ // Does it touche the selection?
|
|
|
+ if(this[0]!=elementToCheck){
|
|
|
+ // Check bounding circle collision
|
|
|
+ var distance = Math.sqrt(Math.pow(offsetY + gameQuery.boundingCircle.y - elementsToCheck[i].offsetY - elementToCheck.gameQuery.boundingCircle.y, 2) + Math.pow(offsetX + gameQuery.boundingCircle.x - elementsToCheck[i].offsetX - elementToCheck.gameQuery.boundingCircle.x, 2));
|
|
|
+ if(distance - gameQuery.boundingCircle.radius - elementToCheck.gameQuery.boundingCircle.radius <= 0){
|
|
|
+ // Check real collision
|
|
|
+ if(collide(gameQuery, {x: offsetX, y: offsetY}, elementToCheck.gameQuery, {x: elementsToCheck[i].offsetX, y: elementsToCheck[i].offsetY})) {
|
|
|
+ // Add to the result list if collision detected
|
|
|
+ resultList.push(elementsToCheck[i][subLen]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // Add the children nodes to the list
|
|
|
+ var eleChildren = $(elementToCheck).children(filter);
|
|
|
+ if(eleChildren.length){
|
|
|
+ elementsToCheck.push(eleChildren.get());
|
|
|
+ elementsToCheck[len].offsetX = elementToCheck.gameQuery.posx + elementsToCheck[i].offsetX;
|
|
|
+ elementsToCheck[len].offsetY = elementToCheck.gameQuery.posy + elementsToCheck[i].offsetY;
|
|
|
+ len++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return this.pushStack($(resultList));
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+/** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
|
|
|
+/** -- Sound related functions ------------------------------------------------------------------------------------------------------------------ **/
|
|
|
+/** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Add the sound to the resourceManager for later use and
|
|
|
+ * associates it to the selected dom element(s).
|
|
|
+ *
|
|
|
+ * This is a non-destructive call
|
|
|
+ */
|
|
|
+ addSound: function(sound, add) {
|
|
|
+ // Does a SoundWrapper exist?
|
|
|
+ if($.gameQuery.SoundWrapper) {
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+ // Should we add to existing sounds?
|
|
|
+ if(add) {
|
|
|
+ // Do we have some sound associated with 'this'?
|
|
|
+ var sounds = gameQuery.sounds;
|
|
|
+ if(sounds) {
|
|
|
+ // Yes, we add it
|
|
|
+ sounds.push(sound);
|
|
|
+ } else {
|
|
|
+ // No, we create a new sound array
|
|
|
+ gameQuery.sounds = [sound];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // No, we replace all sounds with this one
|
|
|
+ gameQuery.sounds = [sound];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Play the sound(s) associated with the selected dom element(s).
|
|
|
+ *
|
|
|
+ * This is a non-destructive call.
|
|
|
+ */
|
|
|
+ playSound: function() {
|
|
|
+ $(this).each(function(){
|
|
|
+ var gameQuery = this.gameQuery;
|
|
|
+ if(gameQuery.sounds) {
|
|
|
+ for(var i = gameQuery.sounds.length-1 ; i >= 0; i --) {
|
|
|
+ gameQuery.sounds[i].play();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Stops the sound(s) associated with the selected dom element(s) and rewinds them.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call.
|
|
|
+ */
|
|
|
+ stopSound: function() {
|
|
|
+ $(this).each(function(){
|
|
|
+ var gameQuery = this.gameQuery;
|
|
|
+ if(gameQuery.sounds) {
|
|
|
+ for(var i = gameQuery.sounds.length-1 ; i >= 0; i --) {
|
|
|
+ gameQuery.sounds[i].stop();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Pauses the sound(s) associated with the selected dom element(s).
|
|
|
+ *
|
|
|
+ * This is a non-destructive call.
|
|
|
+ */
|
|
|
+
|
|
|
+ pauseSound: function() {
|
|
|
+ $(this).each(function(){
|
|
|
+ var gameQuery = this.gameQuery;
|
|
|
+ if(gameQuery.sounds) {
|
|
|
+ for(var i = gameQuery.sounds.length-1 ; i >= 0; i --) {
|
|
|
+ gameQuery.sounds[i].pause();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Mute or unmute the selected sound or all the sounds if none is specified.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call.
|
|
|
+ */
|
|
|
+
|
|
|
+ muteSound: function(muted) {
|
|
|
+ $(this).each(function(){
|
|
|
+ var gameQuery = this.gameQuery;
|
|
|
+ if(gameQuery.sounds) {
|
|
|
+ for(var i = gameQuery.sounds.length-1 ; i >= 0; i --) {
|
|
|
+ gameQuery.sounds[i].muted(muted);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+/** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
|
|
|
+/** -- Transformation functions ----------------------------------------------------------------------------------------------------------------- **/
|
|
|
+/** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Internal function doing the combined actions of rotate and scale.
|
|
|
+ *
|
|
|
+ * Please use .rotate() or .scale() instead since they are part of the supported API!
|
|
|
+ *
|
|
|
+ * This is a non-destructive call.
|
|
|
+ */
|
|
|
+ transform: function() {
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+
|
|
|
+ if(cssTransform){
|
|
|
+ var transform = "translate("+gameQuery.posx+"px, "+gameQuery.posy+"px) rotate("+gameQuery.angle+"deg) scale("+(gameQuery.factor*gameQuery.factorh)+","+(gameQuery.factor*gameQuery.factorv)+")";
|
|
|
+ this.css(cssTransform,transform);
|
|
|
+ } else {
|
|
|
+ var angle_rad = Math.PI * 2 / 360 * gameQuery.angle;
|
|
|
+ // try filter for IE
|
|
|
+ // For ie from 5.5
|
|
|
+ var cos = Math.cos(angle_rad) * gameQuery.factor;
|
|
|
+ var sin = Math.sin(angle_rad) * gameQuery.factor;
|
|
|
+ this.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+(cos*gameQuery.factorh)+",M12="+(-sin*gameQuery.factorv)+",M21="+(sin*gameQuery.factorh)+",M22="+(cos*gameQuery.factorv)+",SizingMethod='auto expand',FilterType='nearest neighbor')");
|
|
|
+ var newWidth = this.width();
|
|
|
+ var newHeight = this.height();
|
|
|
+ gameQuery.posOffsetX = (newWidth-gameQuery.width)/2;
|
|
|
+ gameQuery.posOffsetY = (newHeight-gameQuery.height)/2;
|
|
|
+
|
|
|
+ this.css("left", ""+(gameQuery.posx-gameQuery.posOffsetX)+"px");
|
|
|
+ this.css("top", ""+(gameQuery.posy-gameQuery.posOffsetY)+"px");
|
|
|
+ }
|
|
|
+
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Rotate the element(s) clock-wise.
|
|
|
+ *
|
|
|
+ * @param {Number} angle the angle in degrees
|
|
|
+ * @param {Boolean} relative or not
|
|
|
+ *
|
|
|
+ * This is a non-destructive call when called with a parameter. Without parameter it IS a destructive call since the return value is the current rotation angle!
|
|
|
+ */
|
|
|
+ rotate: function(angle, relative){
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+
|
|
|
+ if(angle !== undefined) {
|
|
|
+ if(relative === true){
|
|
|
+ angle += gameQuery.angle;
|
|
|
+ angle %= 360;
|
|
|
+ }
|
|
|
+ $.gameQuery.update(gameQuery,{angle: angle});
|
|
|
+ return this.transform();
|
|
|
+ } else {
|
|
|
+ var ang = gameQuery.angle;
|
|
|
+ return ang;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Change the scale of the selected element(s). The passed argument is a ratio:
|
|
|
+ *
|
|
|
+ * @param {Number} factor a ratio: 1.0 = original size, 0.5 = half the original size etc.
|
|
|
+ * @param {Boolean} relative or not
|
|
|
+ *
|
|
|
+ * This is a non-destructive call when called with a parameter. Without parameter it IS a destructive call since the return value is the current scale factor!
|
|
|
+ */
|
|
|
+ scale: function(factor, relative){
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+
|
|
|
+ if(factor !== undefined) {
|
|
|
+ if(relative === true){
|
|
|
+ factor *= gameQuery.factor;
|
|
|
+ }
|
|
|
+ $.gameQuery.update(gameQuery,{factor: factor});
|
|
|
+ return this.transform();
|
|
|
+ } else {
|
|
|
+ var fac = gameQuery.factor;
|
|
|
+ return fac;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Flips the element(s) horizontally.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call when called with a parameter. Without parameter it IS a destructive call since the return value is the current horizontal flipping status!
|
|
|
+ */
|
|
|
+ fliph: function(flip){
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+
|
|
|
+ if (flip === undefined) {
|
|
|
+ return (gameQuery.factorh !== undefined) ? (gameQuery.factorh === -1) : false;
|
|
|
+ } else if (flip) {
|
|
|
+ gameQuery.factorh = -1;
|
|
|
+ } else {
|
|
|
+ gameQuery.factorh = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ return this.transform();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Flips the element(s) vertically.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call when called with a parameter. Without parameter it IS a destructive call since the return value is the current vertical flipping status!
|
|
|
+ */
|
|
|
+ flipv: function(flip){
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+
|
|
|
+ if (flip === undefined) {
|
|
|
+ return (gameQuery.factorv !== undefined) ? (gameQuery.factorv === -1) : false;;
|
|
|
+ } else if (flip) {
|
|
|
+ gameQuery.factorv = -1;
|
|
|
+ } else {
|
|
|
+ gameQuery.factorv = 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ return this.transform();
|
|
|
+ },
|
|
|
+
|
|
|
+/** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
|
|
|
+/** -- Position getter/setter functions --------------------------------------------------------------------------------------------------------- **/
|
|
|
+/** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- **/
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Main function to change the sprite/group/tilemap position on screen.
|
|
|
+ * The three first agruments are the coordiate (double) and the last one is a flag
|
|
|
+ * to specify if the coordinate given are absolute or relative.
|
|
|
+ *
|
|
|
+ * If no argument is specified then the functions act as a getter and return a
|
|
|
+ * object {x,y,z}
|
|
|
+ *
|
|
|
+ * Please note that the z coordinate is just the z-index.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call when called with a parameter. Without parameter it IS a destructive call.
|
|
|
+ */
|
|
|
+ xyz: function(x, y, z, relative) {
|
|
|
+ if (x === undefined) {
|
|
|
+ return this.getxyz();
|
|
|
+ } else {
|
|
|
+ return this.setxyz({x: x, y: y, z: z}, relative);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * The following functions are all all shortcuts for the .xyz(...) function.
|
|
|
+ *
|
|
|
+ * @see xyz for detailed documentation.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call when called with a parameter. Without parameter it IS a destructive call.
|
|
|
+ */
|
|
|
+ x: function(value, relative) {
|
|
|
+ if (value === undefined) {
|
|
|
+ return this.getxyz().x;
|
|
|
+ } else {
|
|
|
+ return this.setxyz({x: value}, relative);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ y: function(value, relative) {
|
|
|
+ if (value === undefined) {
|
|
|
+ return this.getxyz().y;
|
|
|
+ } else {
|
|
|
+ return this.setxyz({y: value}, relative);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ z: function(value, relative) {
|
|
|
+ if (value === undefined) {
|
|
|
+ return this.getxyz().z;
|
|
|
+ } else {
|
|
|
+ return this.setxyz({z: value}, relative);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ xy: function(x, y, relative) {
|
|
|
+ if (x === undefined) {
|
|
|
+ // we return the z too since it doesn't cost anything
|
|
|
+ return this.getxyz();
|
|
|
+ } else {
|
|
|
+ return this.setxyz({x: x, y: y}, relative);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * Main function to change the sprite/group/tilemap dimension on screen.
|
|
|
+ * The two first arguments are the width and height (double) and the last one is a
|
|
|
+ * flag to specify if the dimensions given are absolute or relative.
|
|
|
+ *
|
|
|
+ * If no argument is specified then the functions act as a getter and
|
|
|
+ *
|
|
|
+ * return an object {w,h}
|
|
|
+ *
|
|
|
+ * This is a non-destructive call when called with a parameter. Without parameter it IS a destructive call.
|
|
|
+ */
|
|
|
+ wh: function(w, h, relative) {
|
|
|
+ if (w === undefined) {
|
|
|
+ return this.getwh();
|
|
|
+ } else {
|
|
|
+ return this.setwh({w: w, h: h}, relative);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * The following functions are all all shortcuts for the .wh(...) function.
|
|
|
+ *
|
|
|
+ * @see wh for detailed documentation.
|
|
|
+ *
|
|
|
+ * This is a non-destructive call when called with a parameter. Without parameter it IS a destructive call.
|
|
|
+ */
|
|
|
+ w: function(value, relative) {
|
|
|
+ if (value === undefined) {
|
|
|
+ return this.getwh().w;
|
|
|
+ } else {
|
|
|
+ return this.setwh({w: value}, relative);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ h: function(value, relative) {
|
|
|
+ if (value === undefined) {
|
|
|
+ return this.getwh().h;
|
|
|
+ } else {
|
|
|
+ return this.setwh({h: value}, relative);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * The following four functions are 'private', and are not supposed to
|
|
|
+ * be used outside of the library.
|
|
|
+ * They are NOT part of the API and so are not guaranteed to remain unchanged.
|
|
|
+ * You should really use .xyz() and .wh() instead.
|
|
|
+ */
|
|
|
+ getxyz: function() {
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+ return {x: gameQuery.posx, y: gameQuery.posy, z: gameQuery.posz};
|
|
|
+ },
|
|
|
+
|
|
|
+ setxyz: function(option, relative) {
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+
|
|
|
+ for (coordinate in option) {
|
|
|
+ // Update the gameQuery object
|
|
|
+ switch (coordinate) {
|
|
|
+ case 'x':
|
|
|
+ if(relative) {
|
|
|
+ option.x += gameQuery.posx;
|
|
|
+ }
|
|
|
+ gameQuery.posx = option.x;
|
|
|
+ this.transform();
|
|
|
+
|
|
|
+ //update the sub tile maps (if any), this forces to recompute which tiles are visible
|
|
|
+ this.find("."+$.gameQuery.tilemapCssClass).each(function(){
|
|
|
+ $(this).x(0, true);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+
|
|
|
+ case 'y':
|
|
|
+ if(relative) {
|
|
|
+ option.y += gameQuery.posy;
|
|
|
+ }
|
|
|
+ gameQuery.posy = option.y;
|
|
|
+ this.transform();
|
|
|
+
|
|
|
+ //update the sub tile maps (if any), this forces to recompute which tiles are visible
|
|
|
+ this.find("."+$.gameQuery.tilemapCssClass).each(function(){
|
|
|
+ $(this).y(0, true);
|
|
|
+ });
|
|
|
+ break;
|
|
|
+
|
|
|
+ case 'z':
|
|
|
+ if(relative) {
|
|
|
+ option.z += gameQuery.posz;
|
|
|
+ }
|
|
|
+ gameQuery.posz = option.z;
|
|
|
+ this.css("z-index",gameQuery.posz);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $.gameQuery.update(this, option);
|
|
|
+ return this;
|
|
|
+ },
|
|
|
+
|
|
|
+ getwh: function() {
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+ return {w: gameQuery.width, h: gameQuery.height};
|
|
|
+ },
|
|
|
+
|
|
|
+ setwh: function(option, relative) {
|
|
|
+ var gameQuery = this[0].gameQuery;
|
|
|
+
|
|
|
+ for (coordinate in option) {
|
|
|
+ // Update the gameQuery object
|
|
|
+ switch (coordinate) {
|
|
|
+ case 'w':
|
|
|
+ if(relative) {
|
|
|
+ option.w += gameQuery.width;
|
|
|
+ }
|
|
|
+ gameQuery.width = option.w;
|
|
|
+ this.css("width","" + gameQuery.width + "px");
|
|
|
+ break;
|
|
|
+
|
|
|
+ case 'h':
|
|
|
+ if(relative) {
|
|
|
+ option.h += gameQuery.height;
|
|
|
+ }
|
|
|
+ gameQuery.height = option.h;
|
|
|
+ this.css("height","" + gameQuery.height + "px");
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $.gameQuery.update(this, option);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ }); // end of the extensio of $.fn
|
|
|
+
|
|
|
+ // alias gameQuery to gQ for easier access
|
|
|
+ $.extend({ gQ: $.gameQuery});
|
|
|
+})(jQuery);
|
Fabrice Ecaille
12 년 전
