Я не могу настроить столкновение и гравитацию в canvas

const CANVAS_WIDTH = window.innerWidth;
const CANVAS_HEIGHT = window.innerHeight;
// FRAME PER SECOND
const FPS = 60;
// PHYSIC PER SECOND
const PPS = FPS;
const Gravity = 9.8;
const G = Gravity / PPS;

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d', {alpha: false});

canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

// CLASSES (START)
class Dot {
    /**
     * @type {number}
     */
    x;
    
    /**
     * @type {number}
     */
    y;
    
    /**
     * @param {number} x
     * @param {number} y
     */
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

class Vector extends Dot {
}

class CircleLevel {
    /**
     * @type {number}
     */
    #level = 0;
    
    /**
     * @type {string}
     */
    #color = '';
    
    /**
     * @type {number}
     */
    #radius = 0;
    
    /**
     * @type {number}
     */
    #mass = 0;
    
    /**
     * @param {number} level
     * @param {string} color
     * @param {number} radius
     * @param {number} mass
     */
    constructor(level, color, radius, mass) {
        this.#level = level;
        this.#color = color;
        this.#radius = radius;
        this.#mass = mass
    }
    
    /**
     * @returns {number}
     */
    get level() {
        return this.#level;
    }
    
    /**
     * @returns {string}
     */
    get color() {
        return this.#color;
    }
    
    /**
     * @returns {number}
     */
    get radius() {
        return this.#radius;
    }
    
    /**
     * @returns {number}
     */
    get mass() {
        return this.#mass;
    }
}

class CircleLevelsManager {
    /**
     * @type {CircleLevel[]}
     */
    static #levels = [
        new CircleLevel(1, 'red', 20, 1),
        new CircleLevel(2, 'green', 30, 2),
        new CircleLevel(3, 'blue', 40, 3),
        new CircleLevel(4, 'yellow', 50, 4)
    ];
    
    /**
     * @param {number} levelIndex
     * @returns {CircleLevel}
     */
    static getLevel(levelIndex) {
        return CircleLevelsManager.#levels[levelIndex];
    }
    
    /**
     * @param {CircleLevel} prevLevel
     * @returns {CircleLevel}
     */
    static getNextLevel(prevLevel) {
        return CircleLevelsManager.#levels[prevLevel.level];
    }
    
    /**
     * @param {CircleLevel} prevLevel
     * @returns {boolean}
     */
    static hasNextLevel(prevLevel) {
        return prevLevel.level < CircleLevelsManager.#levels.length;
    }
}

class CirclesManager {
    /**
     * @type {Set<Circle>}
     */
    static #circles = new Set();
    
    /**
     * @param {Circle} circle
     */
    static add(circle) {
        CirclesManager.#circles.add(circle);
    }
    
    /**
     * @param {Circle} circle
     */
    static delete(circle) {
        CirclesManager.#circles.delete(circle);
    }
    
    /**
     * @returns {Circle[]}
     */
    static getCircles() {
        return [...CirclesManager.#circles.values()];
    }
}

class Circle {
    /**
     * @type {Dot}
     */
    #center = new Dot(0, 0);
    
    /**
     * @type {{
     *     horizontal: number,
     *     vertical: number
     * }}
     */
    #friction = {
        horizontal: 0.98,
        vertical: 0.5,
    };
    
    /**
     * @type {Vector}
     */
    velocity = new Vector(0, 0);
    
    /**
     * @type {CircleLevel}
     */
    level = CircleLevelsManager.getLevel(0);
    
    /**
     * @param {number} x
     * @param {number} y
     * @param {CircleLevel} [level]
     */
    constructor(x, y, level) {
        CirclesManager.add(this);
        
        this.#center.x = x;
        this.#center.y = y;
        
        if (level !== undefined) this.level = level;
    }
    
    /**
     * @returns {number}
     */
    get radius() {
        return this.level.radius;
    }
    
    /**
     * @returns {number}
     */
    get mass() {
        return this.level.mass;
    }
    
    /**
     * @returns {Dot}
     */
    get center() {
        return this.#center;
    }
    
    /**
     * @param {Dot} newCenter
     */
    set center(newCenter) {
        return this.#center = newCenter;
    }
    
    /**
     * @returns {number}
     */
    get x() {
        return this.#center.x;
    }
    
    /**
     * @returns {number}
     */
    get y() {
        return this.#center.y;
    }
    
    draw() {
        ctx.beginPath();
        
        ctx.fillStyle = this.level.color;
        ctx.arc(this.#center.x, this.#center.y, this.level.radius, 0, 2 * Math.PI);
        ctx.fill();
        
        ctx.closePath();
    }
    
    update() {
        const radius = this.level.radius;
        
        // IF TOUCHES HORIZONTAL WALLS
        if (this.#center.y + radius >= CANVAS_HEIGHT || this.center.y - radius <= 0) {
            this.velocity.y = Math.abs(this.velocity.y) < 1 ? 0 : -this.velocity.y * this.#friction.vertical;
            
            if (this.velocity.y === 0 && this.center.y - radius === 0) this.velocity.y += 1;
        } else {
            // IF FALLING DOWN
            this.velocity.y += G * this.level.mass;
        }
        
        // IF TOUCHES VERTICAL WALLS
        if (this.#center.x + radius >= CANVAS_WIDTH || this.center.x - radius <= 0) {
            this.velocity.x = Math.abs(this.velocity.x) < 1 ? 0 : -this.velocity.x * this.#friction.horizontal;
        }
        
        // PUT INSIDE FRAME
        this.#center.y = Math.max(radius, Math.min(this.#center.y + this.velocity.y, CANVAS_HEIGHT - radius));
        
        // IF ON GROUND
        if (this.center.y + radius === CANVAS_HEIGHT) {
            this.velocity.x *= this.#friction.horizontal;
        }
        
        // PUT INSIDE FRAME
        this.#center.x = Math.max(radius, Math.min(this.#center.x + this.velocity.x, CANVAS_WIDTH - radius));
    }
    
    /**
     * @param {Circle} circle
     * @returns {boolean}
     */
    hasCollision(circle) {
        return distanceSquare(circle.center, this.center) <= (circle.radius + this.radius) ** 2;
    }
}

// CLASSES (END)

// UTILS (START)
/**
 * @param {Dot} dot1
 * @param {Dot} dot2
 * @returns {number}
 */
const distanceSquare = (dot1, dot2) => (dot1.x - dot2.x) ** 2 + (dot1.y - dot2.y) ** 2;

/**
 * @param {Dot} dot1
 * @param {Dot} dot2
 * @returns {number}
 */
const distance = (dot1, dot2) => Math.sqrt(distanceSquare(dot1, dot2));

/**
 * @param {Dot} vector
 * @returns {number}
 */
const lengthOfVector = vector => Math.sqrt(vector.x ** 2 + vector.y ** 2);

/**
 * @param {Dot} dot1
 * @param {Dot} dot2
 * @returns {Dot}
 */
const dotsSub = (dot1, dot2) => new Dot(dot1.x - dot2.x, dot1.y - dot2.y);

/**
 * @param {Dot} dot1
 * @param {Dot} dot2
 * @returns {Dot}
 */
const dotsSum = (dot1, dot2) => new Dot(dot1.x + dot2.x, dot1.y + dot2.y);

/**
 * @param {Dot} dot
 * @param {number} coefficient
 * @returns {Dot}
 */
const multiplyDot = (dot, coefficient) => new Dot(dot.x * coefficient, dot.y * coefficient);

/**
 * @param {Dot} dot1
 * @param {Dot} dot2
 * @returns {number}
 */
const dotsProduct = (dot1, dot2) => dot1.x * dot2.x + dot1.y * dot2.y;

/**
 * @param {Circle} circle1
 * @param {Circle} circle2
 */
function elasticCollision(circle1, circle2) {
    const massSum = circle1.mass + circle2.mass;
    let dist = distance(circle1.center, circle2.center);
    
    const correctionLength = (circle1.radius + circle2.radius - dist) / 2;
    const impact = dotsSub(circle1.center, circle2.center);
    const dir = multiplyDot(impact, correctionLength / lengthOfVector(impact));
    circle1.center = dotsSum(circle1.center, dir);
    circle2.center = dotsSub(circle2.center, dir);
    
    dist = circle1.radius + circle2.radius;
    
    const distSquare = dist ** 2;
    
    const oldVelocity1 = circle1.velocity;
    const oldVelocity2 = circle2.velocity;
    
    circle1.velocity = dotsSub(
        oldVelocity1,
        multiplyDot(
            dotsSub(circle1.center, circle2.center),
            (2 * circle2.mass / massSum) * dotsProduct(
                dotsSub(oldVelocity1, oldVelocity2),
                dotsSub(circle1.center, circle2.center),
            ) / distSquare
        )
    );
    
    circle2.velocity = dotsSub(
        oldVelocity2,
        multiplyDot(
            dotsSub(circle2.center, circle1.center),
            (2 * circle1.mass / massSum) * dotsProduct(
                dotsSub(oldVelocity2, oldVelocity1),
                dotsSub(circle2.center, circle1.center),
            ) / distSquare
        )
    );
}

function upgradeLevel(circle1, circle2) {
    let primaryCircle = circle1;
    let secondaryCircle = circle2;
    
    if (circle2.y < circle1.y) {
        primaryCircle = circle2;
        secondaryCircle = circle1;
    }
    
    CirclesManager.delete(secondaryCircle);
    
    primaryCircle.level = CircleLevelsManager.getNextLevel(primaryCircle.level);
}

// UTILS (END)

canvas.addEventListener('mousemove', e => {
    new Circle(e.clientX, e.clientY);
})

// UPDATE GAME (START)

let prevPhysicsTimeStamp = performance.now();

/**
 * @param {DOMHighResTimeStamp} timeStamp
 */
const updatePhysics = (timeStamp) => {
    requestAnimationFrame(updatePhysics);
    
    if (timeStamp - prevPhysicsTimeStamp < (1000 / PPS)) return;
    
    prevPhysicsTimeStamp = timeStamp;
    
    const circles = CirclesManager.getCircles();
    
    for (let i = 0; i < circles.length; ++i) {
        circles[i].update();
    }
    
    // CHECK COLLISIONS
    for (let i = 0; i < circles.length - 1; ++i) {
        const circle1 = circles[i];
        
        for (let j = i + 1; j < circles.length; ++j) {
            const circle2 = circles[j];
            
            if (!circle1.hasCollision(circle2)) continue;
            
            if (circle1.level === circle2.level && CircleLevelsManager.hasNextLevel(circle1.level)) {
                upgradeLevel(circle1, circle2);
            } else {
                elasticCollision(circle1, circle2);
            }
        }
    }
}

requestAnimationFrame(updatePhysics);

let prevPictureTimeStamp = performance.now();

/**
 * @param {DOMHighResTimeStamp} timeStamp
 */
const updatePicture = (timeStamp) => {
    requestAnimationFrame(updatePicture);
    
    if (timeStamp - prevPictureTimeStamp < (1000 / FPS)) return;
    
    prevPictureTimeStamp = timeStamp;
    
    // ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    ctx.fillStyle = `rgba(0, 0, 0, 0.5)`;
    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    
    const circles = CirclesManager.getCircles();
    
    for (let i = 0; i < circles.length; ++i) {
        circles[i].draw();
    }
}

requestAnimationFrame(updatePicture);

// UPDATE GAME (END)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: hidden;
}

canvas {
    background-color: black;
}

<canvas></canvas>