gameQuery
a javascript game engine with jQuery
Possible Duplicate:
How to detect if two divs touch with jquery?
I've spent a lot of time trying to figure out how to detect if two divs are overlapping.
I tried the gamequery plugin and used it like this:
$("#" + checkform).collision("#" + checkform + "w").each(function(){
alert("Collision");
});
Would you use the gamequery plugin and/or how would you do it?
Source: (StackOverflow)
I know I can use mousedown selection for it, but I am wanting the clicked on sprite to follow my mouse, there is a mousetracker function of sorts mentioned in the api; but unfortunately there are no examples of this other than stating that it allows mouse detection.
//add mousedown events for yarnballs.
$(".gQ_sprite").mousedown(function() {
clickedDivId = $(this).attr('id');
if(clickedDivId.charAt(8) == "-")
{
currentClickedDivId = clickedDivId
$(document).mousemove(function(e){
spriteXPosition = e.pageX
spriteYPosition = e.pageY
});
}
});
I have the location of the mouse selected, just not sure how to get the selected sprite to follow it.
any help would be greatly appreciated.
Source: (StackOverflow)
I am running into some troubles with my simple Brick Breaker game. I made a simple animation for my ball object but I have a hard time with it detecting when it comes into contact with other elements on the page. Not to mention, I can't seem to keep my player tile from moving outside the container div I made for it. I simply want the ball to bounce off the player paddle, wall and bricks.
$(function(){
$(document).keydown(function(e){
var Playerposition = $("#player").position();
var Ballposition = $("#ball").position();
switch (e.keyCode){
case 37: //Left Movement
$("#player").css('left', Playerposition.left - 20 + 'px');
break;
case 39://Right movement
$("#player").css('left', Playerposition.left + 20 + 'px');
break;
}
});
var top = 275;
var left = 325;
var interval = 5; // time interval in milliseconds
var increment = 1;
var move = function() {
if(left > 750) {
increment = -increment;
}
if(left < 0) {
increment = -increment
}
if(top > 325){
increment = -increment;
}
if(top < 0) {
increment = -increment;
}
top = top + increment;
left = left + increment;
$('#ball').css('left', left + 'px');
$('#ball').css('top', top + 'px');
};
setInterval(move, interval)});
I do have gameQuery installed, as well as Jquery. This is my game so far with my current html/css/javascript: jfiddle Sorry it does match up well, it looks fine with a full webpage.
Source: (StackOverflow)
I am having a problem with GameQuery (jQuery) collision detection
Tthey just never seem to fire?!?
I have checked all the .arrow's exist and the same for the .bot's but it just never seems to call the function
I have the below code in my main callback:
$(".bot").each(function(){
$(this).collision(".arrow").each(function(){
alert("Test");
});
});
Do you have any idea why this would just simply be doing nothing? The bot walks (has it's x value) moved right over the arrow.
Many thanks,
Source: (StackOverflow)
I have one image animation started using GameQuery. Now I want to stop the animation. For that, I have used the following code.
imgAnimation["myimage"] = new $.gameQuery.Animation({imageURL: imgPath + "test.png", numberOfFrame: 3, delta: 130, rate: 236,
type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_CALLBACK});
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH})
.addGroup("actors", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
.addSprite("myimage",{animation: imgAnimation["myimage"],
posx: imgXPos, posy: 0, width: 128, height: 384, callback: callbackAnimation})
function callbackAnimation(){
$("#myimage").stop();
$("#myimage").clearQueue();
}
$.playground().startGame();
But this does not seem to be working. But at the same time, if I use the hide() method on the same animation element( $("#myimage") ), it works.
Both methods are part of the jQuery API only.
But why does the stop method not work?
Thanks in advance.
Source: (StackOverflow)
I know this question has been asked before, but the answers simply did not work
I tried adding the jquery disable selection code here, it did not work
jQuery.fn.extend({
disableSelection : function() {
return this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css('user-select', 'none');
jQuery(this).css('-o-user-select', 'none');
jQuery(this).css('-moz-user-select', 'none');
jQuery(this).css('-khtml-user-select', 'none');
jQuery(this).css('-webkit-user-select', 'none');
});
}
});
I tried adding user-select none to it, but it didn't work
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
and am considering making a transparent alphabet in paint (would be a bit resource intensive)
the reason I need the text to be unhighlightable is it's a game that uses gamequery, and when the objects are dragged, the text within the div is highlighted, which makes it look really ugly.
Source: (StackOverflow)
Let me start by saying I am a complete newbie to js I am taking a class and one of our assignments is to make a basic race game. We are able to use any scripts we find so I chose gamequery. The premise is that the players are completely automated and will got straight x% of the time,right y% of the time and left the rest. I have used the gamequery tutorial space game as a sort of guide but when I am working with movement and collisions my code makes it really slow especially with all the back an forth movement.
function Movement(){
movetwo = Math.random();
$(".obstacle").each(function(){
var collided = $(this).collision("#player2Body,."+$.gQ.groupCssClass);
if(collided.length > 0){
$("#player2").x($("#player2").x()-2);
}
var collided2 = $(this).collision("#playerBody,."+$.gQ.groupCssClass);
if(collided2.length > 0){
$("#player").x($("#player").x()-2);
}
});
if (movetwo <= twol) {
$("#player2").y($("#player2").y()+2);
}
else if ((movetwo > twol) && (movetwo <= (twol + twor))){
$("#player2").y($("#player2").y()-2);
}
else {
$("#player2").x($("#player2").x()+2);
}
moveone = Math.random();
if (moveone <= twol) {
$("#player").y($("#player").y()+2);
}
else if ((moveone > twol) && (moveone <= (twol + twor))){
$("#player").y($("#player").y()-2);
}
else {
$("#player").x($("#player").x()+2);
}
}
I know there is a way to detect collision before the move but I really don't know how to implement it since the moves are randomized. Would a switch be faster? Also oddly it shows collision with all but about three of the obstacles I placed and for some reason it ignores those few no matter where they are randomly placed. I think I bit off more than my skill level warrants so any help would be appreciated.
Source: (StackOverflow)
Is there a method to reverse animation sequence in GameQuery. Currently, if we specify the number of frames in, it will assume that from left to right. Can we start animation from right to left? How to choose one out of the multiaminations ?
Source: (StackOverflow)
I have a game coded in jQuery where bots are moved around the screen. The below code is a loop that runs every 20ms, currently if you have over 15 bots you start to notice the browser lagging (simply because of all the advanced collision detection going on).
Is there any way to reduce the lag, can I make it any more efficient?
P.s. sorrry for just posting a block of code, I can't see a way to make my point clear enough without!
$.playground().registerCallback(function(){ //Movement Loop
if(!pause) {
for (var i in bots) {
//bots - color, dir, x, y, z, spawned?, spawnerid, prevd
var self = $('#b' + i);
var current = bots[i];
if(bots[i][5]==1) {
var xspeed = 0, yspeed = 0;
if(current[1]==0) { yspeed = -D_SPEED; }
else if(current[1]==1) { xspeed = D_SPEED; }
else if(current[1]==2) { yspeed = D_SPEED; }
else if(current[1]==3) { xspeed = -D_SPEED; }
var x = current[2] + xspeed;
var y = current[3] + yspeed;
var z = current[3] + 120;
if(current[2]>0&&x>PLAYGROUND_WIDTH||current[2]<0&&x<-GRID_SIZE||
current[3]>0&&y>PLAYGROUND_HEIGHT||current[3]<0&&y<-GRID_SIZE) {
remove_bot(i, self);
} else {
if(current[7]!=current[1]) {
self.setAnimation(colors[current[0]][current[1]]);
bots[i][7] = current[1];
}
if(self.css({"left": ""+(x)+"px", "top": ""+(y)+"px", "z-index": z})) {
bots[i][2] = x;
bots[i][3] = y;
bots[i][4] = z;
bots[i][8]++;
}
}
}
}
$("#debug").html(dump(arrows));
$(".bot").each(function(){
var b_id = $(this).attr("id").substr(1);
var collision = false;
var c_bot = bots[b_id];
var b_x = c_bot[2];
var b_y = c_bot[3];
var b_d = c_bot[1];
$(this).collision(".arrow,#arrows").each(function(){ //Many thanks to Selim Arsever for this fix!
var a_id = $(this).attr("id").substr(1);
var piece = arrows[a_id];
var a_v = piece[0];
if(a_v==1) {
var a_x = piece[2];
var a_y = piece[3];
var d_x = b_x-a_x;
var d_y = b_y-a_y;
if(d_x>=4&&d_x<=5&&d_y>=1&&d_y<=2) {
//bots - color, dir, x, y, z, spawned?, spawnerid, prevd
bots[b_id][7] = c_bot[1];
bots[b_id][1] = piece[1];
collision = true;
}
}
});
if(!collision) {
$(this).collision(".wall,#level").each(function(){
var w_id = $(this).attr("id").substr(1);
var piece = pieces[w_id];
var w_x = piece[1];
var w_y = piece[2];
d_x = b_x-w_x;
d_y = b_y-w_y;
if(b_d==0&&d_x>=4&&d_x<=5&&d_y>=27&&d_y<=28) { kill_bot(b_id); collision = true; } //4 // 33
if(b_d==1&&d_x>=-12&&d_x<=-11&&d_y>=21&&d_y<=22) { kill_bot(b_id); collision = true; } //-14 // 21
if(b_d==2&&d_x>=4&&d_x<=5&&d_y>=-9&&d_y<=-8) { kill_bot(b_id); collision = true; } //4 // -9
if(b_d==3&&d_x>=22&&d_x<=23&&d_y>=20&&d_y<=21) { kill_bot(b_id); collision = true; } //22 // 21
});
}
if(!collision&&c_bot[8]>GRID_MOVE) {
$(this).collision(".spawn,#level").each(function(){
var s_id = $(this).attr("id").substr(1);
var piece = pieces[s_id];
var s_x = piece[1];
var s_y = piece[2];
d_x = b_x-s_x;
d_y = b_y-s_y;
if(b_d==0&&d_x>=4&&d_x<=5&&d_y>=19&&d_y<=20) { kill_bot(b_id); collision = true; } //4 // 33
if(b_d==1&&d_x>=-14&&d_x<=-13&&d_y>=11&&d_y<=12) { kill_bot(b_id); collision = true; } //-14 // 21
if(b_d==2&&d_x>=4&&d_x<=5&&d_y>=-11&&d_y<=-10) { kill_bot(b_id); collision = true; } //4 // -9
if(b_d==3&&d_x>=22&&d_x<=23&&d_y>=11&&d_y<=12) { kill_bot(b_id); collision = true; } //22 // 21*/
});
}
if(!collision) {
$(this).collision(".exit,#level").each(function(){
var e_id = $(this).attr("id").substr(1);
var piece = pieces[e_id];
var e_x = piece[1];
var e_y = piece[2];
d_x = b_x-e_x;
d_y = b_y-e_y;
if(d_x>=4&&d_x<=5&&d_y>=1&&d_y<=2) {
current_bots++;
bots[b_id] = false;
$("#current_bots").html(current_bots);
$("#b" + b_id).setAnimation(exit[2], function(node){$(node).fadeOut(200)});
}
});
}
if(!collision) {
$(this).collision(".bot,#level").each(function(){
var bd_id = $(this).attr("id").substr(1);
if(bd_id!=b_id) {
var piece = bots[bd_id];
var bd_x = piece[2];
var bd_y = piece[3];
d_x = b_x-bd_x;
d_y = b_y-bd_y;
if(d_x>=0&&d_x<=2&&d_y>=0&&d_y<=2) { kill_bot(b_id); kill_bot(bd_id); collision = true; }
}
});
}
});
}
}, REFRESH_RATE);
Many thanks,
Source: (StackOverflow)
I'm writting a js game with "gameQuery" jQury plugin, a shooting game.
While there are many bullets(for examples 100 or more), the animation would turn very slowly.
I use code blow for cycling moving DOM, means excute function per 20 millisecond. All bullets is store in a array,
$.playground().registerCallback(function(){
for(var i = 0; i < bulletList.length; i++) {
//move bullet
...
}
}, 20);
How could I optimize my code to enhance efficiency. Thx!
Source: (StackOverflow)
it is the first time for me to explore jQuery and gameQuery for building games using JavaScript, so am asking about sth that might look very naive, but really i cant get it.
i am developing a game like Space Invader, the detection for collision between player missile and enemies not working.
This is my code:
the definition for my Enemy class
function Enemy(node){
this.node = $(node);
this.pts_value = 0;
return true;
}
this is the code i use to add ten enemy sprite next to each other. the enemies move together to the left and the right
$.each(new Array(10), function(index, value) {
$("#enemy_group").addSprite("enemy2_"+index,{animation: enemies[2],
posx: index * 55, posy: 0, width: 48, height: 48})
$("#enemy2_"+index).addClass("enemy");
$("#enemy2_"+index)[0].enemy = new Enemy($("#enemy2_"+index));
$("#enemy2_"+index)[0].pts_value = 150;
});
so when i need to move the enemies, i move the enemies together, i move the group that includes all the sprites "#enemy_group"
if(ENEMY_TO_RIGHT){
var enemiesNewPos = (parseInt($("#enemy_group").css("left"))) + ENEMY_SPEED;
if(enemiesNewPos < PLAYGROUND_WIDTH - 550){
$("#enemy_group").css("left", ""+enemiesNewPos+"px");
} else {
ENEMY_TO_RIGHT = false;
}
} else {
var enemiesNewPos = (parseInt($("#enemy_group").css("left"))) - ENEMY_SPEED;
if(enemiesNewPos > 0){
$("#enemy_group").css("left", ""+enemiesNewPos+"px");
} else {
ENEMY_TO_RIGHT = true;
}
}
finally for collision detection, i want to remove the enemy sprite that the players missile has hit, each missile sprite has an added class names ".playerMissiles"
$(".playerMissiles").each(function(){
var posy = parseInt($(this).css("top"));
if(posy < 0){
$(this).remove();
return;
}
$(this).css("top", ""+(posy - MISSILE_SPEED)+"px");
//Test for collisions
var collided = $(this).collision(".enemy, .group");
if(collided.length > 0){
//An enemy has been hit!
collided.each(function(){
$(this).setAnimation(enemies[0], function(node){$(node).remove();});
})
}
});
i was following the documentation tutorial on the gameQuery website.
any help appreciated, thanks,
Source: (StackOverflow)
I am not trying to get it to follow a set path since the path is variable. but I am trying to set the object to fall in a noticable pattern from where Idrop it.
$(".gQ_sprite").mouseup(function() {
//test condition to see if collides with a box etc...
collision1 = $("#" + currentClickedDivId).collision(".gQ_group, .box");
if(collision1.length > 0)
{
//irrelevent
}
else
{
//figure out yarnball Id...
i = wordLength - 1
yarnBallIdNumber = currentClickedDivId.charAt(10);
yarnBallPositionFromStart = i - yarnBallIdNumber
initialMovedYarnBallXPosition = yarnBallPositionFromStart * yarnSpacing
initialMovedYarnBallXPosition = initialXYarnPosition - initialMovedYarnBallXPosition
$("#" + currentClickedDivId).xy(initialMovedYarnBallXPosition ,yarnYPosition);
}
right now my code simply flashes the object back to its location after the user releases it, and I am trying to move it back "slowly" if you will and can't think of the best way to do it.
so far my thoughts are to use a loop and subtract (or add) the location of the object with delay, but there may be a better way to move the object that I don't know about.
any ideas?
Source: (StackOverflow)
When my son, an early teen, was writing games with Pygame, I recalled I had to implement the scene-change code for him by myself.
Now he's using jQuery to write some simple games. Can anyone help us learn how to change scenes in jQuery games? The use case is like this:
In Scene 1, the blue team and the red team had a shootout. Say the blue team won with five team members left. These five must move onto a new scene. The new scene suggests a new background, the absence of all the red team, not even their dead bodies etc.
Do we have to do this at atomic, very low level?
Is there a high-level concept, API call etc., that we are missing?
Added:
In Pygame, scene2, scene3, scene44 etc are each a different file.
From scene1, I call scene2 like this:
sprites_to_live_on = sprite1, sprite2, soldiers_still_alive, ..
background_for_scene2 = "/a/b/c/bkground123.png"
scene2.start(sprites_to_live_on, background_for_scene2)
Each sprite carries over their power, health, weapons etc into the next scene automatically.
Source: (StackOverflow)
I'm trying to handle the collisions on a game with collision() but I don't understand what's going on. Here's a summary:
$("#screen").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH});
$.playground().addSprite("wall",{animation:anim_mur, posx: 0, posy: -100, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT+300})
.addSprite("table",{animation:anim_tableau, posx: 459, posy: 122, width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});
$.playground().addGroup('enemies', {width: 320, height: 280}).end()
.addSprite("sp_bed",{animation:anim_bed, posx: PLAYGROUND_WIDTH-400, posy: 210, width: 320, height: 280})
And then I handle the collisions there
$("#sp_viseur").collision("#enemies").each(function(){
alert('test');
});
And I fill the "enemies" group with sprites in another function.
I want the function to be called any time the "sp_viseur' sprite collides with a sprite of the "enemies" group. But the function is never called!
I ran a few more tests so I have question: how does the "collision" function work? Does it use the css attributes (left, top...) or the gamequery ones (posx,posy)?
Thanks.
PS: "sp_viseur" added to the playground like the other sprites.
Source: (StackOverflow)
i created 2 sprite objects and want to check if they collide, but it doesnt seem to work.
My code:
creation of the sprites:**
.addGroup("flying", {width: 366, height: 254})
.addSprite("flyinganimation",{animation: flight,
posx: 0, posy: 0, width: 366, height: 254})
.addGroup("obstacles", {width: 169, height: 67})
.addSprite("obstaclenames", {animation: obstacleimage,
width: 169,height: 67,
posx: 300,
posy: 400})
looped code in the callback function:**
var collision = $("#flying,.group").collision("#obstacles,.group");
if (collision > 0)
{
document.write ("collision");
}
Source: (StackOverflow)