Question

在教程的步骤 1 当中，我们将会学习到游戏屏幕展示到底是由什么组成的。如果你了解 Gimp 或者 Photoshop 的话，你可能会联想到游戏屏幕是由一系列的层叠加而成，就像图 1.

为了在 gameQuery 中生成 屏幕 ，你只需要操作两类对象：精灵和组（sprites、groups），为了渲染精灵 gameQuery 使用了绝对定位元素。每一个精灵都有它自己的层。你添加精灵的顺序就是默认顺序，类似 堆栈 结构。

在游戏的某些点上，如果想在一个已经存在的精灵之后再增加新的精灵的话，该怎么做呢？最简单的方法是使用组，就像图 1 展示的那样。如果你在一个已经定义过的组（例如 groupA）中增加新的精灵的话，这个精灵就会位于 groupA 前元素之后（精灵 3 精灵 4）。

使用组还有其他好处：如果你移动组，那么其中所有的元素也会移动，如果你删除组，那么其中所有的元素也会被删除。它们也可以作为某种遮罩（mask）来使用：如果你在组选项中指定 overflow 为 hidden 的话，超过组边界的精灵就是不可见的。你可以在组中嵌套组。在某些情况下，正确使用组，通过减少手动指定移动、检测碰撞的元素数量，会有更好的性能。

你也许想知道图 1 中那些名字前面的 # 代表什么意思？ 它们存在是因为组合精灵都是基本的 html 元素。Html 元素组成了网页，而为了更好的标识元素，我们使用两种标识符：给你的元素起个唯一的名字，这就是 id ；把它归属为一类而起的名字，称为 class 。元素可以同时具有 class 名和 id 名。

这种名称标识常常被用来书写层叠样式表 CSS。在 CSS 中，你描述网页中元素的展现方式。在 CSS 中， class 类名前加 . 号，而 id 名前加 # 号。所以在图 1 中 #groupA 的意思是 id 名是 groupA 的 html 元素。这种标识方式称为 CSS Selector （CSS 选择器）。我希望你能学习更多关于 HTML 和 CSS 的知识，但是要做好被混淆的心理准备哦：）

现在让你看看接下来我们要面对的东西。图 1 的情形结果，如果用代码来描述的话，会是下面这个样子。

$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH})
   .addSprite("sprite1",{animation: animation1})
   .addGroup("groupA")
  .addSprite("sprite2",{animation: animation2}).end()
   .addSprite("sprite3",{animation: animation3})
   .addGroup("groupB",{overflow: hidden})
  .addSprite("sprite4",{animation: animation4});

2.1.1 对 jQuery 的超短介绍

gameQuery 是基于 jQuery 的，所以我会简单的介绍一下 jQuery 的工作方式。虽然介绍异常简单，但你可以从这里开始理解 jQuery。更多关于 jQuery 的信息，请看 jQuery 文档。

jQuery 可以分为两部分内容： 选择 、 修改 。 选择 是通过 CSS 选择器（CSS selector）在页面中寻找对应的元素。 修改 是指改变、增加、删除指定元素。你写代码的时候，其实就是这两种命令的联合。例如，如果你想要删除页面中所有类（class）名叫 foo 的元素，你可以这么写：

$(".foo").remove();

在这里， $('.foo') 的意思是选择：选择所有类名叫 foo 的元素； .remove() 的意思是修改：删除它们。当情况需要的时候，我会再深入讲解的。

2.1.2 开始快乐的编程吧！

首先为你的游戏画个草图，描述精灵和组的那种关系。在这篇教程中，草图将会是图 2 这个样子。就像你所看到的那样，这个游戏是如此的简单以至于我们都不需要真正复杂的结构来描述。

让我们开始写游戏屏幕的代码吧：首先我们需要告诉 gameQuery 游戏该画在哪里。这可以通过 .playground() ​ 方法。gameQuery 的每个方法都是基于 jQuery 的。这也是为什么下面代码是以 $() 开头的原因。

playground() 方法需要两个参数，第一个是容纳游戏的 html 元素的 CSS 选择器(CSS selector)。第二个是一系列配置游戏屏幕(gamescreen) 的值，这里我们制定了 playgound 的 height 和 width。一个非常好的做法是，用变量来代替你的常量，因为以这种方式，你可以在将来很容易的改变它们的值。这也使得代码更具可读性。

var PLAYGROUND_HEIGHT = 250;
  var PLAYGROUND_WIDTH = 700;
  $("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH});

现在我们需要创建组来包含精灵们（参看图 2）。背景（background）离远我们观察者最远，所以首先创建它。我们可以这么写：

$.playground().addGroup("background", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});

这里我们调用了 playground() 方法，却没有提供任何参数，这将返回之前定义的 html 元素。然后我们通过调用 addGroup() 以及它的两个参数来添加新组。第一参数是我们想给组起的名字（这也将成为展示组的 html 元素的 id）。第二个参数是一系列配置组的值（就像之前 playground 方法），这里我们定义了组的大小，同 playground 一样。

如果上面两段代码最后一行是一个接着一个的话，使用链式语句将会更加方便。

$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH})
   .addGroup("background", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});

这看起来更像图 1 的代码了。通过传输 return 返回值、分行对齐的方式使得代码更易阅读，它们并不改变代码含义。

我们接着添加其他组：

$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH})
   .addGroup("background", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
   .addGroup("actors", {width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
   .addGroup("playerMissileLayer",{width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT}).end()
   .addGroup("enemiesMissileLayer",{width: PLAYGROUND_WIDTH, height: PLAYGROUND_HEIGHT});

注意 .end() ​方法，这种方式返回上一个被选择的元素。一些 修改操作 会改变当前 被选择元素 ：就像 addGroup() ​ 把自己这个组当做 被选择元素 返回，所以如果你在这样的命令之后再添加的话，之前创建的组就会改变。你也可以使用这种方式方便的给组添加精灵。

而如果你想在之前创建的组中嵌套组的话，你可以再次调用 addGroup() 方法，当然，我们现在的代码中并不需要这样。我们需要的是为 playground 再次添加组，所以我们调用 end() ​ 方法来重新获取 playground，继续链接代码。现在我们需要在那些组中增加精灵了！