javascript - Canvas 与矩形的碰撞

Question

I Made a Pen其中我有一个函数 Rectangle()，它创建一个矩形并处理与创建的对象的碰撞。

但我只能让其中两个侧面工作(顶部和左侧)，其他侧面的工作方式就像相反，并在碰撞时将球体拉入而不是弹开，不知何故，我不知道如何解决这个问题。

我已经玩了几个小时的逻辑了，这是当前的代码:

// Top
if (bp.y > posY - brd && bp.y < yy + brd && bp.x > posX && bp.x < xx) {
    ball.velocity.y *= ball.restitution;
    ball.position.y = posY - brd;
}
// Bottom
if (bp.y > yy + brd && bp.y < posY - brd && bp.x > posX && bp.x < xx) {
    ball.velocity.y *= ball.restitution;
    ball.position.y = yy + brd;
}
// Left
if (bp.x > posX - brd && bp.x < xx + brd && bp.y > posY && bp.y < yy) {
    ball.velocity.x *= ball.restitution;
    ball.position.x = posX - brd;
}
// Right
if (bp.x > xx + brd && bp.x < posX - brd && bp.y > posY && bp.y < yy) {
    ball.velocity.x *= ball.restitution;
    ball.position.x = xx + brd;
}

On Line 116 you will find the Variables so you dont get confused by the condition.

Answer 1

试试这个:

// Top
if (bp.y > posY - brd && bp.y < posY && bp.x > posX && bp.x < xx) {
    ball.velocity.y *= ball.restitution;
    ball.position.y = posY - brd;
}
// Bottom
if (bp.y < yy + brd && bp.y > yy && bp.x > posX && bp.x < xx) {
    ball.velocity.y *= ball.restitution;
    ball.position.y = yy + brd;
}
// Left
if (bp.x > posX - brd && bp.x < posX && bp.y > posY && bp.y < yy) {
    ball.velocity.x *= ball.restitution;
    ball.position.x = posX - brd;
}
// Right
if (bp.x < xx + brd && bp.x > xx && bp.y > posY && bp.y < yy) {
    ball.velocity.x *= ball.restitution;
    ball.position.x = xx + brd;
}

摘要:在底部和右侧检查中，我翻转了第一个子句中的运算符，并更改了第二个子句中的右侧操作数。