Detecting collisions between two moving objects

Question

I've got a basic Space Invaders type game going, and I can't get it to recognise when the shot from the player hits the alien. (I'm only checking Alien2 atm, the one second from the left). Since they're both moving, I've decided the only way to check for collisions is with either a range-based if statement (with 2 top coordinates and one left coordinate), or directly comparing the positions along the Y axis with Jquery.

I'm using the range-based solution at the moment, but so far it hasn't worked (not sure why).

My code so far:

        if (key == "87"/*&& document.getElementById('BarrelOne').id=='BarrelOne'*/){
            var Invader2 = document.getElementById('Alien2');
            var Shot1 = document.getElementById('ShortShot');
            Shot1.style.webkitAnimationPlayState="running";
            setTimeout(function(){
                Shot1.style.webkitAnimationPlayState="paused";
            }, 1200);   

            if(document.elementFromPoint(625.5, 265.5) == Shot1){
                Invader2.style.visibility="hidden"; 
            }
        };

Jsfiddle:

http://jsfiddle.net/ZJxgT/2/

`document.getElementById('Alien2').style.top<="265.5px"` isn't really a good comparison. Use jQuery and get the `offset().top` of that element as a number. — Blender, Dec 15 '12 at 08:45
The easiest way to detect _"collision"_ IMO, is a combination of: `Math.abs()`, the offset of the nodes (jQuery or no), and -perhaps the most underrated DOM API method- `document.getElementFromPoint`: [check MDN here](https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint) and see how it works — Elias Van Ootegem, Dec 15 '12 at 09:22
you should assign a var alien2=document.getElementById('Alien2') and same for all object for both code readability and speed. Once your code is clearer you'll allready be near from your solution (update your post with the new code). And have a look / post on http://gamedev.stackexchange.com/ rather than stackoverflow for game-related issues. — GameAlchemist, Dec 15 '12 at 09:39
I've cleaned up the code and the JsFiddle, but I'm not quite sure how to utilise the solution Elias Van Ootegem mentioned - help please? — Paul Ferris, Dec 18 '12 at 09:54

score 0 · Answer 1 · edited May 23 '17 at 11:58

0

Instead of losing hours reinventing the wheel, I would suggest to switch (if still possible, depending on your time deadline) to a real 2D game engine for Javascript, with easy collision detection.

Check as well: 2D Engines for Javascript

edited May 23 '17 at 11:58

Community

1
1

answered Dec 18 '12 at 10:01

Maxime Pacary

22,336
11
85
113

Kuf · Accepted Answer · 2012-12-19T14:52:29.837

0

I did something similar, and i found that it was much easier to achieve using gameQuery.

to test for collisions:

var collided = $("#div1").collision("#div2");

you can see full working example here

EDIT

If you're having trouble check out the API. For example, to find out how to use collisions check this part of the API.

the collision works in the following way:

This method returns the list of elements collisioning with the selected one but only those that match with the filter given as parameter. It takes two optional arguments (their order is not important). The filter is a string filtering element used to detect collision, it should contain all the elements the function should search collision into. For example if you look for collision with element of the class ‘foo’ that may be contained in a group you will use the filter ".group,.foo".

So, write something like this:

$("#ShortShot").collision("#Alien2").hide();
// will return the alien if it collides with ShortShot

or, to hide them both:

if (($("#ShortShot").collision("#Alien2")).length) {
    $("#ShortShot").remove();
    $("#Alien2").remove();
}

edited Dec 19 '12 at 14:52

answered Dec 18 '12 at 10:01

Kuf

17,318
6
67
91

That's...shockingly simple. Thanks :D – Paul Ferris Dec 18 '12 at 10:07
I'm rather new to programming with code libraries, and the gameQuery web site (oh the irony) wasn't very helpful - could you explain how this works inside a game? I can understand the code, but I don't know how to attach it to a function or whether I need to run the StartGame function. – Paul Ferris Dec 18 '12 at 11:27
It's pretty straight forward, have a look at [gameQuery Demo page](http://gamequeryjs.com/demo/) and try to find a demo as close as possible to your own game. than, just download the game code and play with it. This was the first thing i ever did with jQuery and i found it pretty easy. If you have any specific questiong feel free to ask. – Kuf Dec 18 '12 at 11:40
@PaulFerris sorry, had what? – Kuf Dec 19 '12 at 12:45
$("#blue").collision().each(function(){ // make them explode: if(!this.gameQuery.dead){ $(this).setAnimation(redExplosion, function(me){ listOfReds[$(me)[0].gameQuery.indexinlist] = undefined; $(me).remove(); }).w(60).h(60); $(this).xy(-15, -15, true); this.gameQuery.speedx = this.gameQuery.speedx/3; this.gameQuery.speedy = this.gameQuery.speedy/3; this.gameQuery.dead = true; } }); – Paul Ferris Dec 19 '12 at 13:34
But that wasn't very helpful, so I customised it down to this: if($("#ShortShot").collision("#Alien2")){ Invader2.style.visibility="hidden"; }; and that still wasn't very helpful. What do? – Paul Ferris Dec 19 '12 at 13:36
Hmm...I'm getting the feeling I'll have to import everything into gameQuery before a gameQuery solution will work, so I'll either get on that or do something else. Thanks :D – Paul Ferris Dec 20 '12 at 10:07

Detecting collisions between two moving objects

2 Answers2