Following Test

by SushiIsAwesome

HTML

<title>Target Following Test</title>

  <body>
      <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<center>
  <canvas id="canvas" width="300" height="300"></canvas>
   </center>
      <script>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;


var circle = function (x, y, radius, fillCircle, color) {
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  if (fillCircle) {
ctx.fill();
  } else {
ctx.stroke();
  }
};

var drawRect = function (x, y, color) {
  ctx.fillStyle = color;
ctx.fillRect(x, y, 20, 20)
}

//Moving Obstacle
var Obstacle = function (x, y) {
  this.x = x;
  this.y = y;
  this.vSpeed = 0;
  this.hSpeed = 0;
}

Obstacle.prototype.drawOb = function (color) {
  drawRect(this.x, this.y, "Red")
}

Obstacle.prototype.follow = function () {
  this.y += this.vSpeed
  this.x += this.hSpeed

  if (this.x < ball.x - 9) {
    this.hSpeed = 1;
  }
  if (this.x > ball.x - 10) {
    this.hSpeed = -1;
  }
  if (this.y > ball.y - 10) {
    this.vSpeed = -1;
  }
  if (this.y < ball.y - 9) {
    this.vSpeed = 1;
  }
}

Obstacle.prototype.checkCollision = function (direction) {
  return (ball.x-ball.radius < this.x + 20)
  && (ball.x+ball.radius > this.x)
  && (ball.y-ball.radius < this.y + 20)
  && (ball.y+ball.radius > this.y)
  ;
}

// The Ball constructor
var Ball = function () {
  this.x = 20
  this.y = 20
  this.xSpeed = 0;
  this.ySpeed = 0;
  this.radius = 10;
};

// Draw the ball at its current position
Ball.prototype.draw = function () {
  circle(this.x, this.y, 10, true, "Black");
};

Ball.prototype.reposition = function (reX, reY) {
  this.x = reX;
  this.y = reY;
}

// Update the ball's position based on its speed
Ball.prototype.move = function () {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 11) {
this.x = 11;
  } else if (this.x > width - 11) {
this.x = width - 11;
  } else if (this.y < 11) {
this.y = 11;
  } else if (this.y > height - 11) {
this.y = height - 11;
  }
};

// Set the ball's direction based on a string
Ball.prototype.setDirection = function (direction) {
  if (direction === "up")...