A case of gradually analyzing the splitting of classes -- colorful ball collisions

Simple first step , Encapsulates a class, When called, the execution constructor is created as a small sphere ;

export default class {
    
    Element;
    constructor() {
    
        this.Element = document.createElement('div');
        Object.assign(this.Element.style, {
    
            width: '50px',
            height: '50px',
            borderRadius: '50px',
            backgroundColor:'red'
        })
        /*  obtain div box , Add elements  */
        var div = document.querySelector('.div1')
        div.appendChild(this.Element)
    }
}

### Put the created ball on div in

appendTo(parent) {
    
     if (typeof parent == "string") {
    
         parent = document.querySelector(parent);
     }
     parent.appendChild(this.Element)
     /*  Get all the attributes of the parent element  */
     this.rect = parent.getBoundingClientRect();
}

Let him move again

move() {
    
        if (this.x > this.rect.width - this.w || this.x < 0) this.speedX = -this.speedX
        if (this.y> this.rect.height - this.h ||this.y<0) this.speedY =-this.speedY
        
        this.x += this.speedX;
        this.y += this.speedY;
        this.Element.style.left = this.x + "px"; 
        this.Element.style.top = this.y + "px";  
    }
static upData() {
    
        for (var item of Circle.list) {
    
                item.move();
        }
    }

Start putting cumbersome procedures on others js In file ;
Utils The file generates this random range number and random 16 Hexadecimal number

export default class {
    
    static randomSpeed(speed, slowSpeed) {
    
        var speed = Math.random() * (2 * speed) - speed;
        return (speed>-slowSpeed && speed<slowSpeed) ?slowSpeed:speed
    }
    static randomColor() {
    
        return Array(6).fill(1).reduce(function(v,t){
    return v+(~~(Math.random()*16)).toString(16)},'#')
        return Array(6).fill(1).reduce((v)=>v + (~~(Math.random() * 16)).toString(16) , '#')
    }
}