当动画canvas元素达到canvas宽度时改变其方向

Question

我正在使用JS将一个矩形动画化在一个canvas元素上。当矩形到达canvas的宽度时，我想改变动画方向，但无法确定逻辑，因为它只转一次，然后又向右移动，实际上粘在了canvas的宽度上。

请查看下面的代码以更清晰地理解：

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

- user6002037

---

你的矩形应该有一个名为velocity的属性。当条件game.x < game.canvas.width为false时，你需要反转速度。而且每次都要执行game.x += velocity操作。 - Pierre C.

@Loïc Faure-Lacroix，要制作一个非常好的动画（平滑的60FPS），您应该使用requestAnimationFrame和performance.now()来获取帧之间准确的时间差（就像在这个示例中http://jsbin.com/jitiquzive/edit?html,output），但对于这个简单的问题，让我们从基础开始。 - mx0

@LoïcFaure-Lacroix 我没有看到原帖中提到关于帧或延迟的问题。从我所看到的，如果他将“速度”设置为“-1”或“1”，他的问题就会得到解决。你的观点完全正确，但我只是试图回答所问的问题。被采纳的答案遵循了我的说法 :) - Pierre C.

@PierreC。是的，我明白你的意思。这样控制起来更容易。从技术上讲，速度可以稍后计算为-1、1以外的其他值。 - Loïc Faure-Lacroix

争论并不意味着我们生气^^ 当然。在我看来，更好的做法是专注于所提出的问题。原帖作者可能（肯定会）在不久的将来面临这些问题，并最终寻求帮助！无论如何，祝你有美好的一天 :) - Pierre C.

Answer 1

只需要进行小的更改即可使其正常工作。请参见下面的代码解释。 工作示例 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);

- mx0

---

我喜欢使用 * 来反转数字！感谢您的帮助！ - user6002037