当动画画布元素达到画布宽度时，更改它的方向

Question

I am animating a rectangle across a canvas element using js. I want to change the direction of the the animation when the rectangle reaches the width of the canvas but cannot work out the logic as it turns once, but then goes to the right again, essentially sticking it to the width of the canvas.

Please see the code below to get a clearer understanding:

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

Answer 1

Only a small change is needed to make it work. Explanation in code below. Working example https://jsbin.com/gafetoxapu/edit?js,output

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