如何使用for使其自身移动立方体？

Question

I made a program. It's a cube that moves by itself. You can see it here: https://automatic-move.netlify.com/ . When the cube goes to some canvas limit (up or down) it can't move, so, obstacles take it.

I want some way to when it's on some canvas limit, it goes to canvas's middle, but moving to there.

The only thing I got is, when it happens, it 'teleports' to canvas's middle, but it's not what I want. I want it goes like 'walking' to canvas middle.

I put it on GitHub too: https://github.com/VacaVacana/automatic-move

I already tried to make a for, and on this for, it walks to middle. But it doesn't work!

How's code now (with 'teleport'):

// If player is on same y that obs 👇

if (player.y <= obs.y + obs.height && player.y + player.height >= obs.y) {
    // If the player is above the obs's middle 👇

    if (player.y + (player.height / 2) <= obs.y + (obs.height / 2) && player.y > 0)
        player.y -= player.speed; // It'll move to up

    // If the player is bellow the obs's middle 👇

    if (player.y + (player.height / 2) >= obs.y + (obs.height / 2) && player.y + player.height < 400)
        player.y += player.speed; // It'll move to down

    if (player.y <= 0) // If player is on canvas up limit
        player.y = 150; // It'll be on canvas's middle

    if (player.y + player.height >= 400) // If player is on canvas down limit
        player.y = 150; // It'll be on canvas's middle

    // Basically, it works to move player by itself. And, when it is on some canvas limit, it'll return to canvas's middle
}

Code with for:

// If player is on same y that obs 👇

if (player.y <= obs.y + obs.height && player.y + player.height >= obs.y) {
    // If the player is above the obs's middle 👇

    if (player.y + (player.height / 2) <= obs.y + (obs.height / 2) && player.y > 0)
        player.y -= player.speed; // It'll move to up

    // If the player is bellow the obs's middle 👇

    if (player.y + (player.height / 2) >= obs.y + (obs.height / 2) && player.y + player.height < 400)
        player.y += player.speed; // It'll move to down

    if (player.y <= 0) // If player is on canvas up limit
        for (i = 0; i < 100; i++) {
            player.y += player.speed; // It'll be on canvas's middle
        }

    if (player.y + player.height >= 400) // If player is on canvas down limit
        for (i = 0; i < 100; i++) {
            player.y -= player.speed; // It'll be on canvas's middle
        }

    // Basically, it works to move player by itself. And, when it is on some canvas limit, it'll return to canvas's middle
}

When I do the for, when it goes to some canvas's limit, it stay stop and it doesn't 'walk' to middle.

Answer 1

1st) We need to create a boolean variable to control movement at main.js:

    const canvas = document.getElementById("screen"); 
    const ctx = canvas.getContext("2d"); 
    var move_middle = false;

    var player = { 
        x: 100,
        y: 150,
        width: 50,
        height: 50,
        color: "#000", 
        speed: 0.5,

        draw: function () {
            ctx.fillStyle = this.color; 
            ctx.fillRect(this.x, this.y, this.width, this.height); 
        }
    }

    var obs = { 
        x: 800,
        y: Math.floor(Math.random() * this.height), 
        width: 30 + Math.floor(Math.random() * 151), 
        height: 30 + Math.floor(Math.random() * 71), 
        color: "#f00", 
        speed: 4,

        update: function () {
            if (this.x >= -this.width) 
                this.x -= this.speed; 

            else { 
                this.x = 800; 
                this.y = Math.floor(Math.random() * 351); 
                this.width = 30 + Math.floor(Math.random() * 201); 
                this.height = 30 + Math.floor(Math.random() * 71); 
            }
        },

        draw: function () {
            ctx.fillStyle = this.color; 
            ctx.fillRect(this.x, this.y, this.width, this.height); 
        }
    }


    function init () { 
        console.log("Hey! Clone this program on GitHub: http://github.com/VacaVacana/automatic-move");
        console.log("Follow me too: http://github.com/VacaVacana");

        loop();
    }

    function loop () { 
        setTimeout(loop); 
        update();
        draw();
    }

    function update () { 
        if (!move_middle)
            obs.update();
        move_middle = playerAI(move_middle); 
    }

    function draw () { 
        ctx.clearRect(0, 0, 800, 400); 
        player.draw();
        obs.draw();
    }

    init(); 

2nd) We must change ai.js to change its behaviour in accordance with that variable:

function playerAI (move_middle) {
    if (!move_middle) 
    {
        if ((player.y <= (obs.y + obs.height)) && ((player.y + player.height) >= obs.y)) 
        {
            if (player.y + (player.height / 2) <= obs.y + (obs.height / 2) && player.y > 0)
                player.y -= player.speed; // It'll move to up
            if (player.y + (player.height / 2) >= obs.y + (obs.height / 2) && player.y + player.height < 400)
                player.y += player.speed; // It'll move to down
        }
    }
    else
    {
        player.y += (2*((150 - player.y)>0)-1) * player.speed;
        if (Math.abs(150-player.y) < player.speed)
        {
            player.y = 150;
            move_middle = false;
        }
    }
    if (((player.y - player.height) <= 0) || ((player.y + player.height) >= 400)) 
        move_middle = true;
    return move_middle;
}

3rd) We must add ai.js to the head of the html file (it must load before main.js);

And we are done.

Everytime we move an object, when doing an animation, we must update the canvas (that was your problem, and rarely we will use a for-loop for animation, unless working at very low level, because windows and graphics libraries have their own loops for updating the canvas).