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动画文档以获取更多信息，包括如何设置选项并对动画的每一帧运行回调函数：http://api.jquery.com/animate/。

使用jQuery进行连续元素移动

2 个答案: