將碰撞檢測添加到畫布上繪製的圖像

Question

我正在使用HTML5畫布和JavaScript創建一個簡單的基於Web的遊戲。我目前在畫布上顯示了一些圖像，每個代表在快餐店中找到的物品。我還有四個'描述框'，每個都標記資產，負債，收入或支出。

每個圖像都屬於這些描述框之一，並且用戶需要將每個圖像拖放到正確的描述框中。

我打算檢查用戶是否通過使用包含盒子圖像的JS變量的名稱將圖像拖到正確的盒子，並且每個圖像的HTML alt標籤（即img「chair」） alt標籤「資產」，資產的描述框具有變量名「assetsDescriptionBox」，所以我將使用'if'語句來檢測用戶拖動的圖像是否被拖動到畫布的相同區域，資產描述框正在顯示，如果該圖像具有alt標記「asset」，它將從畫布中消失（並被添加到數組中供稍後在遊戲中使用）。

但是，如果用戶拖動的圖像沒有alt標籤「asset」，但有一些其他標籤，即「liability」，那麼它將在畫布上重繪，返回它最初繪製的位置。

我不確定的是如何實現這一點。我看過碰撞檢測，看起來有一種方法是使用JS方法getBoundingClientRect獲取圖像的「外部極限」，然後檢查兩幅圖像的外部極限是否重疊，如果他們這樣做，那麼做點什麼。但是，我不確定如何使用此方法，並且在執行快速Google搜索時找不到任何特別有用的內容。

有誰知道這是否是最好的方法嗎？如果是這樣，你可以發表一個如何使用getBoundingClientRect方法的例子嗎？或者，如果不是，你會怎麼做呢？

編輯17/12/2012 @ 16:45

順便說一句，我使用的KineticJS庫添加阻力（我已經保存在本地做一個或兩個改變複印件）並刪除功能，所以我假設在庫中會有某些東西需要修改/添加以添加碰撞檢測。

任何人有任何想法？

編輯2013年1月1日12:35 @

您好，感謝您的答案 - 它肯定好像這就是我想做的事情。我已經將所有圖像顯示在畫布上，有四個「靜態」圖像，不能在畫布上拖動 - 這些是我想用作「拖放區域」的圖像，可以拖動和放下其餘的。我不太確定如何將代碼提供的功能添加到我已有的功能中？如果你轉到URL：users.aber.ac.uk/eef8/project/development/featureset2dev，你將能夠看到我已經工作。

到「懸浮窗」功能添加到我的描述箱子，我應該將它們添加到畫布與線

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60); 

，你在你的例子做了什麼？

Answer 1

我想說這樣做的最好方法是跟蹤每個對象的X/Y位置以及寬度和高度;使用一個簡單的矩形碰撞函數，就像這個一樣，需要兩個對象並檢查邊界框是否重疊。

function collides(a, b) 
{ 
    if (a.x < b.x + b.width && 
     a.x + a.width > b.x && 
     a.y < b.y + b.height && 
     a.y + a.height > b.y) return true; 
} 

如果我要對此，我可能會使用具有連接到它拖放區對象的對象設置它，使圖像只能觸發而不是檢查ALT標記一個放置區，利用純JS。

function Image(x, y, w, h, i, dx, dy, dw, dh) 
{ 
    this.x = x; 
    this.y = y; 
    this.width = w; 
    this.height = h; 
    this.image = i; 
    this.dropzone = new DropZone(dx, dy, dw, dh); 
} 

function DropZone(x, y, w, h) 
{ 
    this.x = x; 
    this.y = y; 
    this.width = w; 
    this.height = h; 
} 

var i = new Image(200, 200, 50, 50, 'cat.jpg', 300, 300, 60, 60); 

然後你會有一個循環來更新拖動圖像的座標，當你移動它。請注意，您不能在畫布內的繪製精靈上單擊處理程序，只能在畫布本身上使用;你檢查鼠標座標是否在繪製的精靈中。

另一種解決這個問題的方法當然是使用HTML5拖放API，但我沒有關於如何使用它的經驗，它可能更適合您的需求。

http://www.html5rocks.com/en/tutorials/dnd/basics/