플레이어와 벽의 픽셀 완전 충돌 감지를 수행하는 방법 (JavaScript 게임)

Question

JavaScript로 2D 게임을 만들고 있습니다. 이를 위해서는 내 선수 들간의 충돌을 "완벽하게"점검 할 수 있어야합니다 (게임에는 두 명의 플레이어가 있습니다. 사진을 열어주세요)와 벽! 내 말은, 실제로 작동하는 기능이 있지만, 벽에 뛰어 들게되면 벽을 통과하고 다른 지역에 도달하거나 캔버스를 떠날 때까지 계속 움직입니다! 또한, 그들이 쓰러지고 벽과 충돌하게 만들면, 그곳에서 멈추게됩니다. 정말 도움이 필요합니다. 그것은 대학 프로젝트이고 나는 정말로 빨리 핀란드 화해야합니다!

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); 
 
}

제발 도와주세요! 다들 감사 해요!

Answer 1

귀하의 경우에는 픽셀 완벽한 충돌이 필요합니다.

솔리드 객체의 위치를 ​​저장하기 위해 부울 행렬을 유지 관리 할 수 ​​있습니다. 벽이나 플레이어와 같은 단색 개체. 그런 다음 모든 프레임에서 플레이어가 단단한 물체가있는 위치로 이동하려고하는지 확인할 수 있습니다. 격자로 width x height을 픽셀 단위로 만들 필요는 없지만 각 솔리드 객체가 블록의 대부분을 합리적으로 차지하는 가장 큰 블록 (그리드의 단일 요소)을 선택하십시오.

예를 들어 블록 크기를 player_width/2 x player_height /2으로 선택할 수 있습니다.

또 다른 간단한 방법은 단지 배경 픽셀의 색상을 확인할 수 있었다 그리드

로 다음 그림을 참조하십시오. 게임이 간단하기 때문에 배경색과 대상색이 다릅니다. 따라서 플레이어가 픽셀 색이 배경이 아닌 곳으로 이동하려고하는지 확인해야하므로 단색 개체가있어 플레이어가 멈춰야합니다. 플레이어가 움직이고 자하는 방향으로 한 픽셀 씩, 많은 픽셀을 테스트 할 필요가 없습니다. (수평 1 개, 수직 1 개). 그러나 배경색이 선명하지 않은 경우에는 사용할 수 없습니다. 배경 색상은 이전 제안에서 우리를위한 부울 그리드의 일종입니다.