1.4　第四步：引入各种程序库

在这一步里，我们还要引入9个程序库的源文件。读者可能会问，像这样先引入程序包，判断其是否加载好，然后再把对应问题显示出来，到底有什么意义呢？大家可能觉得像这样反复下载文件并将其引入网页的练习很无聊，但这是为了学习如何获取并使用他人写好的代码，这项技能很重要。很少有项目是从头开始写起的，所以，做游戏时要学会“站在巨人的肩上”。如果还没有学会如何使用第三方代码，那么现在一定要花些时间来学习这项技能。此外，本章还会简单介绍一下后续章节所用到的各种程序库。

不过，若是你本来就已经学会如何将JavaScript程序库集成到项目中，并且已经掌握了版本控制系统的用法，那么把下面这些内容当作复习好了，可以略读或跳过这一步。

各程序库简介

此处列出这10个程序库，并介绍它们在本书中的用途。

1.jquery.js：我们已经引入了此文件。后面有好几章都会用到这个程序库，它可以很便捷地选取并操作网页中的元素。

2.impress.js：第2章将把这个幻灯片演示工具（像PowerPoint一样，只不过是使用JavaScript写的）当作游戏引擎来用，以便管理交互式小说游戏中的“书页”。

3.atom.js：这是用未压缩的CoffeeScript代码写成的文件，仅有203行，无疑是个小巧的游戏引擎。第3章将用它来制作派对游戏。

4.easel.js：开发者可以通过这套优雅的接口来调用canvas API。第4章用它绘制方块游戏中的元素。

5.melon.js：第5章会用这个引擎来做“平台游戏”（platformer）。

6.yabble.js：第6章在制作格斗游戏时，会用这个程序库来载入game.js游戏引擎（这是个游戏引擎的名字，不是指本章与其他各章所用的game.js源文件）。

7.jquery.gamequery.js：这个jQuery插件也能当游戏引擎来用。第7章用它制作横版射击游戏。

8.jaw.js：这是个可靠的全能游戏引擎，第8章将用它（并使用老式的三角函数法）来制作第一人称射击游戏。

9.enchant.js：这款来自日本的游戏引擎功能很强大，而且能很好地支持移动设备。第9章将用它制作角色扮演游戏。

10.crafty.js：这是个广受支持的全能游戏引擎，第10章将用它制作即时战略游戏。（如果只允许带一款游戏引擎去荒岛上做游戏的话，那我也许会选它。）

本章所用的主要程序库，也就是jQuery，现在已经加载好了，接下来加载其他9个。要是想来点刺激的，可以根据附录C试着把它们分别从各自项目的网页中下载下来。也可以在本章源文件的after_recipe4文件夹下找到这些程序库。只要把它们放在index.html文件所处的目录中就好。

提示

看看附录C你就会发现，这些文件其实也放在github上。想从github获取文件，有三个办法。第一种就是把整个项目作为zip文件下载下来，解压缩，然后找到你需要使用的那些文件。

第二种办法是在github网站上打开项目，找到相关文件，然后在自己的电脑中新建一份空白文件，把github网站上的代码复制下来，粘贴到自己的文件里。这么做似乎有点麻烦，不过执行起来其实很快。

第三种办法稍微复杂一些，但是对于现在和以后要做的游戏项目来说，这种办法能使开发过程更加流畅。这个办法就是：安装git，用它来下载（克隆）存放本书范例代码的那个项目 ，然后进入与本章同名的那个目录，把本章用到的这些文件都找出来。可以直接在这个目录下编程，也可以把自己所需的文件从中复制到别处。

git是一种版本控制系统（version control system），该系统可以记录文件变更历程。而github是个网站，上面有许多使用git的程序员，他们会以各种开发语言来编程，并在网站里寻找其他项目，同时也管理自己的项目。这些公共项目均可随意取用。所以，笔者强烈推荐采用这种办法来管理本书范例代码。这里有份非常优秀的教程，会告诉大家如何安装git：help.github.com/articles/set-up-git。

请读者在刚才提到的三种方法里选择一种，把所有程序库文件都下载好，并使之就位，此时，文件夹结构应该像图1.3这样。

图1.3　包含所有相关JavaScript文件的文件夹

将文件放好之后，把程序清单1.9里的粗体代码加在index.html文件的末端，以便在网页中引入这些JavaScript文件。

程序清单1.9　在index.html中引入JavaScript文件

务必保证文件名与index.html所引用的名称相符。在html中引入JavaScript文件的方法很简单，只需使用<script>标签即可。这段代码中值得一提的是atom.js之上的<canvas>元素，以及<canvas>之上的<!-- -->这一行。如果没有<canvas>元素，那么atom.js就无法正常运作了，所以必须加上它。在使用很多游戏引擎之前，开发者都必须先调用初始化函数，或是引用引擎所需的<canvas>元素，以便启动引擎。在网页中引入atom.js时，该脚本会立刻搜寻canvas标签。有两种应对方法：要么编辑atom.js，将这个行为改掉，要么在网页中先提供一个canvas给它用，我们选择后者。<!-- -->这一行是HTML注释。注释是写给你自己或其他开发者看的，而浏览器则不看注释，它会将其忽略。请注意，网页访问者也有可能会看到这些注释，因为他们通过浏览器的查看源代码功能就能看到HTML页面的源码。如果不明白查看源代码这项功能的用途，请参阅附录B。

接下来，修改game.js文件，把其余9个问题重新显示出来。将程序清单1.10中的粗体代码加入game.js即可。

程序清单1.10　将其余9个问题重新显示出来

通过这段代码可以看出，在引入jQuery这种JavaScript程序库之后，最常见、最明显的效果是，系统里出现了某些新对象。但是，显示第7道题时所写的代码与其他地方不同，此处没有直接检测playground。因为gameQuery只是jQuery的一个扩展插件，它是基于jQuery而构建出来的，所以，它本身并不产生新的核心对象，于是，我们只好先调用jQuery的$()函数，然后检查其返回值里是否定义了名为playground的函数，以此来判断该插件是否正常载入。

警告：第三方程序库的代码未必归您所有

程序库的编写者经常会对“此程序库应该如何使用，以及必须如何使用”表达其看法。他们会在源代码中包含一份软件许可协议，将这些观点写成具备法律约束力的意见。当然，这并不是说不能或不应该使用这些程序库，只是说使用时必须遵守其约束。比如，有些协议禁止将程序库商用；有些协议要求使用者必须署上程序库原开发者的名字；而还有些协议只是放在那里，令所有使用者都能看到它而已。这些协议的种种细节不在本书讨论范围内，不过，大家可以读一读这些项目的协议，或是看一看Creative Commons、GPL、BSD、MIT等协议，这样就能更好地理解其开发者要求他人在使用其开源项目时，应该遵守何种约定了。图片、声音文件以及其他各类文件均受软件协议约束。

将game.js保存，并用浏览器打开index.html，你会发现，所有题目又重新出现了，但是，点击鼠标之后却没反应，无法选择答案。这是因为canvas元素会扩展至整个页面，从而无形中阻拦了鼠标，使之无法点击答案旁边的单选按钮。解决办法是，将程序清单1.11中的粗体代码加入main.css之中。

程序清单1.11　在main.css中加入CSS样式，以便隐藏canvas