帆布弹跳球随机通过左边界

Question

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

现在，前几秒看起来还不错，但过了一会儿，这些球就懒得越过左边界，也永远不会反弹回来。这几天我一直在想办法，但失败了。任何帮助表示赞赏。

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();
}

this.movi​​ngDirection 是一个在 0 到 360 之间随机生成的数字。

这是一个完整的例子https://jsfiddle.net/calmdown/qr89b034/1/

谢谢！

Answer 1

我不会尝试找出代码有什么问题，因为您的方法已经存在（太复杂了）

相反，您可以使用 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();
}