JavaScript 画布颜色属性干扰

Question

问题：方块的颜色应该是灰色，而是继承了球的颜色属性，即红色。 block2 应该是蓝色的，但继承了块的颜色，即灰色。我该如何解决这个问题？我刚刚开始学习如何编程，所以我对这样的事情没有太多经验：/

代码：

function Player(x, y, w, h, color) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.color = color;
    this.dy = 3;

    this.draw = function() {
        c.fillRect(this.x, this.y, this.w, this.h);
        c.fillStyle = this.color;
        c.stroke();
        c.closePath();
    };

    this.update = function() {
        if (keyW === true) {
            block.y -= block.dy;
        }
        if (keyS === true) {
            block.y += block.dy;
        }
        if (arrowUp === true) {
            block2.y -= block2.dy;
        }
        if (arrowDown === true) {
            block2.y += block2.dy;
        }


        if (this.y + this.h > canvas.height) {
            this.y = canvas.height - this.h;
        }
        if (this.y < 0) {
            this.y = 0;
        }

        this.draw();
    };
}
block = new Player(10, (canvas.height / 2) - 50, 250, 100, "grey");
block2 = new Player(canvas.width - 30, (canvas.height / 2) - 50, 20, 100, "blue");

function Ball(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.dx = 3;
    this.dy = 0;

    this.draw = function() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
    };

    this.update = function() {
        this.x -= this.dx;

        if (this.y + this.radius > canvas.height) {
            this.y = canvas.height - this.radius;
        }
        if (this.y - this.radius < 0) {
            this.y = this.radius;
        }
        if (this.x + this.radius > canvas.width) {
            this.dx = -this.dx;
        }
        if (this.x - this.radius < 0) {
            this.dx = -this.dx;
        }

        this.draw(); 
    };
}
ball = new Ball(canvas.width / 2 - 50, canvas.height / 2, 10, "red");

Answer 1

在更改颜色之前，您在 Player 更新方法中填充了一个矩形，因此它使用以前的 fillStyle 值，即红色。

代替：

c.fillRect(x, y, w, h);
c.fillStyle = this.color;

做：

c.fillStyle = this.color;
c.fillRect(x, y, w, h);