Question

为了使背景看起来具有远近的感觉，我们将会使用到许多以不同速度移动的层。这被称为是平行效果（parallax effect）。 这种效果是基于这样的事实：在观察者看来更远的物体，比更近的物体移动更少距离，前提是它们在同样的时间内，以相同的速度。

背景需要一刻不停的移动着，为了产生 parallax 效果，我们需要用到在背景层中的两个精灵。当只有一个层显示的时候，我们可以让第二个层在运动到第一个层末尾的时候又回到第一个层的开始部位，就像图 3 显示的。

由图片构成的精灵总是动画，即使精灵本身并不动！一个动画只需一张图片。这里，我用到 6 个精灵（每层 2 个）来使层的滚动的重复性看起来更少。然后，我通过为 #background 层添加精灵，创建了 6 个精灵。注意，当你创建精灵的时候就应该指定精灵的大小，而不是创建动画的时候！

var background1 = new $.gameQuery.Animation({imageURL: "background1.png"});
  var PLAYGROUND_WIDTH    = 700;
  var PLAYGROUND_HEIGHT  = 250;
 
  var background2 = new $.gameQuery.Animation({imageURL: "background2.png"});
  var background3 = new $.gameQuery.Animation({imageURL: "background3.png"});
  var background4 = new $.gameQuery.Animation({imageURL: "background4.png"});
  var background5 = new $.gameQuery.Animation({imageURL: "background5.png"});
  var background6 = new $.gameQuery.Animation({imageURL: "background6.png"});
   
  $("#background").
    .addSprite("background1", {animation: background1, 
      width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
    .addSprite("background2", {animation: background2,
      width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT,
      posx: PLAYGROUND_WIDTH})
    .addSprite("background3", {animation: background3, 
     width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
    .addSprite("background4", {animation: background4, 
     width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT,
     posx: PLAYGROUND_WIDTH})
    .addSprite("background5", {animation: background5,
     width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
    .addSprite("background6", {animation: background6,
     width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT,
     posx: PLAYGROUND_WIDTH});

现在我们需要让这些精灵动起来。如果你想在动画的每个间隔中执行指定动作，那么可以使用 registerCallback() ​ 方法。通过这样，你就可以每过 n 毫秒，周期性的调用指定函数。我们通过这样就能够创造出图 3 中精灵的移动效果。为了使精灵移动，你不需要使用任何的 gameQuery 函数。jQuery 就能完全满足你的要求。最简单的方法当数操纵精灵的 CSS 属性，改变 top 属性就能使精灵垂直移动，改变 left 属性就能使精灵水平移动。

对每个背景层的精灵，我们想要使它们产生从屏幕右边到屏幕左边的移动效果。由于是水平移动，所以只需要从 PLAYGROUND_WIDTH 到-PLAYGROUND_WIDTH 改变 left 值，而不用改变 top 属性。每当你想要从时间间隔中获取指定值，并循环检测，一个十分有用的方法是使用求模表达式： % ​。

这个操作符会得到整数相除之后的剩余值。举个例子，如果 15%6 ​，那么整数相除的结果是 2（15/6=2），因为 2*6=12，而 15-12=3 中的 3 就是余数，所以 15%6=3。千万不要被混淆了。现在要是你想数字从 0 递增到 20，每次增量为 1，那么可以这么写：

while(condition){
  myValue++; //equivalent to myValue = myValue + 1; 
  if(myValue >= 20){
  myValue = 0;
  }
}

这里，你需要一个条件检测，以及为 myValue 赋值两次。使用求模表达式将会更简单：

while(condition){
  myValue = (myValue + 1) % 20;        
}

我们需要或得精灵的即时水平位置，并修改它。为了修改元素的 css 属性，我们使用到了 jQuery 中的 css 方法，第一次我们只是用一个参数来获取当前值，第二次使用两个值来设定新值。现在你应该完全能理解下面的代码。

$.playground().registerCallback(function(){
    //Offset all the pane:
    var newPos = (parseInt($("#background1").css("left")) - smallStarSpeed - PLAYGROUND_WIDTH) 
       % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
   $("#background1").css("left", newPos);
 
   newPos = (parseInt($("#background2").css("left")) - smallStarSpeed - PLAYGROUND_WIDTH)
      % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
   $("#background2").css("left", newPos);
 
   newPos = (parseInt($("#background3").css("left")) - mediumStarSpeed - PLAYGROUND_WIDTH)
      % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
   $("#background3").css("left", newPos);
 
   newPos = (parseInt($("#background4").css("left")) - mediumStarSpeed - PLAYGROUND_WIDTH)
      % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
   $("#background4").css("left", newPos);
 
   newPos = (parseInt($("#background5").css("left")) - bigStarSpeed - PLAYGROUND_WIDTH)
      % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
   $("#background5").css("left", newPos);
 
   newPos = (parseInt($("#background6").css("left")) - bigStarSpeed - PLAYGROUND_WIDTH)
      % (-2 * PLAYGROUND_WIDTH) + PLAYGROUND_WIDTH;
   $("#background6").css("left", newPos);
  }, REFRESH_RATE);

这就是我们添加了 6 个精灵后的结果，是不是很炫？