ES 2015 ES6 Pong无法让我的球正确渲染

Question

尝试使用javascript 2015或ES6为编码作业构建一个pong游戏我不确定我做错了什么，因为程序无法呈现正确的球大小。 （它只会以8像素的半径渲染，即使当半径设置为200px时球也会来回弹跳）不确定为什么会发生这种情况。非常感谢帮助！ ----------

import { SVG_NS } from '../settings';

export default class Ball {
    constructor(radius, boardWidth, boardHeight) {
        this.radius = radius;
        this.boardWidth = boardWidth;
        this.boardHeight = boardHeight;
        this.direction = 1;
        this.fill = 'red';

        this.ping = new Audio('public/sounds/pong-04.wav');

        this.reset();
    }

    wallCollision() {
        const hitLeft = this.x - this.radius <= 0;
        const hitRight = this.x + this.radius >= this.boardWidth;
        const hitTop = this.y - this.radius <= 0;
        const hitBottom = this.y + this.radius >= this.boardHeight;

        if (hitLeft || hitRight) {
            this.vx = -this.vx
        } else if (hitTop || hitBottom) {
            this.vy = -this.vy
        }
    }

    paddleCollision(paddle1, paddle2) {
        if (this.vx > 0) {
            let paddle = paddle2.coordinates(paddle2.x, paddle2.y,      paddle2.width, paddle2.height)
            let [leftX, rightX, topY, bottomY] = paddle;
            if (
                this.x + this.radius >= leftX
                && this.x + this.radius <= rightX
                && this.y >= topY
                && this.y <= bottomY

            ) {
                this.vx = -this.vx
                this.ping.play()
            }
            } else {
              let paddle = paddle1.coordinates(paddle1.x, paddle1.y,  paddle1.width, paddle1.height)
            let [leftX, rightX, topY, bottomY] = paddle;
            if (
                this.x - this.radius <= rightX
                && this.x - this.radius <= leftX
                && this.y >= topY
                && this.y <= bottomY
            ) {
                this.vx = -this.vx
                this.ping.play()

            }
        }
    }

    reset() {
        this.x = this.boardWidth / 2;
        this.y = this.boardHeight / 2;

        this.vy = 0

        while (this.vy === 0) {
            this.vy = Math.floor(Math.random() * 10 - 5);
        }
        this.vx = this.direction * (6 - Math.abs(this.vy));
     }

    goal(paddle) {
        paddle.score++;
        this.reset();

    }

    render(svg, paddle1, paddle2) {
        this.x += this.vx;
        this.y += this.vy;

        if (paddle1.score >= 3) {
            this.radius = 20;
            this.fill = 'skyblue';
        } else if (paddle2.score >= 3) {
            this.radius = 20;
            this.fill = 'skyblue';
        }

         this.wallCollision();
         this.paddleCollision(paddle1, paddle2);
         let circle = document.createElementNS(SVG_NS, 'circle');

         circle.setAttributeNS(null, 'r', 8);
         circle.setAttributeNS(null, 'cx', this.x);
         circle.setAttributeNS(null, 'cy', this.y);
         circle.setAttributeNS(null, 'fill', this.fill);

         svg.appendChild(circle);

         const rightGoal = this.x + this.radius >= this.boardWidth;
         const leftGoal = this.x - this.radius <= 0;

        if (rightGoal) {
            this.goal(paddle1);
            this.direction = 1;
        } else if (leftGoal) {
            this.goal(paddle2);
            this.direction = -1;
        }
    }
}