如何對玩家和牆壁進行像素完美的碰撞檢測（JavaScript遊戲）

-1

我正在用JavaScript製作2D遊戲。對此，我需要能夠「完美」地檢查我的球員之間的碰撞（比賽有兩名球員，請打開圖片）和牆壁！我的意思是，我有一個實際上可行的功能，但是當我讓他們跳到牆壁上時，他們會穿過牆壁並繼續移動，直到他們到達另一個區域，甚至離開畫布！另外，如果他們掉下來，我讓他們與牆壁碰撞，他們只是停在那裏，這也很糟糕！ 我真的需要幫助！這是一個大學項目，我必須儘快芬蘭！如何對玩家和牆壁進行像素完美的碰撞檢測（JavaScript遊戲）

My game looks like this

衝突檢測功能我是在這裏：

function blockRectangle (objA, objB) { 
 
    var distX = (objA.x + objA.width/2) - (objB.x + objB.width/2); 
 
    var distY = (objA.y + objA.height/2) - (objB.y + objB.height/2); 
 

 
    var sumWidth = (objA.width + objB.width)/2; 
 
    var sumHeight = (objA.height + objB.height)/2; 
 

 
    if (Math.abs(distX) < sumWidth && Math.abs(distY) < sumHeight) { 
 
    var overlapX = sumWidth - Math.abs(distX); 
 
    var overlapY = sumHeight - Math.abs(distY); 
 

 
    if (overlapX > overlapY) { 
 
     objA.y = distY > 0 ? objA.y + overlapY : objA.y - overlapY; 
 
    } 
 
    else { 
 
     objA.x = distX > 0 ? objA.x + overlapX : objA.x - overlapX; 
 
    } 
 
    } 
 
}

我做了一個迷宮牆壁和我使用的是用於循環檢查與我保存在陣列中的所有牆的碰撞！正如你可以在這裏看到：

for (var i in walls) { 
 
    var wall = walls[i]; 
 
    
 
    if ((player.x < (wall.x + wall.width)) && ((player.x + player.width) > wall.x) && (player.y < (wall.y + wall.height)) && ((player.height + player.y) > wall.y)) { 
 
    player.falling = false; 
 
    } 
 
    blockRectangle(player, wall); 
 
}

請幫幫我！謝謝你們！

來源

2017-05-12 M. Fanfa

有關於正確執行碰撞檢測的完整書籍。你讀過一些嗎？ –

給你一個上述的短篇故事答案：不要，它太貴了。你想要使用邊界框，只有靠近確切的像素，如果你必須 –

問題：你的牆壁瓷磚爲基礎（一塊長方形的牆實際上是由幾個方塊組成）？如果是這樣，以最短的方向分流玩家可能會導致玩家分流到另一個牆段。 –

在你的情況下，我懷疑像素完美的碰撞是必需的。

您可以維護一個布爾矩陣來存儲固體對象的位置。像牆壁或球員的固體物體。然後，在每一幀中，您都可以檢查您的播放器是否試圖移動到有固體物體的位置，如果它正在停止播放。您不必創建像素爲width x height的網格，而是選擇一個最大的塊（網格中的單個元素），其中每個固體對象合理佔據大部分塊。

例如，您可以選擇塊大小爲player_width/2 x player_height /2。

見與電網

以下圖像另一種簡單的方式可以是隻檢查的背景像素的顏色。由於你的遊戲很簡單，背景和物體顏色是不同的。所以你只需要檢查玩家是否試圖移動像素顏色不是背景的地方，因此存在一個堅實的物體，玩家應該停下來。你不必測試很多像素，只有1個像素在玩家試圖移動的方向。（1代表水平，1代表垂直）。但是，如果您沒有清晰的背景色，則無法使用。這裏的背景顏色對於我們在前面的建議中是一種布爾網格。

來源

2017-05-15 12:15:37 11thdimension

如何對玩家和牆壁進行像素完美的碰撞檢測（JavaScript遊戲）

回答

相關問題