phantom phantom - 3 months ago 11
Javascript Question

change direction of animation canvas element when it reaches the width of the canvas

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

mx0 mx0
Answer

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