Javascript 如何使两个画布元素冲突

我在画布中有两个元素，我想让两个元素相互碰撞，当它们碰撞时，其中一个应该反转其速度，我没有得到使它们碰撞的逻辑，这是我的代码

这是我的javascript

    var can_width = document.querySelector("canvas").width = 500;
    var can_height = document.querySelector("canvas").height = 500;

var c = document.getElementById("canvas");
    ctx = c.getContext("2d");

    var x = 200;
    var dx = 6;

    var y = 300;
    var dy = 5;
    var radius = 30;

    var rx = 400;
    var ry = 200;

    function animate(){
    requestAnimationFrame(animate);

    ctx.clearRect(0,0,can_width,can_height);
    ctx.beginPath();
    ctx.strokeStyle="red";
    ctx.fillStyle="#FF0000";
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fillRect(rx,ry,20,100);
    ctx.fill();
    ctx.stroke();

       if((can_height-y)-radius > x )
      {
        dx = + dx; 
      }

      if(x + radius > can_width || x - radius < 0 || can_width - ( can_width-rx )-radius < x )
      {
        dx = - dx; 
      }
      else if (y + radius > can_height || y - radius < 0 ){
        dy = - dy;
      }
    console.log(rx);
      x += dx;
      y += dy;
    }
    animate();

var can_width=document.querySelector（“canvas”）.width=500；
var can_height=document.querySelector（“canvas”）。height=500；
var c=document.getElementById（“画布”）；
ctx=c.getContext（“2d”）；
var x=200；
var-dx=6；
变量y=300；
var-dy=5；
var半径=30；
var rx=400；
var-ry=200；
函数animate（）{
请求动画帧（动画）；
ctx.clearRect（0,0，罐宽，罐高）；
ctx.beginPath（）；
ctx.strokeStyle=“红色”；
ctx.fillStyle=“#FF0000”；
弧（x，y，半径，0，2*Math.PI）；
ctx.fillRect（rx，ry，20100）；
ctx.fill（）；
ctx.stroke（）；
如果（（can_高度-y）-半径>x）
{
dx=+dx；
}
如果（x+半径>can_宽度| | x-半径<0 | | can_宽度-（can_宽度-rx）-半径can|U高度| y-半径<0）{
dy=-dy；
}
控制台日志（rx）；
x+=dx；
y+=dy；
}
制作动画（）；

尝试添加此条件：

  if( x + radius >= rx ) {
      if( y - radius < ry + 100 ) {
          if( y + radius > ry ) {
              alert( "colision" );
          }
      }
  }

如果（x+半径>=rx）{
如果（y-半径ry）{
警惕（“结肠炎”）；
}
}
}

编辑：

---

请告诉我它是否有效

我写了一个简单的算法来检查圆圈是否与划桨相撞。同时也使桨叶可移动。有关详细信息，请参阅以下演示和评论

var can_width=document.querySelector（“canvas”）.width=500；
var can_height=document.querySelector（“canvas”）。height=500；
var c=document.getElementById（“画布”）；
ctx=c.getContext（“2d”）；
var x=200，
dx=6；
变量y=300，
dy=5；
var半径=30；
var rx=400，
ry=200；
变桨宽度=20，
桨叶高度=100；
var isCollided=假；
函数animate（）{
请求动画帧（动画）；
ctx.clearRect（0，0，can\U宽度，can\U高度）；
ctx.beginPath（）；
ctx.strokeStyle=“红色”；
ctx.fillStyle=“#FF0000”；
弧（x，y，半径，0，2*Math.PI）；
ctx.fillRect（rx、ry、桨叶宽度、桨叶高度）；
ctx.fill（）；
ctx.stroke（）；
//x y范围x y
//（xLeft，yTop）atTop（xRight，yTop）
//                ---------
//               |         |
//左| |右
//inYRange | | inYRange
//                ---------
//（xLeft，yBot）atBot（xRight，yBot）
//inXRange
//桨的坐标
var xLeft=rx，
xRight=rx+桨叶宽度，
yTop=ry，
yBot=ry+桨叶高度；
//检查是否在特定范围内（见上图）
var inXRange=x>=xLeft&&x=yTop&&y它似乎已经开始工作了不？尽管你不能移动桨，但当它碰撞时它似乎停止了。我认为你的问题水平太高，没有人能够回答…………好这很完美，谢谢你，我的朋友，你是天才
  if( x + radius >= rx ) {
      if( y - radius < ry + 100 ) {
          if( y + radius > ry ) {
              alert( "colision" );
          }
      }
  }