代码拉取完成，页面将自动刷新
/*
* gameQuery rev. $Revision$
*
* 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 {
// Only apply filter if really necessary (break PNG alpha channel and is very slow)
if (gameQuery.angle !== 0 || gameQuery.factor !== 1 || gameQuery.factorh !== 1 || gameQuery.factorv !== 1) {
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);
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。