I've a user controlled rectangle div and a circle div which when met need to bounce away. I've used the below logic to achieve it, where x and y are the positions and w and h are the width and height:
function collisionDetection(rect, circle) {
//a is rect, b is circle
let aLeftOfB = (rect.x + rect.w) < circle.x;
let aRightOfB = rect.x > (circle.x + circle.w);
let aAboveB = (rect.y + rect.h) < circle.y;
let aBelowB = rect.y > (circle.y + circle.h);
return !(aLeftOfB || aRightOfB || aAboveB || aBelowB);
}
It's mostly working, the circle bounces away from the rectangle on collision except at few points. Around the edge of the rectangle or when it's above/below, it slides up/down the rectangle and then bounces away. How can I fix this issue?
