I'm trying to create a collision between two circles (c1: player moves and c2: static object) and put in the shortest possible distance, away when there is overlap. The below code works, but inaccurately because always push horizontally and vertically: http://postimg.org/image/ik15bv6s1/

Does anyone know the right algorithm to do this?

var distance = Math.sqrt(Math.pow(c1.x - c2.x, 2) + Math.pow(c1.y - c2.y, 2));

// r1, r2 = radius
// Collision test
if (distance <= (r1 + r2)) {

    var distanceToMove = (r1 + r2) - distance;

    if (c1.x < c2.x) {
        c1.x -= distanceToMove;
    } else {
        c1.x += distanceToMove;
    }

    if (c1.y < c2.y) {
        c1.y -= distanceToMove;
    } else {
        c1.y += distanceToMove;
    }

}

If the circles overlap, then multiply the difference vector by distanceToMove / distance. This multiplication is because you are first turning the difference vector into a unit vector by dividing it by its length (distance), and then adjusting its length from 1 to the actual distance you want to move by multiplying it by distanceToMove.

Add this adjusted vector to c1. No conditional statements required; the signs will already be correct, based on the original subtraction of c1 - c2.

Or you could simply multiply by (r1 + r2) / distance. There's no need to calculate the distance needed to move, nor to do any vector addition. Simply scale the vector by a ratio equal to desiredDistance / actualDistance and you're done.

Also, it's a pathological case but c1 and c2 *could* be right on top of each other which would cause a division by zero error. You'll need to handle that case specially.

Genial, this vector makes ??all the difference, thank you Andy Gainey, I was using an ugly hack and ignoring it