2D collision detection on html5 canvas

Question

I'm trying to replicate a game called haxball, which is a really simple and basic 2d football game. However I am having trouble on the collision detection and I didn't want to use a engine like Box2d because it's a bit of overkill for what I want and I'm making the game just to practice, since I'm a beginner.

I can check if the collision happens, but I can't resolve it properly. I loop through all objects and check if they are colliding with the ball and then, if they are, I put the ball at the "border" of the object so that it stops being "inside" the other. The problem comes here, because if the ball collides with a circle and a edge at the same time it will stay inside the edge or inside the circle.

This is the code of collision resolving for the circle and detection and resolving of the edge:

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

The ball moves accordingly to a velocity vector, in this case it starts as (-4,0)

Demo of the bug: http://antoniomc.0fees.us/

Also! If you could point me to a good canvas tutorial that could teach me this things, I would appreciate it! I only seem to find for another languages, which helped me anyway, but it would be nice to see a canvas collision detection and resolution tutorial once in a while...

I'm kind of confused. Are you saying that you don't want the ball to go over the edge when it hits the purple ball? — Noble Mushtak
Yes, that's it. In the example the ball would just stop moving because there is no space for it to move — user3820203

Noble Mushtak Noble Mushtak · Accepted Answer · 2014-07-09T12:46:01

In .resolveCollisionCircle(), store the old position, change the position, and revert back to the old position and stop the ball completely if the new position is outside of the canvas.

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

2D collision detection on html5 canvas

1 Answers