Javascript 如何解决碰撞响应问题？

im使用的碰撞检测是两个正方形之间的AABB碰撞检测技术 我似乎无法解决这样一个问题，即检测到侧面碰撞，方块沿边缘卡住，并沿边缘发生碰撞，直到方块沿y轴通过。我还高亮显示了问题区域------问题-------

如何解决这个问题？ 请查看链接以更好地了解我的问题

const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
平方1={
h:100，
w:100，
dx:2，
dy:4，
x:0,，
y:0
}
平方2={
h:100，
w:100，
dx:-2，
dy:-2，
x:200，
y:250
}
函数drawSquare（）{
ctx.beginPath（）；
ctx.rect（square1.x，square1.y，square1.w，square1.h）；
ctx.fillStyle='#000'；
ctx.rect（平方2.x，平方2.y，平方2.w，平方2.h）；
ctx.fillStyle='#000'；
ctx.fill（）；
ctx.closePath（）；
}
函数moveSquare（）{
平方1.x+=平方1.dx；
平方1.y+=平方1.dy；
平方2.x+=平方2.dx；
平方2.y+=平方2.dy；
//左右壁碰撞
if（平方1.xcanvas.宽度）
平方1.dx*=-1；
if（平方2.xcanvas.宽度）
平方2.dx*=-1；
//上壁胶合
if（平方1.ycanvas.高度）
平方1.dy*=-1；
if（平方2.ycanvas.高度）
平方2.dy*=-1；
//----问题-------
//方对方协商
//侧面
如果（square2.x
badStyle===bugs
总是正确的。长线意味着您看不到错误。两个sqr V sqr（
if
）语句的最后一个子句假设大小是70而不是100，如果您不关心偶尔的重叠，并且正方形总是相同的大小，那么将最后一个子句更改为
&&Math.abs（平方1.y-平方2.y）<100
x方向相同。但是在
moveSquare
中，你没有解析位置，只有部分速度，并且你假设三角洲总是相反的。我可以想到十几种边缘情况，它会失败，但你可能很幸运，永远不会遇到它们。很好luck@Blindman67感谢您的帮助，它似乎是正确的我的问题。你能进一步给出一个可能导致问题的边缘情况的例子吗。如果回答是非常感谢的
badStyle===bugs
总是正确的。长线表示你看不到错误。两个sqr V sqr（
if
）的最后一个子句语句您假设大小是70而不是100，如果您不关心偶尔的重叠，并且正方形总是相同的大小，那么将最后一个子句更改为
&&Math.abs（square1.y-square2.y）<100
x方向相同。但是在
moveSquare
中，你没有解析位置，只有部分速度，并且你假设三角洲总是相反的。我可以想到十几种边缘情况，它会失败，但你可能很幸运，永远不会遇到它们。很好luck@Blindman67感谢您的帮助，它似乎是正确的我的问题。你能再举一个可能导致问题的边缘案例的例子吗？如果你能回答，我们将不胜感激