Question

我使用js在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);

Answer 1

只需要进行一些小改动即可。以下代码中的说明。工作示例https://jsbin.com/gafetoxapu/edit?js,output

SELECT FORMAT(
  'ALTER TABLE %I.%I.%I RENAME COLUMN %I TO %I;',
  catalog_name,
  schema_name,
  table_name,
  column_name,
  'location_name'
)
FROM information_schema.columns
WHERE column_name = 'location';

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

1 个答案: