Checking whether a bullet has hit a Space Invader I just (almost) finished a Space-Invaders game in Javascript.
I have a few bugs to clear out of the way but meanwhile I wanted to ask how I can improve the method I use to test if one of my 'Bullets' has killed an 'Invader'.

I have a feeling I used too many loops and there must be a more elegant way.

The whole program may be found here.

The exact function is:

function testForInvaders(bullet){
    var score = document.getElementById('score');
    var bulletX = bullet.getLocation()[0],
        bulletY = bullet.getLocation()[1];

    for(var i = 0; i &lt; Invaders.length; i++){
        var invaderX = Invaders[i].getLocation()[0],
            invaderY = Invaders[i].getLocation()[1];

        if(Invaders[i].isVisible()){
            // if bullet is in the invaders radius...
            if(bulletX &gt;= (invaderX - 15) &amp;&amp; bulletX &lt;= (invaderX + 15) &amp;&amp;
            bulletY &gt;= (invaderY - 15) &amp;&amp; bulletY &lt;= (invaderY + 15)){
                Invaders[i].removeVisibility();
                game.incrementScore();
                game.updateScore(score);
                return false;
            }
        }
    }
    return true;
}


This function is called from within my 'loop' function which is the interval the draws all elements to the canvas.
The logic is as follows:


move all invaders (loop through them)
move all bullets (loop through them)
for each bullet I call the above function and test against all Invaders.
then I loop through everything once more to draw it to the canvas.


How can I improve this?
General feedback would be welcome as well :)
Welcome to CodeReview! 

I'm not really working with javascript, but I noticed some things I'd like to mention: 


You can safely move the first two initialisations of invaderX an invaderY one condition deeper into the Invaders[i].isVisible() block - if the invader isn't visible there is no need to know the invaders position. 
Same with the score variable. Initialise the variable immediately before using it (game.updateScore(score)).
Don't use magic numbers like 15 for the radius of an invader. Use a static class constant or instance property of an Invader instance. This would even allow you to create invaders of different size. 
I would also put the isInInvadersRadius condition into a separate function. This function could look something like this:

function areInRadius(location1, location2, radius) {
    var x1 = location1[0],
        y1 = location1[1],
        x2 = location2[0],
        y2 = location2[1];

    return x1 &gt;= x2 - radius &amp;&amp; x1 &lt;= x2 + radius &amp;&amp;
           y1 &gt;= y2 - radius &amp;&amp; y1 &lt;= y2 + radius;
}


Using this function you wouldn't even need the temporaries bulletX and bulletY, just calling areInRadius(bullet.location(), Invaders[i].location(), Invader[i].radius). 

Your function would look like this:

function testForInvaders(bullet) {
    for(var i = 0; i &lt; Invaders.length; i++) {
        if(Invaders[i].isVisible() &amp;&amp; areInRadius(bullet.location(), Invaders[i].location, Invaders[i].radius) {
            Invaders[i].removeVisibility();

            var score = document.getElementById('score');
            game.incrementScore();
            game.updateScore(score);
            return false;
        }
    }

    return true;
}

testForInvaders gets called quite often as you already mentioned and I'm honestly not sure if the overhead of the function call above will screw with the performance. You should consider to measure the impact.


Since I'm not into javascript I can't say anything special about hit detection (maybe there is a builtin or an standard way of doing so), but I'm sure other users will remind you of those (if existent). 

Nice piece of code you delivered here for your first review. Keep it up!