Обнаружение столкновений круга и прямоугольника

Question

Я кодирую игру, которая включает в себя столкновение движущегося круга, контролируемого пользователем, и движущийся прямоугольник, управляемый компьютером.

Полный код можно найти здесь: Game

У меня возникли проблемы с обнаружением столкновений между кругом и прямоугольником. Когда прямоугольник статичен, обнаружение столкновения работает отлично. В тот момент, когда края круга и прямоугольника касаются любой стороны, программа действует так, как предполагается.

Однако, когда я даю движение прямоугольника, столкновение отлично работает с правой стороны прямоугольника, но не слева.

Я могу играть с цифрами, чтобы они работали слева, но не справа, однако я не могу заставить его работать правильно с обеих сторон. Есть ли простое исправление, которое мне не хватает?

Я приложил несколько фотографий, чтобы проиллюстрировать, что я имею в виду.

Это функция обнаружения столкновения.

function collisionDetection(player,rect) { 
    var distX = Math.abs(player.x - player.dx - rect.x - rect.w/2); 
    var distY = Math.abs(player.y - rect.y - rect.h/2); 

    if (distX >= (rect.w/2 + player.r - player.dx)) { 
    return false; 
    } 
    if (distY > (rect.h/2 + player.r)) { 
    return false; 
    } 

    if (distX <= rect.w/2) { 
    return true; 
    } 
    if (distY <= rect.h/2) { 
    return true; 
    } 
} 

if(collisionDetection(player,rect)) { 
    alert("You Lose"); 
    document.location.reload(); 
} 

Спасибо

Answer 1

У вас было несколько сбоев в работе вашего столкновения.

Вот рабочий код, чтобы обнаружить прямоугольник против круга столкновений:

function collisionDetection(player,rect){ 
    var distX = Math.abs(circle.x - rect.x - rect.w/2); 
    var distY = Math.abs(circle.y - rect.y - rect.h/2); 

    if (distX > (rect.w/2 + circle.r)) { return false; } 
    if (distY > (rect.h/2 + circle.r)) { return false; } 

    if (distX <= (rect.w/2)) { return true; } 
    if (distY <= (rect.h/2)) { return true; } 

    // also test for corner collisions 
    var dx=distX-rect.w/2; 
    var dy=distY-rect.h/2; 
    return (dx*dx+dy*dy<=(circle.r*circle.r)); 
} 

Answer 2

Вы не должны использовать ширину более 2 и высоты над 2.

Вы должны проверить на player.x и игрока .y находятся внутри прямоугольника + радиус. По существу увеличивайте все стороны прямоугольника на радиус.

rect.y + rect.h + player.r 
rect.x + rect.w + player.r 
rect.x - player.r 
rect.y - player.r 

Если позиция игрока находится внутри нового увеличенного прямоугольника, возникает столкновение.

if(player.x > (rect.x - player.r) and player.x < (rect.x + rect.w + player.r) and player.y > (rect.y - player.r) and player.y < rect.y + rect.h + player.r) 
return true;