Question

1.1 开篇语

自从这篇教程写了之后，API 就发生过变化。但教程还没有更新过，所以请先看看变更向导吧

gameQuery 入门教程——first-tutorial

在这篇教程中，我会尽力指导你如何从头到尾做一个 JavaScript 的游戏。我会一一个非常基础的横轴滚动射击游戏作为例子。为了将精力放在游戏开发的基本流程任务上，我会使这个游戏在拥有完整游戏开发流程的基础上，尽量精简。所以导致的结果是，你会发现下面这个游戏其实并不怎么好玩，但是我们的目标是学习怎么使用 Query 和 gameQuery 来制作一个 javascript 游戏，而不是别的！

目前的版本（0.2.6， 翻译时最新为 0.6.1）gameQuery 非常适合用来做简单的基于精灵的 2D 游戏，也就是我们现在将要做的游戏的类型。你可以用各种方式制作精灵，这完全取决于你。你可以，手画精灵，扫描，然后用你最喜欢的图片编辑器编辑它们。当然，你也可以直接在电脑上画，就像我为了第一个演示程序而做的一样。

1.1.1 条件

我会尽力使这篇教程通俗易懂的，即使那些人没有编程基础、网页设计经验。当介绍这些内容的时候，我会指出相关知识，如果你觉得有必要的话，你应该找些资料，更深入的去了解。或许这对那些有经验的编程人员来说很无聊，那么你应该去看看程序源代码，它们都是自解释的。

代码片段都提供了到 gameQueryAPI 文档的链接。当你点击其中的关键字，一个小窗口会弹出并显示相应的文档说明，再次点击这个弹出窗口，它就会关闭。这种方式会使我们明白哪些代码属于 gameQuery，而哪些不是。

1.1.2 警告

由于英语并不是我的母语，所以请容忍我的那些拼写错误，也请你能给我发邮件指出那些错误。我会尽力使得教程对于一个初学者来说易于理解的，而在这种情况下，我可能会有些你认为是不正确的话，也希望你能在评论中说明，让其他读者了解。

1.2 工具

下面是一系列你能马上入手的工具。它们可能是开源免费软件，也可能是些功能强大的商业软件。

1.2.1 图片处理

• The Gimp – 一个强大的图形编辑器。虽然我并不是多窗口界面的爱好者，但我觉得在这软件里，真的非常必要。即使你为你的精灵使用了 3D 建模，你也可以用 Gimp 来给精灵做抛光的渲染处理。
• Blender – 一个令人惊讶的 3D 建模渲染软件，你甚至可以用它来做 3D 游戏。
• Inkscape – 如果你需要制作一些矢量图形的话，这就是你要找的软件。（我并没有用这个来做教程中的游戏，但是我用它来做教程中的插图）

1.2.2 开发环境

• Firefox – 很显然，大家都用过 web 浏览器吧！我使用 Firefox，因为它有 Firebug 这个强大的工具。Safari,，Chrome 和 Opera 都有类似的工具，但我还没有尝试过。如果你使用 IE 却不知道怎么调试代码的话，看看这里。
• Firebug – 这工具真的能改变你的生活！DOM 浏览器，CSS，断点，网络分析，你还能要求更多吗。
• 好的编辑器 – 这真是太多啦，你自己选一个吧。但是比起普通编辑器，就像微软的 notepad，选择个专业的编辑器会让你受益很多！

1.3 游戏描述

玩家操作一艘飞船往右边飞，玩家必须躲避或者消灭从右边出现朝飞船飞来的敌人。敌人分为三种，每一种都有不同的行动方式和武器。一旦玩家的飞船碰到敌人，或者敌人的导弹，飞船将减少一层护盾。如果飞船在没有任何护盾的情况下再次碰撞，飞船会减少一条生命。如果玩家在飞船爆炸之后还有“命”的话，飞船会再次出现，否则游戏结束。在飞船复活之后，它会有 3 秒钟的无敌时间。

第一种敌人会很频繁的出现，我们称之为“炮灰”。它们走直线。它们并不会发射导弹。

第二种敌人稍微有些难缠，它们行走路线有些不可预测，我们称之为“有头脑的”。它们以随机的速率发射导弹。

最后一种敌人是某种“最终 boss”。它们更大更强，但是比起其他两种敌人出现概率很少。它们并不怎么移动，但发射导弹。但出现一个这样的敌人，就不会出现新的敌人直到你摧毁它为止。

这个游戏没有终点，没有分数，完全是随机的，记住，这仅仅是个向导！为游戏增加功能特色非常容易，这对你来说也是个非常好的经历。

1.4 最终游戏展示

这就是我们在教程结束得到的东西。 使用 a、d、w、s 来移动飞船，k 射击。