Hjælp til bouncing ball i HTML5 canvas

Jeg sidder og leger lidt med at lave en animation med en bouncing ball i et HTML5 canvas element.

Jeg har indtil videre fået lavet et script, hvor der er to bolde. Den ene står stille og den anden bevæger sig mod den stillestående. 

Jeg har to udfordringer i mit script:
1: Scriptet register kun kollision, når de rammer direkte mod hinanden.

2: Når de kollidere, vil jeg gerne have en naturlig refleksion. Lige nu bliver den bare afbøjet så den kører lodret ned.

Håber nogle kan hjælpe :-)

<canvas id="canvas" style="background:#000;"></canvas>
   
   
<script type="text/javascript">
      var canvas = document.getElementById('canvas');
          c = canvas.getContext('2d');
         
    var innerWidth = 800,
          innerHeight = 400;
           
    canvas.width = innerWidth;
    canvas.height = innerHeight;

    //collision function
    function collides(a, b){
        return a.x < b.x + b.radius &&
                a.x + a.radius > b.x &&
                a.y < b.y + b.radius &&
                a.y + a.radius > b.y ;
    }

    // draw objects
    function object(x, y, radius, color)  {
        this.x=x;
        this.y=y;
        this.radius=radius;
        this.color=color;
       
        this.update = function(){
            this.draw();
        }
       
        this.draw = function(){
            c.beginPath();
            //c.rect(this.x, this.y, this.width, this.height);
            c.arc(this.x, this.y, this.radius, 0, Math.PI*2);
            c.fillStyle=this.color;
            c.fill();
            c.closePath();
        }
    }
   
      var object_1 = new object(100, 110, 25, '#fff');
    var object_2 = new object(500, 160, 50, '#ff0000');
   
    var object_1_y_pos;
   
    //animate
    function animate(){
        var animation_frame = requestAnimationFrame(animate);
        c.clearRect(0,0,innerWidth,innerHeight);
       
        if( collides(object_1,object_2) ){
            object_1.color = '#00ff06';
            object_1_y_pos = 1;
        }
       
       
        object_1.update();
       
        if(object_1_y_pos == 1){
            object_1.y +=5;
        } else {
            object_1.x +=5;
        }
       
        object_2.update();
    }
   
    animate();
   
    </script>