Is There An Efficient jQuery Hittest?

Question

I am creating a simple game with HTML, CSS, and JavaScript (jQuery). There is main ship, where all of the particles (bullets) originate from. They are each just divs. Then, enemy divs are places randomly throughout the screen.

I am looking for an efficient way to test if each particle is hitting a particular enemy. I have something that starts to work out fine, but gets bogged down incredibly fast. I am new to js, so my code is pretty messy and probably inefficient in many other ways. Any suggestions would be greatly appreciated!

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

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

Is getting something like this to run smoothly in a browser realistic? Does my code just need some changes? You will probably need more context so:

EDIT 1/12/2012: Game Link Removed // Not Relevant

NOTE: This works best in Chrome and Safari at the moment.

EDIT 3/22/2011: Changed enemy fadeOut() to hide() so that you can see exactly when an enemy disappears (it is sometimes delayed). The hitTest only seems to trigger when you click on the actual enemy, so if it passes through, it is not being triggered.Also, I forgot to clearInterval on hitTest. This seemed to boost performance dramatically, but still isn't quite there.

score 3 · Accepted Answer · answered Mar 21 '11 at 05:33

3

If you want the best performance, drop jQuery and use native JavaScript.

If that isn't an option, profile the slowest parts and use native DOM there, e.g.

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

...becomes...

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

answered Mar 21 '11 at 05:33

alex

479,566
201
878
984

Thanks, I will definitely be changing that later if I can't get this to speed up. I have another game that spawns new divs much faster and with a lot more styling that seems to work fine though. I think my problem might be that I am setting up an intense setInterval of 20ms each time an enemy spawns. Is there another way to go about this? – jackrugile Mar 22 '11 at 06:17
I'd rewrite a bunch of jQuery stuff with native code, and thenn profile them both and see what gives you the best performance enhancement. – alex Mar 22 '11 at 06:23
In my experience, the performance advantage of using native over jQuery is marginal, and you lose the convenience and readability it offers. Most of the examples I've been given really need to be optimized in other more obvious ways. Too many elements on a page for instance. – Jordan May 03 '17 at 15:48

Is There An Efficient jQuery Hittest?

1 Answers1