Question

对于背景，我们并没有使用任何动画，仅仅是张静态图片。但对于 玩家的飞船 ，我们得用上所谓真正的动画了。做法是给用户提供飞船的可视化反馈，就像他们想的那样：向上、向下、向左、向右。为了实现这样的效果，我们需要用来展现飞船的静态图片和展现喷射器效果的动画。在移动飞船的时候，为了使精灵切换之间看起来具有无关性，我们把它们统统放到同一组里。

在 gameQuery，动画的所有帧都包含在同一张图片中，有点类似电影的感觉。这些帧既可以一帧挨着一怔（水平方式）也可以一帧在另一帧之上（垂直方式）。如果精灵的每帧大小都相同，排列方式可以任选，但如果精灵以某种排列方式比动画大，那么就只好选另一中排列方式了。当你在 gameQuery 中创建多帧动画，你需要提供帧的数量，帧之间的距离（delta），帧之间的时间间隔（rate），以及动画的类型（例如垂直动画还是水平动画）。

// Player spaceship animations:
playerAnimation["idle"] =    new $.gameQuery.Animation({imageURL: "player_spaceship.png"});
playerAnimation["explode"] =  new $.gameQuery.Animation({imageURL: "explode.png"});
playerAnimation["up"] =    new $.gameQuery.Animation({imageURL: "boosterup.png", 
  numberOfFrame: 6, delta: 14, rate: 60, 
  type: $.gameQuery.ANIMATION_HORIZONTAL});
playerAnimation["down"] =    new $.gameQuery.Animation({imageURL: "boosterdown.png", 
  numberOfFrame: 6, delta: 14, rate: 60, 
  type: $.gameQuery.ANIMATION_HORIZONTAL});
playerAnimation["boost"] =    new $.gameQuery.Animation({imageURL: "booster1.png" , 
  numberOfFrame: 6, delta: 14, rate: 60, 
  type: $.gameQuery.ANIMATION_VERTICAL});
playerAnimation["booster"] =  new $.gameQuery.Animation({imageURL: "booster2.png"});

// Initialize the background
$.playground().addGroup("actors", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT})
  .addGroup("player", {posx: PLAYGROUND_WIDTH/2, posy: PLAYGROUND_HEIGHT/2,
    width: 100, height: 26})
  .addSprite("playerBoostUp", {posx:37, posy: 15, 
    width: 14, height: 18})
  .addSprite("playerBody",{animation: playerAnimation["idle"], 
    posx: 0, posy: 0, width: 100, height: 26})
  .addSprite("playerBooster", {animation:playerAnimation["boost"], 
    posx:-32, posy: 5, width: 36, height: 14})
  .addSprite("playerBoostDown", {posx:37, posy: -7,
    width: 14, height: 18});

表现飞船后推进器的精灵需要有 3 中状态：常态（中等火力）、关闭（飞船向后退）以及全开（飞船向前进）。还需要另外两个精灵，分别是飞船上推进器、下推进器，它们各自具有开、关两个动画。随着用户键盘输入，这些动画被触发。jQuery 通过事件监听器（event listener），能够很方便的实现对用户键盘操作的回应。当特定的事件发生，你可以设定执行对应的函数，例如鼠标点击、按下按键。你可能注意到，在创建某些精灵的时候，我们并没有为其设定动画，那是因为它们现在仅仅是占个位置，当需要动画的时候，我们仍然可以设置。

现在让我们看看 键盘 是如何与 动画 绑定在一起的。这里我们发现了在浏览器中运行 JavaScript 游戏的小小不便之处：上/下/左/右键基本都是被用来滚动页面的。所以如果你的游戏超过了浏览器窗口大小，那么按下这些键还会使页面发生滚动。虽然我们可以通过编程手段屏蔽页面滚动，但我仍然认为干涉浏览器动作并不是个好主意，所以我使用了别的键来控制游戏。当然最好的方式应该是让用户自己定义按键，这并非难事，不过我还是想让这篇教程尽量简单。

//this is where the keybinding occurs
$(document).keydown(function(e){
  switch(e.keyCode){
case 65: //this is left! (a)
  $("#playerBooster").setAnimation();
  break;
case 87: //this is up! (w)
  $("#playerBoostUp").setAnimation(playerAnimation["up"]);
  break;
case 68: //this is right (d)
  $("#playerBooster").setAnimation(playerAnimation["booster"]);
  break;
  case 83: //this is down! (s)
  $("#playerBoostDown").setAnimation(playerAnimation["down"]);
  break;
  }
});
//this is where the keybinding occurs
$(document).keyup(function(e){
  switch(e.keyCode){
case 65: //this is left! (a)
  $("#playerBooster").setAnimation(playerAnimation["boost"]);
  break;
case 87: //this is up! (w)
  $("#playerBoostUp").setAnimation();
  break;
case 68: //this is right (d)
  $("#playerBooster").setAnimation(playerAnimation["boost"]);
  break;
case 83: //this is down! (s)
  $("#playerBoostDown").setAnimation();
  break;
  }
});

当键盘按下或者松开，相应的动画就发生。有时候我们需要移除某个动画，而不是用另一个动画来替代，为了实现这种效果，我们使用不带参数的 setAnimation 方法。为了找出你想用来作为游戏按键的按键代码（keyCode），你可以使用这个页面。飞船的爆炸效果将会在步骤 3 中讲解。

下面是结果，不过别忘了这会儿我们只关注游戏精灵动画，所以飞船并不会动。