Как установить что-то в определенное время?

Question

в этом JSFiddle, так как вы можете видеть, что красный квадрат перемещается от одной плитки к следующей очень быстро, как я могу установить ее, так что для перехода от одной плитки к следующей требуется около 0,2 секунды?

Answer 1

Чтобы ответить на вопрос в вашем заголовке, способ выполнить некоторый JavaScript по истечении заданного периода времени - setTimeout() (или setInterval()).

Чтобы оживить движение, на компьютере это то же самое, что и для рисованной анимации Уолта Диснея. Нарисуйте кучу изображений с небольшим количеством изменений в каждом из них и покажите их по одному, ожидая небольшого количества времени перед отображением каждого кадра.

Итак, для этого вам необходимо рассчитать каждый кадр. Найдите разницу между позицией назначения и текущей позицией и разделите эти различия на этапы. Затем нарисуйте изображение, перемещая позицию на один шаг, пока текущая позиция не будет соответствовать месту назначения.

jsfiddle.net/kmHZt/79

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