<script>
window.addEventListener("load", function () {
  var canvasElement = document.createElement("canvas");

  canvasElement.width = 500;
  canvasElement.height = 500;

  document.body.appendChild(canvasElement);

  var canvasContext = canvasElement.getContext("2d");

  var circle = {x: 0, y: 0, vX: 0, vY: 0, radius: 32};
  var rectangles = [{x: 200, y: 120, width: 32, height: 32},
                    {x: 200, y: 162, width: 32, height: 32},
                    {x: 200, y: 204, width: 32, height: 32},
                    {x: 200, y: 78, width: 32, height: 32}];
  var mouse = {x: 0, y: 0};

  window.requestAnimationFrame(loop);

  document.addEventListener("mousemove", function () {
		var canvasBound = canvasElement.getBoundingClientRect();

		mouse.x = event.clientX - canvasBound.left;
    mouse.y = event.clientY - canvasBound.top;
  });

  var keys = [];

  document.addEventListener("keydown", function () {
    keys[event.keyCode] = true;
  });

  document.addEventListener("keyup", function () {
    keys[event.keyCode] = false;
  });

  function loop() {
    if (keys[37]) {
      circle.vX -= 0.2;
    }

    if (keys[38]) {
      circle.vY -= 0.2;
    }

    if (keys[39]) {
      circle.vX += 0.2;
    }

    if (keys[40]) {
      circle.vY += 0.2;
    }

    circle.x += circle.vX;
    circle.y += circle.vY;

    circle.vX *= 0.96;
    circle.vY *= 0.96;

    for (var i = 0; i < rectangles.length; i++)
      collide(circle, rectangles[i]);

    canvasContext.clearRect(0, 0, 500, 500);

    canvasContext.fillStyle = "blue";
    for (var i = 0; i < rectangles.length; i++)
      canvasContext.fillRect(rectangles[i].x, rectangles[i].y, rectangles[i].width, rectangles[i].height);

    canvasContext.fillStyle = "red";
    canvasContext.beginPath();
      canvasContext.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
    canvasContext.closePath();
    canvasContext.fill();

    window.requestAnimationFrame(loop);
  }

  function collide(circle, rectangle) {
    var cols = [];

    cols[0] = circle.x < rectangle.x; //leftOfCA
    cols[1] = circle.x >= rectangle.x + rectangle.width; //rightOfCB

    cols[2] = circle.y < rectangle.y; //topOfCA
    cols[3] = circle.y >= rectangle.y + rectangle.height; //bottomOfCB

    cols[4] = (circle.x + circle.radius) < rectangle.x; //leftOfA
    cols[5] = (circle.x - circle.radius) >= rectangle.x + rectangle.width; //rightOfB

    cols[6] = (circle.y + circle.radius) < rectangle.y; //topOfA
    cols[7] = (circle.y - circle.radius) >= rectangle.y + rectangle.height; //bottomOfB

    if (cols[0] && !(cols[1] || cols[2] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
      circle.x = rectangle.x - circle.radius;
      circle.vX = 0;
      return;
    }

    if (cols[1] && !(cols[0] || cols[2] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
      circle.x = rectangle.x + rectangle.width + circle.radius;
      circle.vX = 0;
      return;
    }

    if (cols[2] && !(cols[1] || cols[0] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
      circle.y = rectangle.y - circle.radius;
      circle.vY = 0;
      return;
    }

    if (cols[3] && !(cols[1] || cols[2] || cols[0] || cols[4] || cols[5] || cols[6] || cols[7])) {
      circle.y = rectangle.y + rectangle.height + circle.radius;
      circle.vY = 0;
      return;
    }

    var dist = {x: 0, y: 0, length: 0};

    if (cols[0] && cols[2] && !(cols[1] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
      dist.x = circle.x - rectangle.x;
      dist.y = circle.y - rectangle.y;
    }

    if (cols[1] && cols[2] && !(cols[0] || cols[3] || cols[4] || cols[5] || cols[6] || cols[7])) {
      dist.x = circle.x - (rectangle.x + rectangle.width);
      dist.y = circle.y - rectangle.y;
    }

    if (cols[0] && cols[3] && !(cols[1] || cols[2] || cols[4] || cols[5] || cols[6] || cols[7])) {
      dist.x = circle.x - rectangle.x;
      dist.y = circle.y - (rectangle.y + rectangle.height);
    }

    if (cols[1] && cols[3] && !(cols[0] || cols[2] || cols[4] || cols[5] || cols[6] || cols[7])) {
      dist.x = circle.x - (rectangle.x + rectangle.width);
      dist.y = circle.y - (rectangle.y + rectangle.height);
    }

    dist.length = Math.sqrt(dist.x * dist.x + dist.y * dist.y);

    if (dist.length !== 0 && dist.length < circle.radius) {
      circle.x += dist.x * (circle.radius - dist.length) / dist.length;
      circle.y += dist.y * (circle.radius - dist.length) / dist.length;
    }
  }
});
</script>