本节书摘来自异步社区《HTML5完美游戏开发》一书中的第2章，第2.2节,作者： 【白】Egor Kuryanovich , 等 更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.2 A到B游戏
我的第一个HTML5游戏，是一个叫做“A到B”的益智游戏。顾名思义，游戏的目标就是把小球从A点移动到B点（如图2-1所示）。在游戏开始之前，玩家看到的是一个古老的计分板，很像古老的街机游戏。游戏背景是一个空旷的二维空间。每一个关开始时，小球都放置在指定的A点，静止不动。B点为目标点，屏幕底部还有一些小道具。
玩家点击“Go”按钮后，小球发射（每次的速度和方向都不相同），然后受到重力的作用向下掉。如果小球击中点B，玩家得分并进入下一关。如果小球移出了屏幕，小气会回到初始位置，游戏重新开始，直到击中点B。为了让小球能够到达点B，玩家需要使用各种小道具，来引导小球。这些小道具包括墙、反弹球、加速器、减速器以及重力翻转器。每一关都有1到5个小道具。只有通过这些小道具的帮助，小球才能到达目标并过关。另外，小道具用过之后，会自动消失或无法再次使用。
游戏总共有18关，从第一关只有一个小道具，到最后5个道具，即道具的数量会随游戏难度逐渐增加。玩家每关最多可以获得100分。计分系统是这样工作的：开始时玩家有100的储备分，每失败一次，减5分（前提是有分可扣）。因此，如果玩家想得分，应该在20次以内将小球移至B点。
2.2.1 影响和灵感
A到B游戏实际上是从我之前的游戏“无限的圆弧”（如图2-2所示）演变来的。那个游戏可以说是在线游戏的一个反面教材：整个游戏包括一个小球，玩家抛掷小球后，通过一个圆弧撞击目标，撞击目标后，即可得分。游戏会持续不停的进行下去，直到玩家退出。该游戏的目标就是看谁能够不厌其烦地重复下去，拿到最多的分数。
A到B游戏的核心，受到了之前提到的Atari标准的影响。一开始，我就清楚自己是个新手，应该先从简单的游戏做起。Asteriod的整个色调只有黑白两种，玩家控制的角色就一个三角形。尽管如此，它依旧是我曾经玩过的最有意思的竞技游戏之一。我决定在进入游戏开发世界之前，先了解一下游戏基础，比如如何让游戏好玩。不用了解的太细，强烈建议你读一读Ralph Koster的《游戏设计理论（A Theory of Fun for Game Design）》这本书。书中深入地介绍了如何让游戏变得有趣。通过本书的启发，以及我个人对游戏的理解，最终做出了这个加强版的A到B游戏。
Stnd001译者注
Asteriod是个经典的街机游戏。
2.2.2 游戏创作阶段
A到B游戏所有的细节和修正部分都是在游戏创作阶段构思出来的。我发现非正式无计划的创作过程的效率是很高的。这样会产生更多原始的灵感和信息。我的构思起初就是这个简单的圆弧。有时候在思考游戏时（通常是在上学的公车上或者做运动时），会迸发出很多想法，然后我会把这些想法画出草图，给我的朋友们看。这个过程可以清楚的表达出我的想法，不仅可以让朋友们充分理解我的想法，同时他们偶尔也会给我带来很多的意见和建议。特别是一些好的创意，基本都是在与朋友们交流的时候获得的。实时交流是激发创作灵感、集思广益最好的方法，最终造就几乎完美的这个应用。
2.2.3 准备阶段
游戏构思一旦定下来会后，就要进入准备阶段了。首先要确定的是技术。既然已经决定完全用HTML5来打造这个游戏，要清楚游戏中会用到的HTML5新增的canvas和audio标签。另外还需要一个积分榜，一来做出街机游戏那样的感觉，二来给游戏添加一些吸引力，让玩家持续玩下去。
制作积分榜，需要有一个在线的数据库，我们用MySQL和PHP来实现这个功能。关于游戏编码部分，我决定用Processing.js（PJS）库来完成。PJS是一个以Processing编程风格实现的JS库。Processing是个非常流行的编程语言，适用于美工人员和编程新手。它是编程世界的基石，因为对初学者来说非常容易上手，同时它也拥有强大的功能，可以构建高级的应用。开发人员可以用PJS原始语法编写代码，然后自动转换成canvas元素。这一点，是“A到B”项目时程表中的主要因素，因为我是Processing的粉丝。通过PJS可以用熟悉的Processing环境进行大部分编码和调试过程，然后再上线。
我还总结出了另外一条经验：只要工作完成了，谁会在意你是怎么完成的吗？人们只关注最新的、最流行的技术。如果只注重最终的产品，那就无需在意实现的过程，只要能够完成就好了。
除了学习一点PHP和MySql知识，我们还得温习一jQuery。jQuery对实现积分榜非常有帮助。因为JavaScript是个客户端语言，所以还需要通过JavaScript来进行数据库读写，这时候jQuery正好派上用场。
技术基础打好后，需要把所有要完成的内容列出一个清单来，并设定完成时间。做个这样的时程表对项目的管理和督促很有帮助。给指定的项目设定完成时间，不仅可以督促我们按时间完成计划，还可以少走弯路。我的初始目标是在4周内完成整个项目，并能参加一些不同的游戏活动。通过排配每项的完成日期，最终顺利地完成了上面的目标。
2.2.4 正式开发阶段
A到B游戏的开发遵循了标准的开发流程，如图2-3所示。
通常在开始之前，对系统做一个整体的规划是个好习惯。不过，我没有严格照此执行。因为我知道这个游戏不会是个大型的工程。很侥幸，整个游戏并不需要太多的代码。这是不好的习惯。因为这样会使代码效率越来越低，模块化程度越来越低。很多人像我一样，相信只要按时完成工作，不用在乎过程。正如在图2-3中看到的，我们经常是先从编写代码开始。通常情况下，我会把代码分成几个部分，然后逐个完成。比如，其中一部分用来使小球模拟真实的物理运动。
与其一口气把整个系统开发完毕，我更愿意按功能来，然后逐个攻破。尽管从学习和专注的角度来看，这样模块化程度可能差一些，但是开发效率却更高了。有时候我会困在一个问题上，一直不停地研究，直到把这个问题解决掉。这样到最后就不会有什么零零散散的问题了。
编码、调试和测试之后的下一个阶段是试玩测试。试玩是开发流程中最有帮助的环节之一。试玩测试阶段主要产生两个内容：bug和假设分析。在编码过程中，开发者很难纵观全局。这就让其他对游戏操作不熟的人来帮你进行试玩测试。发现可能出现很多意料之外的问题。这就像重新画一幅画一样，会从各不同的角度找出一些相同的问题。这些问题可能会引出一些和代码无关的bug。这就像往桶里倒水，水桶漏不漏水就一目了然了。
另外，评估假设分析，也是更重要的。假设分析是游戏创作阶段的延续。在测试人员测试的过程中，可能会出现一些需要修改或删掉的地方，让游戏变的完善。为了让假设分析的作用更加明显，可以让测试人员使用“有声思考”的方法。这是提升游戏用户体验常用的伎俩，即让玩家尽量说出他们所想的内容。这样可以看到游戏中所有引导玩家思维的东西，比如玩家看到红色的物体就想到危险（而实际并不是），这时候可能就要修改颜色了。玩家任何一个细微的想法都可能会暴露出游戏的缺点或出众点。
游戏引擎准备就绪后，是该给游戏上点色了。因为A到B游戏的宗旨就是简单简约，所以游戏界面要体现出这一点。我坚持尽量少用特效和基本的图形来体现简约。我相信这也强调了游戏的核心，给玩家带来基本的概念，即把小球从一个点移到另一个点。为了让游戏更加生动，我从ccmixter.org上找了一点音效，添加到了游戏中。这个网站提供了很多由Creative commons授权的音乐，每首曲子都有介绍适合的场合。不管是商业使用还是个人使用，都很详细。我用的是一个由Gurdonark上传的简单的有趣的曲子叫“Kindergarden”。
译者注
Creative Commons，简称CC，是一个非营利组织，也是一种创作的授权方式。此组织的主要宗旨是增加创意作品的流通可及性，作为其他人创作及共享的基础，并寻找适当的法律以确保上述理念。
**
2.2.5 游戏发布**
完成游戏开发并能顺利运行以后，要参加一些活动，做一些推广。作为一个游戏开发新手，我并不是很了解有哪些活动可以参加。最终，我只参加了两个比赛：IGF student showcase和Mozilla游戏大赛。通过社会网络，我做了个小小的推广，也获得了一些基本的用户群。然后又在Facebook和Twitter上发布了文章，获得一些朋友和网友的支持。当然还有很多其他的方法来宣传游戏，但我更信赖人们口口相传的力量。
2.2.6 积分榜
截至写这本书之前，A到B游戏的最高分是1795（如图2-4所示）。虽然我的分数1665也在榜上，不过还是很遗憾没超过最高分。最完美的结果是1800，但我现在还是没有想到，怎么样才能获得这个完美的分数。
在Mozilla的HTML5游戏比赛中，A到B游戏进入了总决赛。另外还被一些博客和HTML5游戏网站收录，而且被playthisthing.com转载。在开始的3个月里，A到B游戏受到10000次点击量。
