使用畫素碰撞檢測法算是最精確的演算法了，當然，帶來的代價也是比較明顯的，那就是效率上的低下。除非是在極為特殊的情況下，要求使用非常精確的碰撞，否則，一般情況下在遊戲中是不建議使用這種演算法，特別是在執行效率不太高的html5遊戲中。
一般來說在使用畫素碰撞檢測之前會使用aabb矩形包圍盒先檢測兩個精靈是否有碰撞，如果aabb包圍盒檢測沒有碰撞，那一定是沒有碰撞到，反之，則不一定，需要進一步進行畫素檢測。如下圖所示，很明顯，雖然兩個精靈的包圍盒發生了碰撞，但兩個精靈本身沒有發生碰撞，所以在這種精靈的形狀極為不規則的情況下，除非使用多邊形包圍盒，並且需要多邊形和精靈的形狀極為接近，才能夠獲取好的效果，而且，別忘了，多邊形只適合凸多邊形的情況。
這樣，我們就只能採用畫素檢測演算法達到精確檢測的目的。接下來，先來看看畫素碰撞的原理，首先，我們知道所有的精靈都是由畫素點組成，而在canvas的畫素資料中每個點都是由rgba四個資料組成。如果某個點的a（alpha值，透明度）為0則表示該點是透明的，比如在圖6-19中兩個精靈的空白部分的點的a值為0。如果兩個精靈發生碰撞，則表示兩個精靈有畫素點發生了重疊，即兩個精靈的畫素點座標相同，如下圖所示。
根據這個原理，基本上我們可以採取以下步驟來進行檢測。
（1）選擇需要檢測的兩個精靈。
（2）先檢測兩個精靈是否發生包圍盒碰撞，如果沒有則退出，否則獲取兩個矩形的相交區域，並繼續。
（3）把乙個精靈繪製到和遊戲螢幕等大的空白的後台緩衝區中，獲取緩衝區中在相交區域的畫素資料。
（4）清除後台緩衝區。
（5）對另乙個精靈進行步驟3的操作。
（6）得到兩個精靈在同乙個相交矩形的畫素資料後，迴圈比較每乙個畫素點，如果兩個精靈在同一位置的透明度不都是0，則表示兩個精靈有相交，退出迴圈，返回真。
需要注意的一點是，在第3步獲取相交區域的畫素資料中，需要在後台另外的乙個和遊戲螢幕等大的空白區域中繪製，而不能直接獲取遊戲畫面中的相交區域，因為兩個精靈在相交區域中的畫素已經發生了重疊【包圍盒】。
由以上的演算法可以看出，在進行畫素檢測的時候，需要另外乙個緩衝區，把需要檢測的精靈繪製一次，需要清空緩衝區，最後還要使用乙個for迴圈檢測畫素。如果相交區域為100×100個畫素點，則最壞的情況需要迴圈10 000 次，由此看來，這真不是乙個省時的工作。
html5 迷宮遊戲 碰撞檢測
遊戲效果圖 通過滑鼠拖拽在畫布上新增牆壁，通過方向鍵控制多邊形上下左右移動，遇到牆壁則無法前進。需要解決的問題 滑鼠按下，滑鼠拖動，滑鼠釋放事件的檢測 多邊形的繪製 牆壁的繪製 多邊形和牆壁的碰撞檢測 實質上是圓和線段的相交判斷 mycode 迷宮 難點多邊形和線段碰撞檢測的方法 函式interse...
html5 迷宮遊戲 碰撞檢測 例項一
遊戲效果圖 通過滑鼠拖拽在畫布上新增牆壁，通過方向鍵控制多邊形上下左右移動，遇到牆壁則無法前進。需要解決的問題 滑鼠按下，滑鼠拖動，滑鼠釋放事件的檢測 多邊形的繪製 牆壁的繪製 多邊形和牆壁的碰撞檢測 實質上是圓和線段的相交判斷 mycode 複製 如下 迷宮 難點 多邊形和線段碰撞檢測的方法 函式...
自己模擬遊戲引擎,動手寫個js碰撞檢測外掛程式
通過繼承colliderpoint類並實現其中三個方法 這三個方法是用來讓使用者重寫的 oncollisionenter 監聽第一次碰撞 oncollisionstay 一直監聽碰撞 oncollisionexit 監聽碰撞退出 oncollisionenter oncollisionstay on...