Javascript 在JS中，如何使移动的文本相互反弹而不是重叠？

我试图使两个字，这是在我的网站页面上随机移动的div

然而，每当这两个词接触时，我希望它们相互反弹，而不是相互重叠

我需要在Javascript中更改和添加什么？我已经贴出了这些动人的文字的代码

$document.readyfunction{ animateDiv； 动画编辑； }; //动议 函数makeNewPosition{ //获取视口尺寸删除div的尺寸 变量h=$window.height-100； var w=$window.width-100； var nh=Math.floorMath.random*h； var nw=Math.floorMath.random*w； 返回[nh，nw]； } 函数animateDiv{ var newq=makeNewPosition； var oldq=$'.motion'.offset； var速度=计算速度[oldq.top，oldq.left]，newq； $'.motion'。设置{top:newq[0]，left:newq[1]}动画，速度，函数{ animateDiv； }; }; 函数animateDivTwo{ var newq=makeNewPosition； var oldq=$'.designer'.offset； var速度=计算速度[oldq.top，oldq.left]，newq； $'.designer'。动画{top:newq[0]，左：newq[1]}，速度，函数{ 动画编辑这一点； }; }; 函数calcSpeedprev，下一步{ var x=Math.absprev[1]-next[1]； var y=Math.absprev[0]-next[0]； var最大=x>y？x:y； var speedModifier=0.1； var speed=Math.ceilgreatest/speedModifier； 返回速度；} @导入url'https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'； /*动议*/ 氢{ 字体大小：40px； 字体系列：“Roboto Mono”，monospace； 用户选择：无； } .动议{ 宽度：100%； 位置：绝对位置； 左：50px； } /*设计师*/ h3{ 字体大小：40px； 字体系列：“Roboto Mono”，monospace； 用户选择：无； } .设计师{ 宽度：100%； 位置：绝对位置； 左：1200像素； } 运动 设计师

---

为了避免重叠，可以使用Javascript中名为“重叠”的简单碰撞检测功能开始连续运行，它检测motion div和designer div之间的重叠，如下所示：

$document.readyfunction{ animateDiv； 动画编辑； 设置间隔函数{ 变量$motion=$'.motion'； var$designer=$'.designer'； var isOverlap=重叠$motion[0]，$designer[0]； ifisOverlap{ $motion.stoptrue； $designer.stoptrue； $motion.animate{top:$motion.offset.top-20，left:$motion.offset.left-20}，100，函数{ animateDiv； }; $designer.animate{top:$designer.offset.top+20，左：$designer.offset.left+20}，100，函数{ 动画编辑； }; } }, 100; }; 函数a，b{ const rect1=a.getBoundingClientRect； const rect2=b.getBoundingClientRect； 常数isInHoriztonalBounds= rect1.xrect2.x； 常数为不确定界= rect1.yrect2.y； 常数isOverlapping=isInHoriztonalBounds和isInVerticalBounds； 返回等重叠； } //动议 函数makeNewPosition{ //获取视口尺寸删除div的尺寸 变量h=$window.height-100； var w=$window.width-100； var nh=Math.floorMath.random*h； var nw=Math.floorMath.random*w； 返回[nh，nw]； } 函数animateDiv{ var newq=makeNewPosition； var oldq=$'.motion'.offset； var速度=计算速度[oldq.top，oldq.left]，newq； $'.motion'。设置{top:newq[0]，left:newq[1]}动画，速度，函数{ animateDiv； }; }; 函数animateDivTwo{ var newq=makeNewPosition； var oldq=$'.designer'.offset； var速度=计算速度[oldq.top，oldq.left]，newq； $'.designer'。动画{top:newq[0]，左：newq[1]}，速度，函数{ 动画编辑这一点； }; }; 函数calcSpeedprev，下一步{ var x=Math.absprev[1]-next[1]； var y=Math.absprev[0]-next[0]； var最大=x>y？x:y； var speedModifier=0.1； var speed=Math.ceilgreatest/speedModifier； 返回速度；} 氢{ 字体大小：40px； 字体系列：“Roboto Mono”，monospace； 用户选择：无； } .动议{ 位置：绝对位置； 左：50px； } h3{ 字体大小：40px； 字体系列：“Roboto Mono”，monospace； 用户选择：无； } .设计师{ 位置：绝对位置； 左：1200像素； } 运动 设计师

---

谢谢你的帮助，我是盖蒂

---

更接近我想要的。。然而，我如何改变它，使它不那么紧张？例如，在它们相互弹起后，它们只是不断地向另一个方向移动。我尝试用硬编码的随机数模拟动画功能，在碰撞位置的顶部和左侧加上和减去20。请在setInterval内编辑代码块，以获得更平滑的动画和所需的输出。