Javascript 当动画画布元素达到画布宽度时更改其方向

我正在使用js为画布元素上的矩形设置动画。当矩形到达画布的宽度时，我想改变动画的方向，但当它旋转一次时，无法计算出逻辑，但随后再次向右移动，基本上是将其固定在画布的宽度上

请参阅下面的代码以获得更清晰的理解：

function startGame() {
   game.start();
   game.createSquare('red', 100, 10, 10, 10);
}

function updateGame() {
    game.clear();
    //lines below are causing issues
    if(game.x < game.canvas.width){
        game.x++;
    } else {
        game.x--; 
    }
    game.update();
}

var game = {
   //create the canvas element
   canvas: document.createElement('canvas'),

   //set up the canvas
   start: function () {
       this.context = this.canvas.getContext('2d');
       this.canvas.height = 400;
       this.canvas.width = 400;
       document.body.insertBefore(this.canvas ,document.body.childNodes[0]);
    },

    //clear the canvas
    clear: function() {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    //create Square
    createSquare: function(color, height, width, x, y) {
        this.height = height;
        this.width = width;
        this.color = color;
        this.x = x;
        this.y = y;

        this.update = function(){
            this.context.fillStyle = this.color;
            this.context.fillRect(this.x , this.y , this.width, this.height);
        }
       }
     }
    startGame();
    setInterval(updateGame,50);

函数startName（）{
game.start（）；
游戏.createSquare（'red'，100,10,10,10）；
}
函数updateGame（）{
游戏。清除（）；
//下面的行引起了问题
if（game.x

只要做一点小改动就可以了。下面代码中的解释。 工作示例

函数startName（）{
game.start（）；
游戏.createSquare（'red'，100,10,10,10）；
}
函数updateGame（）{
游戏。清除（）；
//下面的行引起了问题
game.x+=game.delta；//设置新位置
//如果矩形接触右侧（记住矩形的宽度），
//或触摸画布左侧，还原方向
如果（game.x>game.canvas.width-game.width | | | | game.x

条件为false时，反转速度。你总是这样做

game.x+=velocity

@PierreC。我认为这比添加速度要复杂一些。速度取决于el两帧之间的延迟时间。即使elapsedTime设置为setInterval中的“50”ms…也不能“100%”确定每50 ms触发一次该方法。因此，您应该始终根据时间差确定速度，以获得准确的移动。@Loïc Faure Lacroix制作一个非常好的动画（平滑60 fps）您应该将requestAnimationFrame与performance.now（）一起使用，以获得帧之间的准确时间差（如本例中所示），但对于这个简单的问题，让我们从基础开始。@LoïcFaure Lacroix我不知道OP在哪里谈到了关于帧或延迟的问题。从我看到的情况来看，如果他将

速度设置为
-1
或
1
，他的问题将得到解决。你的观点完全正确，但我只是试图回答所问的问题d答案跟我说的一样：）@PierreC。冷静点！大家都很高兴！问题得到了回答，知识也获得了。我喜欢用
*
来颠倒数字！谢谢你们的帮助！
function startGame() {
   game.start();
   game.createSquare('red', 100, 10, 10, 10);
}

function updateGame() {
    game.clear();
    //lines below are causing issues
    game.x += game.delta; // set new position

    // if rectangle touches right side (remember about the width of rectangle),
    // or touches left side of canvas, revert direction
    if(game.x > game.canvas.width - game.width || game.x <= 0){
       game.delta *= -1;
    }

    game.update();
    }

var game = {
   //create the canvas element
   canvas: document.createElement('canvas'),

   //set up the canvas
   start: function () {
       this.context = this.canvas.getContext('2d');
       this.canvas.height = 400;
       this.canvas.width = 400;
       document.body.insertBefore(this.canvas ,document.body.childNodes[0]);
    },

    //clear the canvas
    clear: function() {
       this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    //create Square
    createSquare: function(color, height, width, x, y) {
        this.height = height;
        this.width = width;
        this.color = color;
        this.x = x;
        this.y = y;
        this.delta = 1; // this is speed and direction of movement 

        this.update = function(){
            this.context.fillStyle = this.color;
            this.context.fillRect(this.x , this.y , this.width, this.height);
        }
       }
     }
    startGame();
    setInterval(updateGame,50);