Непрерывное движение элементов с помощью jQuery

Question

Я создаю игру с помощью jQuery и хочу, чтобы мой персонаж двигался автоматически, пока не достигнет границы. Вот мой код движения в правильном направлении:

if (e.keyCode === 39 && (p1_left < 784)) {
    $('#p1').rotate(0);
    setInterval ( function() {
        $('#p1').animate( { left:  "+=16px", }, 50); }, 50);
}

Это неопределенно двигает моего персонажа вправо, и я сам не понял, как создать пробку.

РЕДАКТИРОВАТЬ: обновлен фрагмент кода, добавлен jsfiddle http://jsfiddle.net/BjCeq/

Answer 1

Вы никогда не увеличите pl_left, поэтому цикл будет работать вечно:

while (p1_left <= 784) {
    pl_left+=16;
    $('#p1').css('left', p1_left); 
}

Тем не менее, это не будет оживлять движение вашего персонажа, оно будет просто переходить к конечной точке. По этой причине бессмысленно зацикливаться. Вероятно, вы захотите либо использовать setTimeout для перемещения каждую секунду на одну позицию, либо что-то в этом роде. Или вы можете использовать animate с функцией обратного вызова:

function moveLeft(theID){
    $(theIE).animate({...},1000, function(){
       if(/* keep moving */){
           move_left(theID);
       }
    }
}

Answer 2

Вам нужен код, который постоянно вызывается. Ваш код, как вы его написали, вызывается один раз, и он выполняет все свои манипуляции с DOM одновременно. То, что вам нужно, это setInterval или setTimeout, чтобы ваш код вызывал себя на определенное количество миллисекунд в будущем, каждый раз увеличивая свойство css. Самый простой способ сделать это - просто использовать jQuery.animate, который запускает эти методы внутри.

var $p1 = $('#p1');
if (e.keyCode === 39 && (p1_left < 784)) {
  $p1.rotate(0);
  $p1.animate({ 'left' : 784 });
}

Ознакомьтесь с документами jQuery animate для получения дополнительной информации, в том числе о том, как устанавливать параметры и запускать функцию обратного вызова с каждым кадром анимации: http://api.jquery.com/animate/.