Javascript 如何在鼠标悬停时移动粒子&；将它们恢复到它'；s的实际位置

我是画布编程新手。我想为我的网站创建粒子背景动画。我发现了一支代码笔，它可以在方向上为粒子设置动画。我想将鼠标悬停效果添加到粒子动画中，就像当我将鼠标悬停在粒子上时，它应该更改其位置（碰撞检测）&当鼠标移出粒子时，它应该重新排列到它的实际位置。 我尝试过鼠标移动事件，但未成功。 我怎样才能做到这一点？任何参考资料都将非常有用。先谢谢你

//随机正态分布的修改版本
函数normalPool（o）{var r=0；do{var a=Math.round（normal（{mean:o.mean，dev:o.dev}））；if（a=0）返回o.pool[a]；r++}while（r0）返回normalPool（o）；var r，a，n，e，l=o.mean，t=o.dev；do{r=（a=2*Math.random（）-1）*n}while（r>=1）；返回e=a*Math.sq.rt.log（r）/t}
常数NUM_粒子=600；
常量粒子大小=1；//视野高度
恒速=20000；//毫秒
让粒子=[]；
功能等级（低、高）{
返回Math.random（）*（高-低）+低；
}
函数getRandomColor（）{
常数arr=[{
r:215，
g:88，
b:69，
a:1
}, {
r:117，
g:161，
b:199，
a:1
}]                      
const randomColor=arr[Math.floor（Math.random（）*arr.length）]；
返回随机颜色；
}
函数createParticle（画布）{
const color=getRandomColor（）；
返回{
x:-2，
y:-2，
直径：Math.max（0，randomNormal（{mean:PARTICLE_SIZE，dev:PARTICLE_SIZE/2}）），
持续时间：randomNormal（{平均：速度，偏差：速度*0.1}），
振幅：随机正常（{平均值：16，偏差：2}），
offsetY:randomNormal（{mean:0，dev:10}），
arc:Math.PI*2，
开始时间：performance.now（）-rand（0，速度），
颜色：`rgba（${color.r}，${color.g}，${color.b}，${color.a}）`，
}
}
函数moveParticle（粒子、画布、时间）{
常量进度=（（时间-particle.startTime）%particle.duration）/particle.duration；
返回{
微粒
十:进展,，
y:（（数学sin（进度*粒子.弧）*粒子.振幅）+粒子.偏移量），
};
}
函数drawParticle（粒子、画布、ctx）{
canvas=document.getElementById（'particle-canvas'）；
常数vh=画布高度/100；
ctx.fillStyle=粒子颜色；
ctx.beginPath（）；
椭圆(
particle.x*canvas.width，
粒子y*vh+（画布高度/2），
粒径*vh，
粒径*vh，
0,
0,
2*Math.PI
);
ctx.fill（）；
}
函数绘制（时间、画布、ctx）{
//移动粒子
粒子。forEach（（粒子，索引）=>{
粒子[索引]=移动粒子（粒子、画布、时间）；
})
//清理画布
clearRect（0，0，canvas.width，canvas.height）；
//画粒子
粒子。forEach（（粒子）=>{
drawParticle（粒子、画布、ctx）；
})
//安排下一帧
requestAnimationFrame（（时间）=>draw（时间、画布、ctx））；
}
函数初始化canvas（）{
让canvas=document.getElementById（'particle-canvas'）；
canvas.width=canvas.offsetWidth*window.devicePixelRatio；
canvas.height=canvas.offsetHeight*window.devicePixelRatio；
设ctx=canvas.getContext（“2d”）；
window.addEventListener（'resize'，（）=>{
canvas.width=canvas.offsetWidth*window.devicePixelRatio；
canvas.height=canvas.offsetHeight*window.devicePixelRatio；
ctx=canvas.getContext（“2d”）；
})
返回[canvas，ctx]；
}
函数startAnimation（）{
const[canvas，ctx]=初始化canvas（）；
//创建一组粒子
for（设i=0；idraw（时间、画布、ctx））；
};
//加载文档时启动动画
（功能（）{
如果（document.readystate！=='loading'）{
startAnimation（）；
}否则{
document.addEventListener（'DOMContentLoaded'，（）=>{
startAnimation（）；
})
}
}());
html，正文{
保证金：0；
}
#粒子画布{
宽度：100%；
高度：100vh；
背景：线性梯度（至底部，rgb（10,10,50）0%，rgb（60,10,60）100%）；
垂直对齐：中间对齐；
}