Css javascript中的弹球动画

下面是我的javascript游戏的主题-

当球碰到偏移到X，Y的球拍时，它应该停止移动。我认为现在的轴心应该知道这一点，但不知为什么我找不到任何方法。 请帮我让它更真实

这是我的绘图功能-

function draw() {
      ctx.clearRect(0,0,300,300);
      ctx.rect(mouseX-40,mouseY-20,40,20,true);
      ctx.fillStyle = 'black';
      ctx.fill();
      ctx.beginPath();
      ctx.arc(x,y,10,0,2*Math.PI,true);
      ctx.closePath();
      ctx.fill();
      x+=dx;
      y+=dy;
      bounce();
    }

我在这里提出的条件-

function bounce(){
      if(x+dx>300||x+dx<0)
        dx=-dx;
      if(y+dy>300||y+dy<0)
        dy=-dy;
    }

函数bounce（）{
如果（x+dx>300 | | | x+dx300 | | | y+dy如果你想让球在碰到球拍时停止移动，你可以这样做：

if（x+dxmouseX-40和&y+dymouseY-20）{
dy=0；
dx=0；
}

if(x+dx<mouseX&&x+dx>mouseX-40&&y+dy<mouseY&&y+dy>mouseY-20){
    dy=0;
    dx=0;
}