console 命令行工具 X clear

console

const dotsNum = 1000;
var dots = [];
var mouseX = 0, mouseY = 0;
var ak = 50000;     //引力常数
var vMax = 10; //最大速度
var dMin = 30;  //最小间隔中心距离

Create();
requestAnimationFrame(Update);
document.addEventListener('mousemove', event => {
    mouseX = event.clientX;
    mouseY = event.clientY;
})

function Update() {
    dots.forEach(dot => {
        var rr = (mouseX - dot.pX)*(mouseX - dot.pX)+
        (mouseY - dot.pY)*(mouseY - dot.pY);
        rr = Math.max(dMin*dMin,rr);
        var aX = ak / (rr*(mouseX - dot.pX) / Math.abs(mouseX - dot.pX));
        var aY = ak / (rr*(mouseY - dot.pY) / Math.abs(mouseY - dot.pY));
        dot.vX += aX;
        dot.vY += aY;
         dot.vX = Math.max(-vMax,Math.min(vMax,dot.vX));
        dot.vY = Math.max(-vMax,Math.min(vMax,dot.vY));
        //console.log(aX+" "+aY + "|| "+dot.vX+'. '+dot.vY)

        dot.pX += dot.vX;
        dot.pY += dot.vY;
        dot.style.left = Math.round(dot.pX) + "px";
        dot.style.top = Math.round(dot.pY) + "px";
    })
    requestAnimationFrame(Update);

}
function Create() {
    var canvas = document.querySelector('.canvas');
    for (i = 0; i < dotsNum; i++) {
        var dot = document.createElement('div');
        dots.push(dot);
        canvas.appendChild(dot);

        dot.className = 'dot';
        dot.pX = Random(0, 300);
        dot.pY = Random(0, 300);
        dot.style.left = Math.round(dot.pX) + "px";
        dot.style.top = Math.round(dot.pY) + "px";
        dot.vX = 0;
        dot.vY = 0;
    }
}
function Random(a, b) { //包括a，b
    return Math.floor(Math.random() * (b - a + 1)) + a;
}

<body>

    <div class="canvas">
        
    </div>
    
</body>

.canvas{
    
    height: 600px;
    width: 80%;
}
.dot{
    background-color: white;
    width: 2px;
    height: 2px;
    position: absolute;
    //box-shadow: 1px 1px 3px 1px 
    
}