Javascript 单击后使球远离球

有一些问题与此类似，我都读过，但我需要的是一个非常具体的性质

基本上我有一个球，它周围有一个圆形区域，可以点击。 单击此区域时，与球的中心相比，球应以与单击方向相反的方向移动。因此，如果你点击球的右下方，它应该向上移动。 我已经通过以下方法实现了这一点

function clickBall(event){
    //finding position of click

    var rect = document.getElementById("theBall").getBoundingClientRect();
    var ballX=rect.left-294.8641870117188;
    var ballY=rect.top-60.125;

    click[0] = event.clientX-313.999593505859423; click[1] = event.clientY-79;         

    distanceX=ballX-click[0];   console.log(distanceX);
    distanceY=ballY-click[1];   console.log(distanceY);

    ballMoving=true;
    ballPosition = click;

    //document.getElementById("theBall").style.left=(ballX+distanceX)+"px";
    //document.getElementById("theBall").style.top=(ballY+distanceY)+"px";
}

moveBall由每帧运行的update调用

    function moveBall(){

    if(ballMoving){
        moveTime-=1;

        if(moveTime<0){  //control move time
            moveTime=ballMoveTime;
            ballMoving=false;
        }

        ballPosition[0]+=distanceX/150*moveTime;
        ballPosition[1]+=distanceY/150*moveTime;

        ballSpeed-=ballSpeedReducion;
        checkCollision();

        document.getElementById("theBall").style.left=ballPosition[0]+"px";
        document.getElementById("theBall").style.top=ballPosition[1]+"px";
    }

}

函数moveBall（）{
如果（移动球）{
moveTime-=1；
if（moveTimeHey，你能检查一下吗。如果你将鼠标悬停在外圈上，你想让球移动到红线的末端吗？问题是——如果我理解正确的话——我想你需要一些基本的几何图形（“一种使它移动的方式，无论点击距离球多远。”）。（示例是svg，但如果您更具体，我可以给出另一个示例）