How to make a prototype function use the values in a constructor

Question

I am using the JavaScript canvas to make a pong-style game. I am attempting to use the values of the pong board's x and y grid values to create a prototype function for the ball to cause it to bounce off of the pong board whenever it touches. I have tried this a few different ways and I can't seem to get the ball to bounce off the pong board. I did not think that this aspect of the game's functionality would be the difficult part. I will provide snippets of the code below that I think are the problem:

var Pongboard = function() {
  this.x = 15;
  this.y = 15;
}

Ball.prototype.draw = function() {
  makeBall(this.x, this.y, 5);
}

var pongboardValues = Object.values(Pongboard);
var pongX = pongboardValues[0];
var pongY = pongboardValues[1];

Ball.prototype.checkPongCollision = function() {
  if (this.x < pongX && this.y < pongY) {
    this.xSpeed = -this.xSpeed;
    this.ySpeed = -this.ySpeed;
  };
}

Any suggestions on how to get this working? Any hints would be greatly appreciated. If it helps, I will provide the full code below.

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

//Create ball function
function makeBall (x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI*2, false);
  ctx.fill();
}

//Create pong board function
function makePong (x, y) {
  ctx.fillRect(x, y, 10, 60);
}

//Ball construcor function
var Ball = function() {
  this.x = width;
  this.y = height/2;
  this.xSpeed = 6;
  this.ySpeed = Math.random()*8 - 2;
}

//Pong board constructor function
var Pongboard = function() {
  this.x = 15;
  this.y = 15;
}

//These are the values for the Pongboard object's location
var pongboardValues = Object.values(Pongboard);
var pongX = pongboardValues[0];
var pongY = pongboardValues[1];

Ball.prototype.draw = function() {
  makeBall(this.x, this.y, 5);
}

Ball.prototype.move = function() {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 0 || this.x > width) {
    this.xSpeed = -this.xSpeed;
  };
  if (this.y < 0 || this.y > height) {
    this.ySpeed = -this.ySpeed;
  };
}

Ball.prototype.checkPongCollision = function() {
  if (this.x < pongX && this.y < pongY) {
    this.xSpeed = -this.xSpeed;
    this.ySpeed = -this.ySpeed;
  };
}

Pongboard.prototype.draw = function() {
  makePong(this.x, this.y);
}

var keyNames = {
  38: "up",
  40: "down"
};

Pongboard.prototype.moveUpAndDown = function(direction) {
  if (direction==="up") {
    this.y = this.y += -1*10;
  };
  if (direction==="down") {
    this.y = this.y += 10;
  };
};


var ball = new Ball();
var pong = new Pongboard();

$("#start-button").click(function() {
  setInterval(function() {
    ctx.clearRect(0, 0, width, height);
    pong.draw();
    ball.draw();
    ball.move();
    ctx.strokeRect(0, 0, width, height);
  }, 30);
})

$("body").keydown(function(event) {
  var direction = keyNames[event.keyCode];
  pong.moveUpAndDown(direction);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start-button">Start</button><br>
<canvas width=300 height=200 id="canvas"></canvas>

Answer 1

Here I've got things working the way I think you want it.

You could extend this to make the ball bounce randomly on the Y axis too,..

I've commented out code that really wasn't doing anything too..

Also worth noting, you wasn't even calling checkPongCollision, so I've placed that in the timer.

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

//Create ball function
function makeBall (x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI*2, false);
  ctx.fill();
}

//Create pong board function
function makePong (x, y) {
  ctx.fillRect(x, y, 10, 60);
}

//Ball construcor function
var Ball = function() {
  this.x = width;
  this.y = height/2;
  this.xSpeed = 6;
  this.ySpeed = Math.random()*8 - 2;
}

//Pong board constructor function
var Pongboard = function() {
  this.x = 15;
  this.y = 15;
}

//These are the values for the Pongboard object's location
//not needed..
//var pongboardValues = Object.values(Pongboard);
//var pongX = pongboardValues[0];
//var pongY = pongboardValues[1];

Ball.prototype.draw = function() {
  makeBall(this.x, this.y, 5);
}

Ball.prototype.move = function() {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 0 || this.x > width) {
    this.xSpeed = -this.xSpeed;
  };
  if (this.y < 0 || this.y > height) {
    this.ySpeed = -this.ySpeed;
  };
}

Ball.prototype.checkPongCollision = function() {
  //if (this.x < pong.x && this.y < pong.y) {
  if (
    this.x >= pong.x && this.x < pong.x + 10 &&
    this.y >= pong.y && this.y < pong.y + 60) 
  { 
    this.xSpeed = -this.xSpeed;
    //this.ySpeed = -this.ySpeed;
  };
}

Pongboard.prototype.draw = function() {
  makePong(this.x, this.y);
}

var keyNames = {
  38: "up",
  40: "down"
};

Pongboard.prototype.moveUpAndDown = function(direction) {
  if (direction==="up") {
    this.y = this.y += -1*10;
  };
  if (direction==="down") {
    this.y = this.y += 10;
  };
};


var ball = new Ball();
var pong = new Pongboard();

$("#start-button").click(function() {
  this.style.display = "none";
  setInterval(function() {
    ctx.clearRect(0, 0, width, height);
    pong.draw();
    ball.draw();
    ball.move();
    ctx.strokeRect(0, 0, width, height);
    ball.checkPongCollision();
  }, 30);
})

$("body").keydown(function(event) {
  var direction = keyNames[event.keyCode];
  pong.moveUpAndDown(direction);
});

body {
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="float:left" id="start-button">Start</button>
<canvas width=300 height=180 id="canvas"></canvas>