更改鼠标时更改元素位置

Question

我在屏幕上有点，我想用鼠标推这些点。 点一定不能靠近具有给定半径的光标。

我不确定这是计算新职位的正确方法，但我有以下代码。

Dot.prototype.listenonmouseMove = function () {
    document.addEventListener('mousemove', (e) => {
        //calculate distance between mouse and dot
        let distance = Math.sqrt(((e.clientY - this.y) ** 2) + ((this.x -e.clientX) ** 2));

        //if smaller than given radius
        if (distance < 100) {
            let angle = Math.atan2((e.clientY - this.y), (this.x - e.clientX)) * 180 / Math.PI;
            this.y = parseInt(this.y + ((200 - distance) * Math.sin(angle)));
            this.x = parseInt(this.x + ((200 - distance) * Math.cos(angle)));

            this.x = this.x < 0 ? 0 : this.x;
            this.y = this.y < 0 ? 0 : this.y;
            this.changePosition()
        }
    })
};

上面的代码无法正常工作。 请检查摘要。 鼠标移动时，您会看到点跳到随机位置

 let Dot = function () { this.create(); this.x = Math.floor(Math.random() * window.innerWidth) + 1; this.y = Math.floor(Math.random() * window.innerHeight) + 1; this.changePosition(); this.listenonmouseMove() }; Dot.prototype.create = function () { let dot = document.createElement('div'); dot.className = 'dot'; this.node = dot }; Dot.prototype.changePosition = function () { if (this.requestAnimationId) return; let p = () => { if (parseInt(this.node.style.left) === this.x && parseInt(this.node.style.top)=== this.y) { cancelAnimationFrame(this.requestAnimationId); this.requestAnimationId = false } else { this.node.style.left = this.x + 'px'; this.node.style.top = this.y + 'px'; requestAnimationFrame(p) } }; this.requestAnimationId = requestAnimationFrame(p) }; Dot.prototype.listenonmouseMove = function () { document.addEventListener('mousemove', (e) => { //calculate distance between mouse and dot let distance = Math.sqrt(((e.clientY - this.y) ** 2) + ((this.x -e.clientX) ** 2)); //if smaller than given radius if (distance < 50) { let angle = Math.atan2((e.clientY - this.y), (this.x - e.clientX)) * 180 / Math.PI; this.y = parseInt(this.y + ((50 - distance) * Math.sin(angle))); this.x = parseInt(this.x + ((50 - distance) * Math.cos(angle))); this.x = this.x < 0 ? 0 : this.x; this.y = this.y < 0 ? 0 : this.y; this.changePosition() } }) }; let content = document.getElementById('content'); for (let i = 0; i < 100; i++) { let dot = new Dot(); content.appendChild(dot.node) } 

 .dot { position: absolute; background-color: black; width: 5px; height: 5px; border-radius: 50%; } 

 <div id='content'> </div> 

Answer 1

您可以使用画布获得相同的效果。

创建一个点数组。 鼠标移动时，请检查到鼠标的距离并远离鼠标。

与requestAnimationFrame循环并绘制点。

 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); let dots = []; let w = 0; let h = 0; let mouseRadius = 50; let dotRadius = 2.5; let dotsToSpawn = 100; function resize(){ w = window.innerWidth; h = window.innerHeight; canvas.width = w; canvas.height = h; } function init(){ for(let i=0;i<dotsToSpawn;i++){ dots.push({ x: Math.random()*w, y: Math.random()*h, r: dotRadius }); } } function update(mx, my){ dots = dots.map(({x,y,r}) => { //move x,y of dot away from mouse let dist = Math.sqrt(((mx-x)**2)+((my-y)**2)); let angle = Math.atan2(my-y, mx-x); while(dist < mouseRadius){ x -= Math.cos(angle); y -= Math.sin(angle); dist = Math.sqrt(((mx-x)**2)+((my-y)**2)); } return {x,y,r} }); } function draw(){ ctx.clearRect(0,0,w,h); ctx.beginPath(); dots.forEach(({x,y,r}) => { ctx.moveTo(x+r, y); ctx.arc(x, y, r, 0, Math.PI*2); }); ctx.closePath(); ctx.fillStyle = 'black'; ctx.fill(); } function loop(){ draw(); requestAnimationFrame(loop); } window.addEventListener("resize", resize); document.addEventListener("mousemove", (e)=>{ update(e.pageX, e.pageY); }); resize(); init(); loop(); 

 canvas { position: fixed; margin: 0; padding: 0; left: 0; top: 0; width: 100%; height: 100%; } 

 <canvas id="canvas"/> 

您可以使用html元素而不是canvas进行相同的操作：

 let dots = []; let w = 0; let h = 0; let mouseRadius = 50; let dotRadius = 2.5; let dotsToSpawn = 100; function resize(){ w = window.innerWidth; h = window.innerHeight; } function init(){ for(let i=0;i<dotsToSpawn;i++){ let el = document.createElement("div"); let x = Math.random()*w; let y = Math.random()*h; el.classList.add("dot"); el.style.left = x+"px"; el.style.top = y+"px"; document.body.appendChild(el); dots.push({ x, y, r: dotRadius, el }); } } function update(mx, my){ dots = dots.map(({x,y,r,el}) => { //move x,y of dot away from mouse let dist = Math.sqrt(((mx-x)**2)+((my-y)**2)); let angle = Math.atan2(my-y, mx-x); while(dist < mouseRadius){ x -= Math.cos(angle); y -= Math.sin(angle); dist = Math.sqrt(((mx-x)**2)+((my-y)**2)); } el.style.left = x+"px"; el.style.top = y+"px"; return {x,y,r,el}; }); } window.addEventListener("resize", resize); document.addEventListener("mousemove", (e)=>{ update(e.pageX, e.pageY); }); resize(); init(); 

 .dot { position: fixed; background-color: black; width: 5px; height: 5px; border-radius: 2.5px; }