Javascript html5画布上的2D冲突检测

我正在尝试复制一个名为haxball的游戏，这是一个非常简单和基本的2d足球游戏。然而，我在碰撞检测方面遇到了问题，我不想使用像Box2d这样的引擎，因为这对于我想要的东西来说有点过分，我制作这个游戏只是为了练习，因为我是一个初学者

我可以检查碰撞是否发生，但无法正确解决。我循环遍历所有对象，检查它们是否与球发生碰撞，然后，如果是，我将球放在对象的“边界”处，这样它就不会在另一个对象的“内部”。 问题来了，因为如果球同时与一个圆和一条边碰撞，它将停留在边内或圆内

这是圆的碰撞解析和边的检测与解析代码：

this.resolveCollisionCircle = function(circle) {
    var nv = circle.pos.sub(this.pos);
    nv = nv.setMag(circle.radius + this.radius).add(circle.pos);
    this.pos = nv;

    // I'll try to add later the bounce effect
}
this.edgeCollision = function() {
    if(this.pos.x-this.radius < 0) {
        this.pos.x = this.radius;
        this.velocity = this.velocity.mult(new Vector(-1, 1));
    }
    else if(this.pos.x+this.radius > Width) {
        this.velocity = this.velocity.mult(new Vector(-1, 1));
    }

    if(this.pos.y-this.radius < 0) {
        this.pos.y = this.radius;
        this.velocity = this.velocity.mult(new Vector(1, -1));
    }
    else if(this.pos.y+this.radius > Height) {
        console.log('baixo')
        this.velocity = this.velocity.mult(new Vector(1, -1));
    }
}

this.resolveCollisionCircle=函数（圆）{
var nv=圆圈位置子（本位置）；
nv=nv.setMag（circle.radius+this.radius）.add（circle.pos）；
this.pos=nv；
//稍后我将尝试添加反弹效果
}
this.edgeCollision=函数（）{
如果（此位置x-此半径<0）{
this.pos.x=this.radius；
this.velocity=this.velocity.mult（新向量（-1,1））；
}
否则如果（此位置x+此半径>宽度）{
this.velocity=this.velocity.mult（新向量（-1,1））；
}
如果（此位置y-此半径<0）{
this.pos.y=this.radius；
this.velocity=this.velocity.mult（新向量（1，-1））；
}
否则如果（此位置y+此半径>高度）{
console.log（'baixo'）
this.velocity=this.velocity.mult（新向量（1，-1））；
}
}

球相应地向速度矢量移动，在这种情况下，球的起点为（-4,0）

错误演示：

---

还有！如果你能告诉我一个好的画布教程，可以教我这些东西，我将不胜感激！我似乎只找到了另一种语言，这对我很有帮助，但偶尔能看到画布碰撞检测和解决教程会很好…

在

中。resolveCollisionCircle（）

，存储旧位置，更改位置，如果新位置在画布之外，则返回到旧位置并完全停止球

this.resolveCollisionCircle = function(circle) {
    //previous position
    var prevPos = this.pos;

    //set new position
    var nv = circle.pos.sub(this.pos);
    nv = nv.setMag(circle.radius + this.radius).add(circle.pos);
    this.pos = nv;

    //change back if out of canvas
    if ((this.pos.x-this.radius < 0) || (this.pos.x+this.radius > Width) || (this.pos.y-this.radius < 0) || (this.pos.y+this.radius > Height)) {
        this.pos = prevPos;
        this.velocity = this.acceleration = new Vector(0, 0);
    }
}

this.resolveCollisionCircle=函数（圆）{
//以前的职位
var prevPos=this.pos；
//重新定位
var nv=圆圈位置子（本位置）；
nv=nv.setMag（circle.radius+this.radius）.add（circle.pos）；
this.pos=nv；
//如果超出画布，请更改回
如果（（this.pos.x-this.radius<0）| |（this.pos.x+this.radius>Width）| |（this.pos.y-this.radius<0）| |（this.pos.y+this.radius>Height））{
this.pos=prevPos；
this.velocity=this.acceleration=新向量（0,0）；
}
}

我有点困惑。你是说当球碰到紫色的球时，你不想让球越过边缘吗？是的，就是这样。在本例中，球会停止移动，因为没有移动的空间