javascript - 有没有高效的jQuery Hittest？

我正在使用HTML，CSS和JavaScript(jQuery)创建一个简单的游戏。有一个主要的船，所有的粒子(子弹)都起源于此。他们每个人都是div。然后，敌方divs会随机分布在整个屏幕上。

我正在寻找一种测试每个粒子是否击中特定敌人的有效方法。我有一些东西可以开始工作，但很快就陷入困境。我是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中效果最佳。

编辑，2011年3月22日:将敌人的faderOut()更改为hide()，以便您可以准确看到敌人何时消失(有时会延迟)。 hitTest似乎只是在您单击实际敌人时才触发，因此如果它通过则不会被触发。另外，我忘记在hitTest上清除clearInterval。这似乎可以极大地提高性能，但还远远不够。

最佳答案

如果要获得最佳性能，请删除jQuery并使用本机JavaScript。

如果不是这种选择，请分析最慢的部分并在其中使用本机DOM，例如

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

...成为...

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

关于javascript - 有没有高效的jQuery Hittest？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5374023/

HITTEST

javascript - 有没有高效的jQuery Hittest？