javascript - 在新的对象参数中使用“this”选择器

我正在使用javascript pong模拟器，并且希望使其尽可能地面向对象。您可以在此处查看代码：

Github repo

Codepen showing how the paddle is not rendering

您可以看到我注释掉的用于桨叶大小调整的变量。我将大小调整移到了Paddle和Player对象的构造函数上，以使其更加面向对象。

我有一个Paddle对象构造函数：

function Paddle(x, y) {
    this.x = x;
    this.y = y;
    this.width = width/8;
    this.height = this.width/5;
    this.center = width/2 - this.width/2;
    this.x_speed = 0;
    this.y_speed = 0;
};

和Player对象的构造函数：

function Player() {
    this.startX = Paddle.center;
    this.startY = height - Paddle.height;
    this.paddle = new Paddle(this.startX, this.startY);
    this.score = 0;
};

我也有类似的计算机播放器构造函数。

在脚本的结尾，我创建了对象并开始游戏：

var player = new Player();
var computer = new Computer();
var ball = new Ball(ballStartPositionX,ballStartPositionY);

我的桨没有被创建，我认为这是由于我使用this.startX = Paddle.center;和this.paddle = new Paddle(this.startX, this.startY);的原因，特别是我在新的Paddle参数中使用'this'选择器的原因。有任何想法吗？

最佳答案

您在哪里：

function Player() {
    this.startX = Paddle.center;
    this.startY = height - Paddle.height;
    this.paddle = new Paddle(this.startX, this.startY);
    this.score = 0;
};

您正在尝试读取Paddle构造函数的center属性，但这是Paddle实例的属性。您需要将初始x和y坐标传递给Player构造函数，因此：

function Player(x, y) {

    // create paddle instance first
    this.paddle = new Paddle(x, y);

    // Use the paddle instance, not the constructor
    this.startX = this.paddle.center;
    this.startY = height - this.paddle.height; // height is a global
    this.score = 0;
};

在创建Player实例时，您必须说出它们的位置：

var player = new Player(xCoord, yCoord);

因此在构造Paddle实例时可以使用坐标。