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日：将敌人fadeOut()更改为hide(),以便您可以准确看到敌人消失的时间(有时会延迟). hitTest似乎只是在您单击实际敌人时才触发,因此如果它通过则不会被触发.另外,我忘记在hitTest上清除clearInterval.这似乎可以极大地提高性能,但还远远不够.

解决方法:

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

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

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

…成为…

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

标签：hittest,javascript,jquery
来源： https://codeday.me/bug/20191208/2092692.html