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/

Answer 1

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();
}