효율적인 jQuery Hittest가 있습니까?

Question

HTML, CSS 및 JavaScript (jQuery)로 간단한 게임을 만들고 있습니다. 모든 입자 (총알)가 유래하는 주선이 있습니다. 그들은 각각 단지 divs입니다. 그런 다음 적의 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일 : 당신은 아마 그래서 더 컨텍스트가 필요합니다.

편집 2011년 3월 22일 :변경된 적 페이드 아웃() 숨기기() 적이 사라질 때 (가끔 지연)을 정확하게 볼 수 있도록. hitTest는 실제 적을 클릭 할 때만 트리거되는 것으로 보이므로 통과 할 경우 트리거되지 않습니다. 또한 hitTest에서 ClearTrack을 잊어 버렸습니다. 이것은 성능을 극적으로 향상시키는 것처럼 보였지만 아직도 그다지 중요하지 않습니다.

Answer 1

최상의 성능을 원하면 jQuery를 삭제하고 기본 JavaScript를 사용하십시오.

옵션이 아닌 경우 가장 느린 부분을 프로파일 링하고 기본 DOM을 사용하십시오 (예 :

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

은 ...

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