Canvas 画布反弹球随机通过左边框

我试图用随机移动的球制作画布背景。球到达边缘时会反弹。这应该很容易，但显然我错过了一些东西

现在，前几秒钟看起来不错，但过了一会儿，这些球就不会费心穿过左边界，也不会反弹回来。我已经想了好几天了，但是失败了。感谢您的帮助

update(delta, canvas) {

    let deltaX = delta * Math.cos(this.movingDirection * Math.PI / 180);
    let deltaY = delta * Math.sin(this.movingDirection * Math.PI / 180);

    this.axisX += deltaX;
    this.axisY += deltaY;

    //set border
    if (this.axisX > (canvas.width)) {
        if (this.movingDirection > 270 && this.movingDirection < 360) {
            this.movingDirection = 180 + this.movingDirection;
        } else if (this.movingDirection < 90 && this.movingDirection > 0) {
                this.movingDirection = 180 - this.movingDirection;
        }
    }
    if (this.axisX < 0) {
        if (this.movingDirection > 180 && this.movingDirection < 270) {
            this.movingDirection = 540 - this.movingDirection;
        } else if (this.movingDirection <= 180 && this.movingDirection > 90) {
            this.movingDirection = 180 - this.movingDirection;
        }
    }

    if (this.axisY > (canvas.height) || this.axisY < 0) {
        if (this.movingDirection > 180 ) {
            this.movingDirection = 360 - this.movingDirection;
        } else if (this.movingDirection <= 180) {
            this.movingDirection = 360 - this.movingDirection;
        }
    }
    this.draw();
}

更新（增量、画布）{
设deltaX=delta*Math.cos（this.movingDirection*Math.PI/180）；
设deltaY=delta*Math.sin（this.movingDirection*Math.PI/180）；
this.axix+=deltaX；
this.axisY+=deltaY；
//定界
if（this.axix>（canvas.width））{
如果（this.movingDirection>270&&this.movingDirection<360）{
this.movingDirection=180+this.movingDirection；
}否则如果（this.movingDirection<90&&this.movingDirection>0）{
this.movingDirection=180-this.movingDirection；
}
}
if（this.axisX<0）{
如果（this.movingDirection>180&&this.movingDirection<270）{
this.movingDirection=540-this.movingDirection；
}否则，如果（此。移动方向90）{
this.movingDirection=180-this.movingDirection；
}
}
if（this.axisY>（canvas.height）| | this.axisY<0）{
如果（此.movingDirection>180）{
this.movingDirection=360-this.movingDirection；
}否则，如果（this.movingDirection我不会尝试找出代码的错误，因为您的方法非常复杂

相反，您可以使用delta x和y来进行墙反弹，并由此计算新的方向

以下
update
功能将解决您的问题

update(delta, canvas) {
    var dx, dy,x,y;
    dx = delta * Math.cos(this.movingDirection * Math.PI / 180);
    dy = delta * Math.sin(this.movingDirection * Math.PI / 180);
    x = this.axisX += dx;
    y = this.axisY += dy;
    const r = this.radius;


    if(dx > 0) { // moving to the right
        if(x + r >= canvas.width) {
            x = canvas.width - r;
            dx = -dx;
        }    
    }else if(dx < 0) { // moving to the left
        if(x - r <= 0) {
            x = r;
            dx = -dx;
        }       
    }
    if(dy > 0) { // moving down
        if(y + r >= canvas.height) {
            y = canvas.height - r;
            dy = -dy;
        }        
    }else if(dy < 0) { // moving up
        if(y - r <= 0) {
            y = r;
            dy = -dy;
        }           
    }

    this.axisX = x;
    this.axisY = y;
    this.movingDirection = Math.atan2(dy, dx) * (180 / Math.PI);

    this.draw();
}

更新（增量、画布）{
变量dx，dy，x，y；
dx=delta*Math.cos（this.movingDirection*Math.PI/180）；
dy=delta*Math.sin（this.movingDirection*Math.PI/180）；
x=this.axix+=dx；
y=这个。axisY+=dy；
常数r=这个半径；
如果（dx>0）{//向右移动
如果（x+r>=画布宽度）{
x=画布宽度-r；
dx=-dx；
}    
}如果（dx<0）{//向左移动，则为else
如果（x-r0）{//向下移动
如果（y+r>=画布高度）{
y=画布高度-r；
dy=-dy；
}        
}如果（dy<0）{//向上移动，则为else
如果（y-r）谢谢@blindman67！这为我看待这个问题开辟了一条新的途径。今晚我会试试。