《HTML5完美游戏开发》——2.2 A到B游戏-阿里云开发者社区

开发者社区> 开发与运维> 正文

《HTML5完美游戏开发》——2.2 A到B游戏

简介:

本节书摘来自异步社区《HTML5完美游戏开发》一书中的第2章,第2.2节,作者: 【白】Egor Kuryanovich , 等 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 A到B游戏

我的第一个HTML5游戏,是一个叫做“A到B”的益智游戏。顾名思义,游戏的目标就是把小球从A点移动到B点(如图2-1所示)。在游戏开始之前,玩家看到的是一个古老的计分板,很像古老的街机游戏。游戏背景是一个空旷的二维空间。每一个关开始时,小球都放置在指定的A点,静止不动。B点为目标点,屏幕底部还有一些小道具。


<a href=https://yqfile.alicdn.com/154384570a1c0de39827f86a8c9946efa90b11f1.png" >

玩家点击“Go”按钮后,小球发射(每次的速度和方向都不相同),然后受到重力的作用向下掉。如果小球击中点B,玩家得分并进入下一关。如果小球移出了屏幕,小气会回到初始位置,游戏重新开始,直到击中点B。为了让小球能够到达点B,玩家需要使用各种小道具,来引导小球。这些小道具包括墙、反弹球、加速器、减速器以及重力翻转器。每一关都有1到5个小道具。只有通过这些小道具的帮助,小球才能到达目标并过关。另外,小道具用过之后,会自动消失或无法再次使用。

游戏总共有18关,从第一关只有一个小道具,到最后5个道具,即道具的数量会随游戏难度逐渐增加。玩家每关最多可以获得100分。计分系统是这样工作的:开始时玩家有100的储备分,每失败一次,减5分(前提是有分可扣)。因此,如果玩家想得分,应该在20次以内将小球移至B点。

2.2.1 影响和灵感
A到B游戏实际上是从我之前的游戏“无限的圆弧”(如图2-2所示)演变来的。那个游戏可以说是在线游戏的一个反面教材:整个游戏包括一个小球,玩家抛掷小球后,通过一个圆弧撞击目标,撞击目标后,即可得分。游戏会持续不停的进行下去,直到玩家退出。该游戏的目标就是看谁能够不厌其烦地重复下去,拿到最多的分数。


<a href=https://yqfile.alicdn.com/0fc71a1e2a13551a5fcd4656f13bd43aa7f1af90.png" >

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所示。


dae912da2a36f474fb7943b7d40633f6963b64dc

通常在开始之前,对系统做一个整体的规划是个好习惯。不过,我没有严格照此执行。因为我知道这个游戏不会是个大型的工程。很侥幸,整个游戏并不需要太多的代码。这是不好的习惯。因为这样会使代码效率越来越低,模块化程度越来越低。很多人像我一样,相信只要按时完成工作,不用在乎过程。正如在图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次点击量。


<a href=https://yqfile.alicdn.com/8116f28e0c1119a0d638554878ab909cae491aab.png" >

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章