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

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

编辑2012年12月12日： 删除游戏链接//不相关

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

编辑3/22/2011： 将敌人fadeOut（）更改为hide（），以便您可以准确查看敌人何时消失（有时会延迟）。当你点击真正的敌人时，hitTest似乎只会触发，所以如果它通过，它就不会被触发。而且，我忘记了在hitTest上的clearInterval。这似乎大大提升了性能，但仍然不是那么好。

Answer 1

如果您想获得最佳性能，请删除jQuery并使用原生JavaScript。

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

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

... ...变为

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

有一个高效的jQuery Hittest吗？

1 个答案: