Untitled

<!doctype html>
<title>Agent Game</title>
<style>

  #circle {
  background: hsl(0,90%,50%);
  border: 1px solid hsl(0,100%,20%);
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  --webkit-border-radius: 50px;
  border-radius: 50px;
  }

</style>

<html id="main"></html>
<script>
  function Circle(){
    this.position = { x: 100, y: 100};
    this.target   = { x: 200, y: 200};
    this.element = document.createElement('div');
    this.element.setAttribute('id','circle');
    this.element.setAttribute('style','left:'+this.position.x+'px;top:'+this.position.y+'px;');

    document.getElementById('main').appendChild(this.element);
  };

  Circle.prototype = {
        updateTarget : function(event){
    console.log(event);
            this.target.x = event.pageX;
            this.target.y = event.pageY;
        },
        updatePosition : function(){
            var moveDirection = { x: (this.target.x - this.position.x), y:    (this.target.y - this.position.y)};
            var laengeMoveDirection = Math.sqrt((moveDirection.x * moveDirection.x) + (moveDirection.y * moveDirection.y));
            var normalised = { x: moveDirection.x / laengeMoveDirection, y: moveDirection.y / laengeMoveDirection};

            this.position.x += normalised.x;
            this.position.y += normalised.y;
            this.element.setAttribute('style','left:'+this.position.x+'px;top:'+this.position.y+'px;');
        }
    };
    var currentCircle = new Circle();
  var timer = setInterval(function(){currentCircle.updatePosition();}, 10);

  document.addEventListener('mousemove', function(event){currentCircle.updateTarget(event);});
</script>