3

我正在使用 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 年 1 月 12 日： 游戏链接已删除//不相关

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

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

4

1 回答 1

3

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

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

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

……变成……

var newEnemy = document.createElement('div');
newEnemy.className = 'enemy';
于 2011-03-21T05:33:16.310 回答