Is there any efficient jQuery hittest?

I am creating a simple game with HTML, CSS and JavaScript (jQuery). There is a main ship, where all the particles (bullets) come from. Each of them is just divs. Then the enemy divs are randomly placed across the screen.

I am looking for an effective way to check if each particle strikes a specific enemy. I have something that starts to work well, but gets bogged down incredibly fast. I'm new to js, ​​so my code is pretty dirty and probably inefficient in many other ways. Any suggestions would be greatly appreciated!

Here is my section that creates enemies and tests for striking:

var createEnemy = function(){
    var xRandom = Math.floor(Math.random() * (containerW-50));
    var yRandom = Math.floor(Math.random() * (containerH-50));
    var newEnemy = $('<div class="enemy"></div>');
    $(newEnemy).css({'left':xRandom,'top':yRandom}).appendTo('#container').fadeTo(200, .7);

    var hitTest = setInterval(function(){
        var enemy = $(newEnemy);
        var particle = $('.particle');  

        var enemyT = enemy.offset().top;
        var enemyB = enemy.height()+enemyT;
        var enemyL = enemy.offset().left;
        var enemyR = enemy.width()+enemyL;

        var particleT = particle.offset().top;
        var particleB = particle.height();
        var particleL = particle.offset().left;
        var particleR = particle.width();

        if(particleT >= enemyT-particleB && particleT <= enemyB && particleL >= enemyL-particleR && particleL <= enemyR){
            enemy.hide();
            var removeEnemy = setTimeout(function(){
                newEnemy.remove();
                clearInterval(hitTest, 0);
            },500);
        }
    }, 20);
}

var enemyInt = setInterval(createEnemy, 1000);

Does it get something like this to work smoothly in the browser realistically? I only need a code? You will probably need more context, so:

1/12/2012: //

. Chrome Safari .

3/22/2011: fadeOut(), (), , ( ). HitTest, , , , , , . Interval hitTest. , , , .

+3
1

, jQuery JavaScript.

, DOM,

var newEnemy = $('<div class="enemy"></div>');

... ...

var newEnemy = document.createElement('div');
newEnemy.className = 'enemy';
+3

All Articles