在html5畫布中使用碰撞數組進行碰撞檢測

我試圖檢測圖像中的字符和對象是否發生碰撞。我正在使用一個函數，它可以解析圖像並創建一個碰撞數組和另一個函數，該函數可以檢測特定位置是否存在碰撞。我的問題是永遠不會執行isCollision功能那是我的jsfiddle：http://jsfiddle.net/AbdiasSoftware/UNWWq/1/在html5畫布中使用碰撞數組進行碰撞檢測

if (isCollision(character.x, character.y)) { 
    alert("Collision"); 
}

請幫我解決我的問題。

來源

2014-01-24 Sora

控制檯中存在錯誤。先檢查一下。 – GameAlchemist

修復它請檢查 – Sora

好吧，我發現它：
您正在加載一個巨大的背景圖像，你畫一部分在一個更小的畫布上。
您可以在process（）函數中使用顯示畫布上的二進制視圖進行視覺碰撞檢測。
問題出現在你想測試的時候：爲了在二進制視圖中計算播放器的像素位置，你使用的是y * width + x，但是寬度不對，應該是背景圖像的寬度視圖（cw）。

function isCollision(x, y) { 
    return (buffer8[y * cw + x] === 1); 
}

。
向右移動並用此小提琴在控制檯中看： http://jsfiddle.net/gamealchemist/UNWWq/9/

來源

2014-01-25 11:38:18 GameAlchemist

在init()方法的頂部添加此，它應該工作：

FieldImg.crossOrigin = '';

正如你從不同來源CORS踢加載圖像，並且需要使用getImageData()時請求跨域使用（或toDataURL()）。

See modified fiddle here。

注意：在你最終的代碼中，這可能不是必要的，因爲你可能想將圖像包含在與頁面本身相同的域中 - 在這些情況下，除非你的服務器需要刪除交叉源請求被設置來處理這個。只是要記住，以後如果突然有什麼工作...

來源

2014-01-24 18:08:49 K3N

這個錯誤發生時，我只是發佈jsfiddle內的代碼，但我的主要問題是不存在我的問題是iscollision函數不執行你能告訴我爲什麼 – Sora

在html5畫布中使用碰撞數組進行碰撞檢測

回答

相關問題