有一個有效的jQuery Hittest嗎？

我正在用HTML，CSS和JavaScript（jQuery）創建一個簡單的遊戲。有主船，所有的粒子（子彈）都來自於它。他們每個人都是div。然後，敵人的div在整個屏幕上隨機放置。有一個有效的jQuery Hittest嗎？

我正在尋找一種有效的方法來測試每個粒子是否擊中特定的敵人。我有一些開始工作得很好的東西，但卻陷入了難以置信的速度。我對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（）更改爲隱藏（），以便您可以清楚地看到敵人消失的時間（有時會延遲）。 hitTest似乎只在你點擊實際敵人時觸發，所以如果它通過，它不會被觸發。同時，我忘記了hitTest上的clearInterval。這似乎大大提高了性能，但仍然不夠。

來源

2011-03-21 jackrugile

如果您想獲得最佳性能，請使用jQuery並使用原生JavaScript。

如果這不是一個選項，請剖析最慢的部分並在其中使用本機DOM，例如，

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

... ...變得

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

來源

2011-03-21 05:33:16 alex

謝謝，我一定會改變以後，如果我不能得到這個加快。我有另外一款遊戲，它可以更快地產生新的div，並且有更多的樣式，但似乎可以正常工作。我認爲我的問題可能是每次敵人產生時我都會設置一個20ms的強烈間隔。還有另外一種方法可以解決這個問題嗎？ – jackrugile 2011-03-22 06:17:47

我會用本機代碼重寫一堆jQuery的東西，然後分析它們兩個，看看是什麼讓你獲得最佳的性能增強。 – alex 2011-03-22 06:23:04

根據我的經驗，使用native on jQuery的性能優勢很少，並且您失去了它提供的便利性和可讀性。我給出的大多數示例都需要以其他更明顯的方式進行優化。例如，頁面上的元素太多。 – Jordan 2017-05-03 15:48:56

有一個有效的jQuery Hittest嗎？

回答

相關問題