Есть ли эффективный JQuery Hittest? - PullRequest
Новая
       10

Есть ли эффективный JQuery Hittest?

3 голосов
/ 21 марта 2011

Я создаю простую игру с HTML, CSS и JavaScript (jQuery).Есть главный корабль, откуда происходят все частицы (пули).Они просто дивы.Затем вражеские дивы размещаются случайным образом по всему экрану.

Я ищу эффективный способ проверить, поражает ли каждая частица конкретного врага.У меня есть кое-что, что начинает хорошо работать, но невероятно быстро увязает.Я новичок в 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 на данный момент.

РЕДАКТИРОВАТЬ 22.03.2011: Изменен враг fadeOut () на hide (), чтобы вы могли точно видеть, когда враг исчезает(это иногда задерживается).HitTest, кажется, срабатывает только тогда, когда вы нажимаете на реального врага, поэтому, если он проходит, он не срабатывает. Кроме того, я забыл очистить Interval для hitTest.Казалось, что это резко повысило производительность, но все еще не совсем.

1 Ответ

3 голосов
/ 21 марта 2011

Если вам нужна лучшая производительность, отбросьте jQuery и используйте собственный JavaScript.

Если это не вариант, профилируйте самые медленные части и используйте собственный DOM, например, 

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

... становится ... 

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