Холст прыгающий мяч случайно проходит левую границу

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.movingDirection - это случайное число от 0 до 360.

Вот полный пример https://jsfiddle.net/calmdown/qr89b034/1/

Спасибо!

Answer 1

Я не собираюсь пытаться выяснить, что не так с кодом, так как ваш метод далеко (сложно)

Скорее, вы можете использовать дельта 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();
}