Question

我做了一个程序。它是一个自身移动的立方体。您可以在这里查看它：https://automatic-move.netlify.com/。当多维数据集达到某个画布极限（向上或向下）时，它无法移动，因此障碍物将其移动。

我想要某种方式，当它在某个画布极限上时，它到达画布的中间，但移动到那里。

我唯一得到的是，当它发生时，它“传送”到画布的中间，但这不是我想要的。我希望它像在画布中间“走路”一样。

我也将它放在GitHub上：https://github.com/VacaVacana/automatic-move

我已经尝试过了，为此，它走到了中间。但这不起作用！

现在如何编码（带有“电话”）：

// 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
}

代码用于：

// 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
}

当我这样做时，当它达到某个画布的极限时，它会停留在停止位置，并且不会“走到”中间。

Answer 1

1st）我们需要创建一个布尔变量来控制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）我们必须更改ai.js才能根据该变量更改其行为：

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）我们必须将ai.js添加到html文件的开头（必须在main.js之前加载）；

我们完成了。

每次移动对象时，进行动画处理时，我们都必须更新画布（这是您的问题，除非在非常低的层次上工作，否则很少使用for循环进行动画处理，因为Windows和图形库具有他们自己的循环来更新画布）。

如何使用for来使多维数据集自身移动？

1 个答案: