Javascript 当这个正方形达到某个值后，我如何反转它的方向？

我正在尝试创建一个空闲动画，其中红色矩形在循环中稍微来回移动。出于某种原因，一旦它达到指定的阈值，而不是继续朝相反的方向移动，它就会停止

我做错了什么

<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>

您的浏览器不支持画布元素。
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
//宇宙飞船结构
var shipWidth=250；
var shipHeight=100；
//画布参数
var cWidth=canvas.width；
var cHeight=canvas.height；
//定位变量
变量centerWidthPosition=（cWidth/2）-（shipWidth/2）；
变量中心高度位置=（高度/2）-（船高/2）；
var requestAnimationFrame=window.requestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.msRequestAnimationFrame；
函数drawShip（）{
ctx.clearRect（0，0，cWidth，cHeight）；
ctx.fillStyle=“#FF0000”；
ctx.fillRect（中心宽度位置、中心高度位置、船宽、船高）；
中心宽度位置--；
如果（中心宽度位置<400）{
++中心宽度位置；
}
请求动画帧（drawShip）；
}
提款船（）；

您的函数陷入循环；一旦centerWidthPosition达到399，您的条件将使其增加到400，然后再减少到399。

@amberlamps解释了为什么要这样做。在这里，我为您提供了一个解决方案，以实现我相信您正在尝试的目标

使用可更改幅值的速度变量。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
}

//使用速度变量
var xspeed=1；
//总是以速度增加
中心宽度位置+=X速度；
//在本例中，屏幕边缘为0和400
如果（中心宽度位置>400 | |中心宽度位置<0）{
xspeed*=-1；//改变速度方向
}

---

我在if中添加了另一个条件，它会导致对象来回反弹。如果您不想在| |之后删除所选内容。

Ahhh哇，我真不敢相信我没有看到。非常感谢你！