javascript - 如何使原型(prototype)函数使用构造函数中的值

Question

我正在使用 JavaScript Canvas 制作乒乓球风格的游戏。我试图使用乒乓球板的 x 和 y 网格值来为球创建一个原型(prototype)函数，使其在接触乒乓球板时弹开。我尝试了几种不同的方法，但似乎无法让球从乒乓球板上弹起。我不认为游戏功能的这方面会是困难的部分。我将提供下面我认为存在问题的代码片段:

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;
  };
}

关于如何让它发挥作用有什么建议吗？任何提示将不胜感激。如果有帮助，我将在下面提供完整的代码。

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

这里我已经按照我认为您想要的方式工作了。

你可以扩展它，让球在 Y 轴上随机弹跳，..

我已经注释掉了实际上没有做任何事情的代码..

还值得注意的是，您甚至没有调用 checkPongCollision，因此我将其放入计时器中。

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>