SOURCE

function checkCircle(circleB,circleA){
    var dx = circleB.x - circleA.x;
    var dy = circleB.y - circleA.y;
    var distance = Math.sqrt(dx*dx+dy*dy);
    if(distance<(circleA.radius + circleB.radius)){
        return true;
    }else{
        return false;
    }
}
function Ball(x,y,r,color){
    this.x = x||0
    this.y = y||0
    this.radius = r||12;
    this.color = color||"#6699ff"
    this.scaleX = 1;
    this.scaleY = 1;
}
Ball.prototype ={
    stroke:function(cxt){
        cxt.save()
        cxt.scale(this.scaleX,this.scaleY)
        cxt.strokeStyle=this.color
        cxt.beginPath();
        cxt.arc(this.x,this.y,this.radius,0,360*Math.PI/180,false);
        cxt.closePath();
        cxt.stroke()
        cxt.restore()
    },
    fill:function(cxt){
        cxt.save()
        cxt.translate(this.x,this.y)
        cxt.rotate(this.rotation)
        cxt.fillStyle=this.color
        cxt.scale(this.scaleX,this.scaleY)
        cxt.fillStyle=this.color
        cxt.beginPath();
        cxt.arc(0,0,this.radius,0,360*Math.PI/180,false);
        cxt.closePath();
        cxt.fill()
        cxt.restore()
    }   
}
function getRandomColor(){
    return '#'+
    (function (color){
        return (color+='0123456789abcdef'[Math.floor(Math.random()*16)])
            && (color.length==6)?color:arguments.callee(color);
    })('');
}

var c = document.getElementById("canvas");
var cxt = c.getContext("2d");
var txt = document.getElementById('txt');
var balls = []

function demo1(){
    var ballA = new Ball(c.width/2,c.height/2,20,"#ff6699");
    var mouse = {x:0,y:0};
    c.onmousemove = function(ev){
        var e = ev||event;
        mouse.x = e.layerX;
        mouse.y = e.layerY;     
    };
    (function frame(){
        window.requestAnimationFrame(frame);
        cxt.clearRect(0,0,c.width,c.height);
        var ballB = new Ball(mouse.x,mouse.y,20,"#66ccff");
        if(checkCircle(ballB,ballA)){
            txt.innerHTML="撞上了"
        }else{
            txt.innerHTML="没撞上"
        }
        ballA.fill(cxt);
        ballB.fill(cxt);
    })();
}

function demo2(){
    var ballA = new Ball(0,c.height/2,12,"#ff6699");
    var ballB = new Ball(c.width,c.height/2,12,"#66ccff");
    var vx=2;
    (function frame(){
        window.requestAnimationFrame(frame);
        cxt.clearRect(0,0,c.width,c.height);
        ballA.x +=vx;
        ballB.x +=-vx;
        if(checkCircle(ballB,ballA)){
            vx=-vx;
        }
        ballA.fill(cxt);
        ballB.fill(cxt);
    })();
}

function checkCollision(ballA,i){
    for(var j =i+1;j<balls.length;j++){
        var ballB = balls[j];
        if(checkCircle(ballB,ballA)){
            ballA.vx = -ballA.vx;
            ballA.vy = -ballA.vy;
            ballB.vx = -ballB.vx;
            ballB.vy = -ballB.vy;
            if(ballA.vx>0){
                ballA.x +=5;
            }else{
                ballA.x -=5;
            }
            if(ballA.vy>0){
                ballA.y +=5;
            }else{
                ballA.y -=5;
            }
            if(ballB.vx>0){
                ballB.x +=5;
            }else{
                ballB.x -=5;
            }
            if(ballB.vy>0){
                ballB.y +=5;
            }else{
                ballB.y -=5;
            }
        }
    }
}

function checkBorder(ball){
    if(ball.x<ball.radius){
        ball.x = ball.radius;
        ball.vx = -ball.vx;
    }else if(ball.x>c.width-ball.radius){
        ball.x=c.width-ball.radius;
        ball.vx = -ball.vx;
    }
    if(ball.y<ball.radius){
        ball.y = ball.radius;
        ball.vy = -ball.vy;
    }else if(ball.y>c.height-ball.radius){
        ball.y=c.height-ball.radius;
        ball.vy = -ball.vy;
    }
}

function drawBall(ball){
    ball.fill(cxt);
    ball.x += ball.vx;
    ball.y += ball.vy;
}

function createBalls(n){
    balls = [];
    for(var i=0;i<n;i++){
        ball = new Ball();
        ball.x = Math.random()*c.width;
        ball.y = Math.random()*c.height;
        ball.radius = 10;
        ball.color = getRandomColor()
        ball.vx = Math.random()*6 - 3;
        ball.vy = Math.random()*6 - 3;
        balls.push(ball);
    }
}

function demo3(){
    createBalls(18);
    (function frame(){
        window.requestAnimationFrame(frame);
        cxt.clearRect(0,0,c.width,c.height);
        balls.forEach(checkCollision);
        balls.forEach(checkBorder);
        balls.forEach(drawBall)
    })();
    
}

<canvas id="canvas" width="500" height="350" style="border:1px solid #000"></canvas>
<p id="txt"></p>
<div>
    <button onclick="demo1()">碰撞判断</button>
    <button onclick="demo2()">碰撞效果</button>
    <button onclick="demo3()">多求碰撞效果</button>
</div>