有高效的 jQuery Hittest 吗？

Question

我正在使用 HTML、CSS 和 JavaScript (jQuery) 创建一个简单的游戏。有一艘主船，所有粒子（子弹）都源自那里。他们每个人都只是div。然后，敌人的 div 会随机放置在整个屏幕上。

我正在寻找一种有效的方法来测试每个粒子是否击中特定的敌人。我有一些事情一开始进展顺利，但很快就陷入困境。我是 js 新手，所以我的代码非常混乱，而且在许多其他方面可能效率低下。任何建议将不胜感激！

这是我创建敌人并测试击中的部分：

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

让这样的东西在浏览器中顺利运行是否现实？我的代码只需要进行一些更改吗？您可能需要更多上下文，因此：

编辑 1/12/2012： 游戏链接已删除//不相关

注意：目前这在 Chrome 和 Safari 中效果最佳。

编辑 3/22/2011： 将敌人 fadeOut() 更改为 hide()，以便您可以准确地看到敌人何时消失（有时会延迟）。 hitTest 似乎仅在您单击实际敌人时才会触发，因此如果它通过，则不会被触发。另外，我忘记在 hitTest 上清除Interval。这似乎极大地提高了性能，但还没有完全实现。

Answer 1

如果您想要最佳性能，请放弃 jQuery 并使用本机 JavaScript。

如果这不是一个选项，请分析最慢的部分并在那里使用本机 DOM，例如

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

...成为...

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