Разрешить круг для прямоугольного столкновения

Я пишу 2D-игру в HTML5, Canvas, мне нужно разрешить столкновение с прямоугольником - это мой код:

function Rect(x, y, w, h) {
    this.x = x; // Top x
    this.y = y; // Top y
    this.w = w; // Width
    this.h = h; // Height
}
function Circle(x, y, r) {
    this.x = x; // Center x
    this.y = y; // Center y
    this.vx = 0; // Velocity x
    this.vy = 0; // Velocity y
    this.r = r; // Radius
    this.d = 0.7 // Density
}

var ball = new Circle(200, 300, 20);
var box = new Rect(150, 400, 200, 60);
var friction = 0.8, gravity = 0.5;

И это основной цикл в игре, как видите, поле является неподвижным объектом, а мяч является движущимся объектом:

function update() {
    ball.vx *= friction;
    ball.vy += gravity;
    ball.x += ball.vx;
    ball.y += ball.vy;

    if (collides(ball, box)) {
        resolve(ball, box); // Here is the problem, to resolve the collision.
    }

    render();

    requestAnimationFrame(update);
}

Как я могу это решить? Есть ли какой-либо алгоритм, и если да, то как его реализовать в моем коде? Нет ссылок на wiki или libs, pleeaase!:

Number.prototype.clamp = function(min, max) {
    return Math.min(Math.max(this, min), max);
};
function collides(c, b) { // circle, box
    var cx = c.x.clamp(r.x, r.x + r.w);
    var cy = c.y.clamp(r.y, r.y + r.h);

    var dx = c.x - cx;
    var dy = c.y - cy;

    var d2 = dx * dx + dy * dy;
    return d2 < (c.r * c.r);
}
function resolve(c, b) {
    // ???
}

// Or just one function?
function collision(c, b) {
    // ???
}

EDIT: обнаружено, как обнаружить конфликт, но мне все еще нужно знать, как его разрешить.

ОТВЕТЫ