how to move 2 object, one on the X axis and the other on the Y axis in Javascript?-CodePudding

I am new to javascript, and I need to animate 2 squares of the same size using javascript, one moves on the Y-axis and another on the X-axis. when I run the code, they both go diagonally, what should I change?

I've tried to:

create a different function of draw() for the blue rectangle, which resulted in the same problem
make a drawBlueRectangle() function which draws the blue rectangle. nothing changed.

the two rectangles' code works fine separately

        var ctx = canvasObject.getContext("2d");

        var squareX = 200;
        var squareY = 150;
        var diffY = 5;
        var diffX = 5;
        var squareSize = 10;
        var WIDTH = 400;
        var HEIGHT = 300;
        
        function drawRect() {
            ctx.fillRect(0, 0, WIDTH, HEIGHT);
        }

        function drawSquare() {
            ctx.beginPath();
            ctx.fillRect(squareX, squareY, squareSize, squareSize);
        }
        
        function draw() {
            ctx.fillStyle = "white";
            drawRect();
            ctx.fillStyle = "red";
            drawSquare();
            
            if ((squareY   squareSize) >= HEIGHT)
                diffY = -diffY;
            if (squareY <= 0)
                diffY = -diffY;

            squareY = squareY   diffY;
            
            ctx.fillStyle = "blue";
            drawSquare();
            if ((squareX   squareSize) == WIDTH)
                diffX = -diffX;
            if (squareX <= 0)
                diffX = -diffX;

            squareX = squareX   diffX;
        }

        setInterval(draw, 30);

CodePudding user response：

Just a small change, maintain separate x and y coordinate for both the rectangles so that the y-coordinate remain constant(to move on the x-axis) and the same for the other one. Here's the updated code

var ctx = canvasObject.getContext("2d");

    var squareX = 100;
    var squareY = 50;
    var squareX1 = 100;
    var squareY1 = 50;
    var diffY = 5;
    var diffX = 5;
    var squareSize = 10;
    var WIDTH = 400;
    var HEIGHT = 300;
    
    function drawRect() {
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
    }

    function drawSquare() {
        ctx.beginPath();
        ctx.fillRect(squareX, squareY, squareSize, squareSize);
    }
    function drawSquare1() {
        ctx.beginPath();
        ctx.fillRect(squareX1, squareY1, squareSize, squareSize);
    } 
    function draw() {
        ctx.fillStyle = "black";
        drawRect();
        
        ctx.fillStyle = "red";
        drawSquare();
        if ((squareY squareSize) > HEIGHT-200)
            diffY = -diffY;
        if (squareY <= 0)
            diffY = -diffY;

        squareY = squareY   diffY;
        
        ctx.fillStyle = "blue";
        drawSquare1();
        if ((squareX1   squareSize) > WIDTH-200)
            diffX = -diffX;
        if (squareX1 < 0)
            diffX = -diffX;
            
        squareX1 = squareX1   diffX;
        
    }

    setInterval(draw, 30);

CodePudding user response：

If you pass in the coordinates to draw the rectangle into the drawSquare function, then the same code can be used to draw squares in different locations.

const canvasObject = document.getElementById("cvs");
const ctx = canvasObject.getContext("2d");
const squareSize = 10;
const WIDTH = 400;
const HEIGHT = 300;

let squareX = 200;
let squareY = 150;
let diffY = 5;
let diffX = 5;

function drawSquare(x, y) {
    ctx.fillRect(x, y, squareSize, squareSize);
}

function draw() {
    // Draw background
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, WIDTH, HEIGHT);
    
    // Move squares and handle edge collisions
    squareY = squareY   diffY;
    squareX = squareX   diffX;
    if (((squareY   squareSize) >= HEIGHT) || (squareY <= 0)) { diffY = -diffY; }
    if (((squareX   squareSize) >= WIDTH) || (squareX <= 0)) { diffX = -diffX; }
    
    ctx.fillStyle = "red";
    drawSquare(WIDTH / 2, squareY);
    
    ctx.fillStyle = "blue";
    drawSquare(squareX, HEIGHT / 2);
}

setInterval(draw, 30);

<canvas id="cvs" width="400" height="300"></canvas>