onaluf / gameQuery

a javascript game engine with jQuery
http://gamequeryjs.com
633 stars 161 forks source link

mouse functionality not working #5

Closed hososugi closed 13 years ago

hososugi commented 13 years ago

I have mostly just been using the gameQuery functions and haven't tested any of the jQuery functions, but I'm trying to make it so the player can click on a sprite and have a div be appended to the group, but the click does nothing. I don't get any errors or warnings. This is my code:

... .addGroup("NPCs", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}) .addSprite("test_NPC1",{animation: NPC1_Animation["idle_left"], posx: 0, posy: 0, width: 50, height: 100}) ... $("#test_NPC1").mousedown(function() { alert('Handler for .mousedown() called.'); });

$.playground().registerCallback(function(){ ...

I have tried mouseenter, mouseleave, and a few other mouse functions, but nothing.

hososugi commented 13 years ago

Could it be because I have more groups right after that group and it's causing only the last group to accept the mouse click?

EDIT: I moved that sprite to the last group and when I click it works now. Is there a way to get around this? Or do I have to have anything I want the mouse to interact with be in the last group?

bugnano commented 13 years ago

I got the same issue when developing a game some time ago. It seems that if two divs overlap, only the last one in the DOM tree gets the mouse events.

I have worked around this issue by creating a div that is created after all the sprite groups. After that, I have bound the mousedown handler to that div, and in order to know which sprite got clicked, I used the collision detection algorithms against the pageX and pageY attributes of the mouse event

hososugi commented 13 years ago

I was thinking what you said might be the way to make it work, but when I was trying to use e.pageX and e.pageY it wasn't working. It kept saying that e is not defined. I'll have to play around with it some more to see if I can get it work. Thanks.

bugnano commented 13 years ago

e is the first parameter of the mousedown handler, for example $('#mydiv').mousedown(function (e) { console.log(e.pageX); console.log(e.pageY); });

Johnnyphp commented 10 years ago

Consegui resolver a interação do GameQuery com Mouse da seguinte maneira, bem arcaica por sinal, coloquei minha tela em 100%, captei o evento MouseOver e comparei se o mesmo estava em colisão com o objeto que eu queria, esta funcionando bem porém era interessante que tivesse algo referente a eventos do mouse na biblioteca