Пересечение области с гладким видом

Question

, как вы можете видеть в этом JSFiddle: http://jsfiddle.net/EychPixels/pABPv/1/, когда вы перемещаете символ с помощью клавиш со стрелками, пока область обзора не перемещается вместе с ним, кажется, что персонаж перемещается назад 1 плитка, а затем 1 плитка. Есть ли способ исправить это, как оживление области просмотра с символом? Для анимации символа я использовал .animate с jQuery, можно ли сделать то же самое с областью просмотра? Если это так, я могу увидеть пример этого с помощью моего кода?

Если вам нужно больше деталей, чтобы ответить на вопрос, просто спросите.

Answer 1

Для вашего текущего кода путь наименьшего сопротивления (то есть способ, которым нужно изменить меньше кода) должен был бы передать now функции рисования во время анимации, если видовое окно также должно анимироваться. Затем вы можете следить за предложением @ jimjimmy1995 (отменять изменение player.x и делать противоположное изменение world.x).

This fiddle предлагает грубый пример (только для клавиши «вниз»). Реквизиты:

1. Определить, будет ли окно просмотра двигаться во время анимации:

   var move = Math.round(playerY+1) - Math.floor(0.5 * vHeight) > vY; 
   

2. Передайте функцию now к draw (только если окно просмотра будет двигаться):

    step: function(now) { 
         playerY = now; 
         draw(move ? now-start : 0); 
        } 
   

3. В draw отрегулируйте позиции в окне просмотра и игрока:

   function draw(now) { 
       if (!now) 
        now = 0; 
       ... 
         theY = (y-now) * 32; 
       ... 
       context.fillRect((playerX-vX)*32, (playerY-vY-now)*32, 32, 32); 
   

4. Нарисуйте «лишнюю» плиту, чтобы компенсировать пустое пространство (не реализовано в примере);

5. Когда анимация заканчивается, нарисуйте ее снова, с now == 0 (не реализовано в примере).

Есть еще несколько сбоев, но они должны служить основой для будущих улучшений.