Как я могу изменить направление этого квадрата после достижения определенного значения?

Question

Я пытаюсь создать неработающую анимацию, в которой красный прямоугольник слегка перемещается взад и вперед в al oop. По какой-то причине, как только он достигает указанного порога, вместо того, чтобы двигаться в противоположном направлении, он просто останавливается.

Что я сделал не так?

<canvas id="myCanvas" width="1500" height="500" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // Spaceship structure 
        var shipWidth = 250;
        var shipHeight = 100;

        // Canvas parameters
        var cWidth = canvas.width;
        var cHeight = canvas.height;

        // Positioning variables 
        var centerWidthPosition = (cWidth / 2) - (shipWidth / 2);
        var centerHeightPosition = (cHeight / 2) - (shipHeight / 2);

        var requestAnimationFrame = window.requestAnimationFrame || 
                                    window.mozRequestAnimationFrame || 
                                    window.webkitRequestAnimationFrame || 
                                    window.msRequestAnimationFrame;
        function drawShip(){
            ctx.clearRect(0, 0, cWidth, cHeight);
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(centerWidthPosition,centerHeightPosition,shipWidth,shipHeight);

                centerWidthPosition--;
                if (centerWidthPosition < 400){
                    ++centerWidthPosition;
                }

            requestAnimationFrame(drawShip);
        }
        drawShip();

    </script>

Answer 1

@ TheAmberlamps объяснили, почему так делают. Здесь я предлагаю вам решение для достижения того, что, по вашему мнению, вы пытаетесь сделать.

Используйте переменную скорости, которая меняет величину. Положение X всегда увеличивается на величину скорости. Скорость меняет направление на краях экрана.

// use a velocity variable
var xspeed = 1;

// always increase by velocity
centerWidthPosition += xspeed; 

// screen edges are 0 and 400 in this example
if (centerWidthPosition > 400 || centerWidthPosition < 0){ 
    xspeed *= -1; // change velocity direction
}

Я добавил еще одно условие в ваше, если это заставляет объект подпрыгивать взад-вперед. Снять выделение после || если ты не хочешь этого делать.

Answer 2

Ваша функция зациклена; как только значение centerWidthPosition достигает 399, ваше условное значение увеличивается до 400, а затем уменьшается до 399.