Два шарика, которые отталкиваются друг от друга

function anim(canvas, fps, clear) {
  var context = canvas.getContext("2d");
  var interval = null;
  var update = null;
  var draw = null;
  var min = 0.0005;
  var max = 100;
  this.update = function(func) {
    update = func;
  };
 
  this.draw = function(func) {
    draw = func;
  };
 
  var step = function() {
    if (clear) {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
    if (update !== null) {
      update();
    }
    if (draw !== null) {
      draw();
    }
  };
 
  this.stop = function() {
    clearInterval(interval);
  };
 
  this.play = function() {
    if (draw !== null) {
      draw();
    }
    interval = setInterval(step, 10 / (Math.random() * (max - min) + min));
  };
}
 
function rect(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width; // ширина
  this.height = height; // высота
  this.draw = function(context, color, globalAlpha) {
    //context.globalAlpha = globalAlpha; // "прозрачность"
    context.fillStyle = color; // цвет заливки
    context.fillRect(this.x, this.y, this.width, this.height);
  };
}
 
function circle(x, y, r) {
  this.x = x;
  this.y = y;
  this.r = r;
  this.draw = function(context, color, globalAlpha) {
    context.globalAlpha = globalAlpha; // "прозрачность"
    context.fillStyle = color; // цвет заливки
    context.beginPath();
    context.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
    context.fill();
  };
}
 
function init() {
  var a = window.innerWidth;
  var b = window.innerHeight;
  var r = 25;
  var screen = new rect(0, 0, a, b);
  var ball1 = new circle(50, 100, 25);
  var ball3 = new circle(667, 454, 25);
  var vX1 = Math.random();
  var vY1 = Math.random();
  var vX3 = Math.random();
  var vY3 = Math.random();
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var game = new anim(canvas, 30, false);
  canvas.width = screen.width;
  canvas.height = screen.height;
 
  game.draw(function() {
    screen.draw(context, "black", 0.5);
    ball1.draw(context, "#00FFFF", 1);
    ball3.draw(context, "#00FF00", 1);
  });
 
  game.update(function() {
    // соприкосновение с "полом" и "потолком" холста
    if (ball1.y - ball1.r < 0 || ball1.y + ball1.r > b)
      vY1 = -vY1;
    // соприкосновение с левой и правой "стенкой" холста 
    if (ball1.x - ball1.r < 0 || ball1.x + ball1.r > a)
      vX1 = -vX1;
    // соприкосновение с "полом" и "потолком" холста
    if (ball3.y - ball3.r < 0 || ball3.y + ball3.r > b)
      vY3 = -vY3;
    // соприкосновение с левой и правой "стенкой" холста 
    if (ball3.x - ball3.r < 0 || ball3.x + ball3.r > a)
      vX3 = -vX3;
    // условие соприкосновения шаров друг с другом               
    if (Math.abs(ball1.x - ball3.x) + Math.abs(ball1.y - ball3.y) <= 50) {
 
      vX1 = -vX1;
      vX3 = -vX3;
      vY1 = -vY1;
      vY3 = -vY3;
 
    }
 
    ball1.x += vX1;
    ball1.y += vY1;
    ball3.x += vX3;
    ball3.y += vY3;
 
  });
 
  screen.draw(context, "black", 1);
  ball1.draw(context, "#00FFFF", 1);
  ball3.draw(context, "#00FF00", 1);
 
 
  // Атомы начинают движение по нажатию клавиши пробел
  var click = false;
  addEventListener("keypress", doKeyDown, true)
 
  function doKeyDown(e) {
    if (e.keyCode == 32) {
      if (!click) {
        click = true;
        game.play();
      } else {
        click = false;
        game.stop();
      }
    }
  };
 
}
init();

function myCircle(x,y,radius,color){
  this.x = x || 0;
  this.y = y || 0;
  this.r = radius || 10;
  color = color || gray;
}
 
myCircle.prototype.move = function(){...};
myCircle.prototype.render = function(){...};
 
var circle1 = new myCircle(100, 100, 30);
var circle2 = new myCircle(300, 250, 25);
 
function mainLoop(){
  circle1.move();
  circle1.render();
 
  circle2.move();
  circle2.render();
  id = requestAnimationFrame(mainLoop);
}
 
window.onload = mainLoop;

addEventListener("click", newRound, true)
 
  function newRound(e) {
  
    newRound = document.createElement('cavans'); // элемент "шар"
    newRound.style.position = 'absolute';
    newRound.style.height = 50 + 'px';
    newRound.style.width = 50 + 'px';
    newRound.style.background= 'red';
    newRound.style.left = (e.pageX - parseInt(newRound.style.width) / 2) + 'px';
    newRound.style.top = '' + (e.pageY - parseInt(newRound.style.height) / 2) + 'px';
    document.body.appendChild(newRound);
  };