Javascript 如何设置在一定时间内发生的事情？

在这里，您可以看到红方块从一个磁贴移动到下一个磁贴的速度非常快，我如何设置它以使从一个磁贴移动到下一个磁贴大约需要0.2秒？

要回答标题中的问题，在给定时间段后执行某些JavaScript的方法是使用

setTimeout（）

（或

setInterval（）

）

要制作运动动画，在计算机上的效果和沃尔特·迪斯尼的手绘动画一样。画一组图片，每一张都有少量的变化，然后一次显示一张，在显示每一帧之前等待一小段时间

所以，要做到这一点，你需要计算每一帧。找出目标位置和当前位置之间的差异，并将这些差异切分为步骤。然后，绘制移动位置一步的图像，直到当前位置与目标匹配

var-lastPos；
函数绘图（）{
var endPos={
x：（播放器x-vX）*32，
y:（嬉戏表演-vY）*32
};
var pos=$.extend（{}，endPos，lastPos）；
var步骤={
x:（结束位置x-位置x）/10，
y:（结束位置y-位置y）/10
};
drawStep（）；
函数drawStep（）{
clearRect（0，0，canvas.width，canvas.height）；
对于（y=0；y）如果你需要更多的解释来回答这个问题…只要问一下。我没有看到红色，它们到底在哪里？在JSFIDLE中有太多的代码，没有人会读到。请构造一个更简单的代码示例。@Jarrod我如何在点之间设置动画？搜索“画布动画”显示一系列结果。基本上，您需要某种计时器，它将导致动画中间步骤的重画，并且在该计时器中，您将在两点之间的适当位置绘制移动框。
var lastPos;
function draw() {
    var endPos = {
        x: (playerX - vX) * 32,
        y: (playerY - vY) * 32
    };
    var pos = $.extend({}, endPos, lastPos);
    var step = {
        x: (endPos.x - pos.x) / 10,
        y: (endPos.y - pos.y) / 10
    };
    drawStep();

    function drawStep() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (y = 0; y <= vHeight; y++) {
            for (x = 0; x <= vWidth; x++) {
                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[y + vY][x + vX]], theX, theY, 32, 32);
            }
        }
        context.fillStyle = 'red';
        pos.x += step.x;
        pos.y += step.y;
        context.fillRect(pos.x, pos.y, 32, 32);
        if (Math.round(pos.x - endPos.x) + Math.round(pos.y - endPos.y) == 0) {
            lastPos = pos;
            return;
        }
        setTimeout(drawStep, 20);
    }
}