檢測兩個移動物體之間的碰撞

我已經有了一個基本的太空侵略者類型的遊戲，並且我無法識別何時玩家的擊球擊中了外星人。（我只檢查Alien2 atm，從左邊一秒）。既然它們都在移動，我已經決定檢查碰撞的唯一方法是使用基於範圍的if語句（帶有2個頂部座標和一個左側座標），或者直接比較沿Y軸與Jquery的位置。檢測兩個移動物體之間的碰撞

我目前使用基於範圍的解決方案，但到目前爲止它沒有工作（不知道爲什麼）。

我迄今爲止代碼：

 if (key == "87"/*&& document.getElementById('BarrelOne').id=='BarrelOne'*/){ 
      var Invader2 = document.getElementById('Alien2'); 
      var Shot1 = document.getElementById('ShortShot'); 
      Shot1.style.webkitAnimationPlayState="running"; 
      setTimeout(function(){ 
       Shot1.style.webkitAnimationPlayState="paused"; 
      }, 1200); 

      if(document.elementFromPoint(625.5, 265.5) == Shot1){ 
       Invader2.style.visibility="hidden"; 
      } 
     };

的jsfiddle：

http://jsfiddle.net/ZJxgT/2/

來源

2012-12-15 Paul Ferris

您沒有使用的jsfiddle正確.... – bobthyasian

'的document.getElementById（ 'Alien2'）。style.top <=「265.5px」'不是一個很好的比較。使用jQuery並獲取該元素的'offset（）。top'作爲數字。 – Blender

檢測_「衝突」_ IMO的最簡單方法是：'Math.abs（）'，節點的偏移量（jQuery或no）以及 - 也許是最被低估的DOM API方法文檔的組合。 getElementFromPoint'：[檢查MDN在這裏]（https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint），看看它是如何工作的 –

我做了類似的事情，我發現它使用gameQuery實現容易得多。

來測試碰撞：

var collided = $("#div1").collision("#div2");

你可以看到完整的工作示例here

如果您無法check out the API編輯

。例如，要了解如何使用碰撞檢查this part of the API。

的collision作品以下列方式：

此方法返回與所選擇的一個，但只有那些與給定的參數濾波器匹配collisioning元素的列表。它有兩個可選參數（它們的順序並不重要）。過濾器是一個用於檢測碰撞的字符串過濾元素，它應該包含函數應該搜索碰撞到的所有元素。例如，如果您查找可能包含在組中的類「foo」的元素，您將使用過濾器「.group，.foo」。

所以，寫這樣的事情：

$("#ShortShot").collision("#Alien2").hide(); 
// will return the alien if it collides with ShortShot

，或者隱藏他們兩個：

if (($("#ShortShot").collision("#Alien2")).length) { 
    $("#ShortShot").remove(); 
    $("#Alien2").remove(); 
}

來源

2012-12-18 10:01:43 Kuf

這......非常簡單。感謝：D –

我對使用代碼庫進行編程頗爲陌生，並且gameQuery網站（諷刺）並不是非常有幫助 - 你能解釋一下這是如何在遊戲中起作用的嗎？我可以理解代碼，但我不知道如何將它附加到某個函數，或者是否需要運行StartGame函數。 –

這非常直截了當，請查看[gameQuery演示頁面]（http://gamequeryjs.com/demo/）並儘量找到儘可能接近您自己遊戲的演示。比如，只需下載遊戲代碼並使用它即可。這是我用jQuery做的第一件事，我發現它很容易。如果您有任何具體問題，請隨時提問。 – Kuf

而不是失去時間重新發明輪子，我建議切換（如果仍然有可能，這取決於你的時間期限）至a real 2D game engine for Javascript，其中easy collision detection。

檢查以及：2D Engines for Javascript

來源

2012-12-18 10:01:32

檢測兩個移動物體之間的碰撞

回答

相關問題