Почему мой мяч отскакивает от ничего?

Question

Я играю в простую игру в понг, и когда вы перемещаете красную коробку вверх с помощью буквы 'w', мяч все равно ни на что не падает назад.Я чувствую, что, возможно, ограничивающий прямоугольник неправильно установлен на левой стороне.Я не могу понять, что я сделал не так?

var canvas;
var context;
var timer;
var interval = 1000 / 60;
var player1;
var player2;

var ball;

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
//player = new Player();
player1 = new GameObject();
player2 = new GameObject();

ball = new GameObject();

timer = setInterval(animate, interval);

function animate() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  ball.move();

  //Move the Player to the right
  if (w) {
    console.log("");
    player1.y += -8;
  }
  if (s) {
    console.log("");
    player1.y += 8;
  }

  if (d) {
    console.log("");
    player2.y += -8;
  }
  if (u) {
    console.log("");
    player2.y += 8;
  }

  if (player1.y > canvas.height - player1.height / 2) {
    player1.y = canvas.height - player1.height / 2;
  }

  if (player1.y < player1.height / 2) {
    player1.y = player1.height / 2;
  }

  if (player2.y > canvas.height - player2.height / 2) {
    player2.y = canvas.height - player2.height / 2;
  }

  if (player2.y < player2.height / 2) {
    player2.y = player2.height / 2;
  }

  //bounce
  if (ball.x > canvas.width - ball.width / 2) {
    ball.vx = -ball.vx;
    //ball.x = 300;
    color = "#ff0000";
  }

  if (ball.x < 0 + ball.width / 2) {
    //this flips it if its a negative sign.
    ball.vx = -ball.vx;
    //ball.x = 300;
    color = "#FF4500";
  }

  //-------------------------------------------------------

  //Define Booleans for each key
  var w = false;
  var s = false;

  var u = false;
  var d = false;

  //Add Event Listeners
  document.addEventListener("keydown", press);
  document.addEventListener("keyup", release);

  document.addEventListener("keydown", presss);
  document.addEventListener("keyup", releases);

  //Event Functions
  function press(e) {
    //---This logs key codes into the browser's console.
    console.log("Pressed" + e.keyCode);

    if (e.keyCode == 87) {
      w = true;
    }
    if (e.keyCode == 83) {
      s = true;
    }
  }

  function release(e) {
    //---This logs key codes into the browser's console.
    //console.log("Released" + e.keyCode);

    if (e.keyCode == 87) {
      w = false;
    }
    if (e.keyCode == 83) {
      s = false;
    }
  }

  function presss(e) {
    //---This logs key codes into the browser's console.
    //console.log("Pressed" + e.keyCode);
    if (e.keyCode == 40) {
      u = true;
    }
    if (e.keyCode == 38) {
      d = true;
    }
  }

  function releases(e) {
    //---This logs key codes into the browser's console.
    //console.log("Released" + e.keyCode);
    if (e.keyCode == 40) {
      u = false;
    }
    if (e.keyCode == 38) {
      d = false;
    }
  }

  // JavaScript Document
  function GameObject() {
    //player's location
    this.x = canvas.width / 4;
    this.y = canvas.height / 2;

    //player's dimensions
    this.width = 50;
    this.height = 250;

    //barriers

    //ballss velocity or speed on each axis
    this.vx = 8;
    this.vy = 0;

    //player's color
    var red = "#ff0000";
    this.blue = "#0000FF";

    this.color = "#ff0000";
    this.other = "#0000FF";

    //This draws the player to the screen
    this.drawRect = function() {
      context.save();
      context.fillStyle = this.color;
      context.translate(this.x, this.y);
      context.fillRect((-this.width / 2), (-this.height / 2), this.width, this.height);
      context.restore();
    }

    this.second_drawRect = function() {
      context.save();
      context.fillStyle = this.blue;
      context.translate(canvas.width / 1.5, this.y);
      context.fillRect((-this.width / 2), (-this.height / 2), this.width, this.height);
      context.restore();
    }

    this.drawCircle = function() {
      context.save();
      context.fillStyle = this.color;
      context.translate(this.x, this.y);
      context.beginPath();
      context.arc(0, 0, 50, 0, 360 * Math.PI / 180, true)
      context.fill();
      context.stroke();
      //context.fillRect((-this.width/2), (-this.height/2), this.width, this.height);
      context.restore();
    }

    //This changes the player's position
    this.move = function() {
      this.x += this.vx;
      this.y += this.vy;
    }

    this.left = function() {
      return this.x - this.width / 1;
    }
    this.right = function() {
      return this.x + this.width / 2;
    }

    this.top = function() {
      return this.y - this.height / 4;
    }
    this.bottom = function() {
      return this.y + this.height / 4;
    }
    //////////////////////////////////////////////////////////////

    this.leftt = function() {
      return this.x - this.width / 2;
    }
    this.rightt = function() {
      return this.x + this.width / 2;
    }

    this.topp = function() {
      return this.y - this.height / 2;
    }
    this.bottomm = function() {
      return this.y + this.height / 2;
    }

    this.hitTestObject = function(obj) {
      if (this.left() < obj.right() &&
        this.right() > obj.left() &&
        this.top() < obj.bottom() &&
        this.bottom() > obj.top()) {
        return true
      }
      return false;
    }
  }

<canvas id="canvas" width = "1024" height ="800" >
    	Your browser is outdated and does not support HTML5. Please update to the latest version.
</canvas>