水果忍者网页游戏论文.doc

本科毕业论文(设计) 题 目： 基于HTML5的水果忍者 网页游戏的开发 学 院： 软件技术学院 专 业： 数字媒体艺术 姓 名： 赵婷婷 指导教师： 李晓娜 2014 年 5 月 30 日 摘 要互联网技术不断革新，用户对于应用的要求在不断提高，使得技术标准也在不断进步。HTML5的产生使得互联网有了很大进步，在此平台上，互联网更加成熟完善，数据传输更加安全可靠，用户操作更加方便。本课题是基于HTML5技术来制作一个新款网页版的“水果忍者”游戏，用户可以直接从浏览器中打开进行切水果游戏。这个网页游戏采用了HTML5中用于控制声音、程序接口的最新技术，如Audio。服务器采用新型框架Nodejs，使用Javascript语言来进行编译，用到了大量和HTML、CSS相关的专业知识。虽然HTML5标准还不是很成熟稳定，还不能真正将其普及。但该游戏不仅让我巩固了大学四年学到的知识，也加深了我对计算机编程的进一步审深入了解。关键词：HTML5，网页游戏，水果忍者 ABSTRACTAs the development of the Internet technology is increasing and our requirement to the application is rising, the standard of technology makes progress. The produce of HTML5 makes Internet become better, and in this platform, the data is more safe to share.Basing on the environment of Web, the subject is to use the HTML5 create a Web edition of fruit ninja game. After opening it, we are able to directly play it. The game operates some latest technology to control the voice and the program interface, such as Canvas and Audio. The game uses Nodejs to complish, and it use Javascript to program. Meanwhile, the subject involves some knowledge about HTML and CSS.Though HTML5 still cant be completely commercial, the game can not only make me consolidate the knowledge during the four years, but also deepen our comprehension of computer programming.Keywords：HTML5，Web game，fruit ninja0目 录 第一章 绪论11.1 课题的目的和意义11.2 国内外发展现状21.3 课题主要的内容和功能介绍31.3.1 水果忍者游戏介绍31.3.2 游戏特点41.3.2 与其他水果忍者游戏区别4第二章 相关技术简介62.1 HTML5标准简述62.2 Nodejs简介72.3 Web开发工具92.4 Chrome浏览器介绍10第三章 总体设计及程序功能分析133.1 需求分析133.2 程序总体功能设计133.2.1 程序功能模块分析133.2.2 声音的控制分析133.2.3 服务器客户端分析133.3 程序流程143.4 模块及对应的方法17第四章 详细设计194.1 服务器端的运行环境194.2 场景控制204.3 水果与刀碰撞的原理224.4 读取服务器端爆炸信息234.5 查看得分与最高纪录25第五章 系统测试275.1 测试环境275.2 兼容性测试27结束语28致谢29参考文献30第一章 绪论1.1 课题的目的和意义当今社会，互联网在不断发展进步，随之人们的生活也不断变化，由于互联网的各种服务带来各种方便，人们的生活质量不断提高。互联网的受重视程度逐渐加大，出现更多的开发者去创造和改善它，互联网革新的速度越来越快。为了适应用户的各种需要，新的模式和新的技术层出不穷，这对于新的公司也是新的挑战。在这机会和挑战并存的开放环境中，互联网吸引着越来越多的公司去创业。在计算机行业，虽然要求的成本低，但是技术壁垒确实非常高。一些陈旧或者较低的技术自然而然会被大家淘汰，全新的技术和服务就会占领互联网市场。在这种竞争环境下，HTML5这种全新的技术标准产生了，它的高性能对用户十分有吸引力。同时，HTML5出现的时间并不久，还需要继续革新，更加完善，才能吸引更多用户，在竞争中不断壮大。在这个互联网时代，网页的各种标准不断改进，其中进步最大的就是HTML5，通过这一标准的改变，网页的格式内容都有了革新。不仅如此，各种形式的音频视频有了一定的标准格式，使得网页设计更加成熟。虽然HTML5是刚刚新起的，有很多方面还不是很成熟，但它干预突破传统技术的不足，很多模式在不断创新，这对于互联网来说是里程碑。不知传统意义上的电脑，手机和平板也需要进一步改进网页标准，改革旧的技术，创造新的交互式软件和应用。未来人们生活的各方各面可能都会用到互联网，所以对网页技术的革新实际上就是对时代的变革，而研究HTML5就是研究互联网的关键一点。该课题是对TML5这一最新技术的实践，性能比照之前的WEB技术更加富有前瞻性，性能也更加优越。在这种互联网革新速度如此之快的时代，这种新技术无疑可以衍生出新的应用，带来更高的商业价值。在计算机诞生后不久，各种游戏软件就相应产生，在它不断吸引用户的同时，用户对游戏的要求在不断提高。游戏从刚开始的单机型发展到大型网游，现在又向操作方便快捷的小型网页游戏转变。本课题就是适应用户的这种需求，该水果忍者网页版游戏，可以在网页中直接打开运行，跨浏览器兼容，并且可用在任何ASP.NET开发中。1.2 国内外发展现状HTML从产生到现在已有20年左右，已经历了多个年代的发展。最初HTML是在90年代以因特网草案产生的，在短短的几年里，它经历了2.0版、3.2版以及4.0版和4.01版。渐渐的，HTML的掌控权到了万维网的手中。就在大众都认为这时的HTML技术已没办法再次突破，就没有特别重视了。在此同时，标记语言XML和XHTML受到大众的关注，取代了HTML的重要位置。虽然它没有处于最受重视的位置，但依然普遍使用，很多的网站依然是基于HTML使用的。为了力挽狂澜，HTML需要克服已有的优点，创造新的功能，展现自己顽强的生命力。为了使Web平台能够达到一个新的高度，一组对此感兴趣的人成立了Web超文本应用技术这一工作组，这个技术工作组发现了HTML中最为薄弱至关重要的地方，即开发新的应用功能，这样WEB2.0诞生了，其导致了Web的时代更迭。一些传统的静态网站在新一轮的竞争汇总被具有更强特性的新的动态网站击败，因为用户难已拒绝这些新网站的强大功能。全世界的浏览器厂家纷纷在全球性的规范尚未出现时，便已经纷纷竭尽全力来升级HTML5来支持新的功能。首先进入HTML的是W3C在2006年的时候，之后公司在两年之后公布了一个HTML5的初稿，一年之后，技术组即停止了工作。HTML5从全世界各大浏览器公司获取的第一手资料帮助了HTML5更好的完善己身的功能，它的改进巨大，并且在不断的完善当中。现在在一些国际大公司以及手机移动客户端产品的促进下，新的HTML5规范正在逐渐趋向于最终版本，并即将得到非常广泛的推广。 HTML5将服务器的发展也推向了一个顶峰，在客户端取得飞速发展的同时，众所周知，起初CGI（即在物理上运行在服务器上一段程序网关接口）提供最初的客户端使用HTML页面接口，再到之后的J2EE这种类型标准开发框架，普及到广大企业的软件标准，衍生到再之后的Linux这类型的帮助构建形成动态网页的软件，它们通过组合，努力增强在一起的兼容性，提高了效率，更加强打Web应用程序平台由此诞生了。一种基于Ruby语言的Web应用开发框架可以绷住用户开发，部署新的Web应用。在HTML5出现后，诞生的新的服务器架构，使我们的技术圈发生了翻天福地的变化。在本课题的研究过程中我们使用了一个最新的架构Nodejs，这样的一个JS运行和愿景，包含了其对Gooogle V8殷勤的封装，这样JavaScript环境，在V8引擎的帮助下，速度大大提高，性能也得到了极大改善，由于Nodejs强大的对于一些用例的优化功能，即使是在一些非浏览器环境下面也能运行的非常好。Nodejs这种开发架构帮助JS在服务器端运行的非常便捷，其在非阻塞式的编程中借助的JS的函数式编程特性帮助编程更加容易。1.3 课题主要的内容和功能介绍1.3.1 水果忍者游戏介绍水果忍者这款游戏自上市以来收到大众的关注，一直很受欢迎，在游戏软件中的排名很靠前。本课题设计的游戏与平时玩的水果忍者很接近，游戏的画面感计较真实，有很多种水果，如草莓、苹果、西瓜和桃子，在白色的刀切开水果时果汁会很真实的溅出来，被切开的水果的果肉也很逼真。通过切开水果，玩家能感受到一定的刺激感以及视觉享受。通过鼠标的移动，电脑上会有相同方向的白色刀光产生，伴随着刀子切开水果会产生划破的声音，这样产生的效果更加刺激。虽然这款游戏的规则简单，但是不容易得到高分。本游戏设计的是经典玩法，没有时间限制，只要不落下水果不到三个并且不切到炸弹就会无穷玩下去。在画面的右上角会显示三个深蓝色的叉号，漏掉一个水果就会有一个叉号变红，当到达三个叉号都变红的时候就提示游戏结束了。当玩家切中了忽然出现的炸弹时，游戏就结束了，画面上会显示返回主菜单去。又要保证尽量把水果都切到，又要躲过所有的炸弹，这不是一件容易的事情，既要反映快，又要大胆心细。玩这款游戏其实可以讲究一些技巧，这样就会得分高一点。一般把鼠标的位置放在计分处的下面一点，这里是水果上升的最高点，所以把鼠标放在这更能轻易的切开水果。如果水果和炸弹是并在一起一块出现的，不要轻易去切，因为这样容易切到炸弹，本着宁愿错过一个也不能切到炸弹的原则，要等到它们下落时等分开再去切。对于刀的切割方向，建议横着去切，因为如果竖着切很容易切到下面突然出现的炸弹，而且横着切容易多切几个水果。如果很多水果被一起抛起来的时候，应该先去切体积较小的水果，因为体积小的水果更快的往下落而且需要更精准去切，可能花的时间长一点。还有一个技巧是，最好不要出一个就去忙着切一个，这样会弄的手忙脚落，而等到水果在一条直线上再切就会更准确一点。1.3.2 游戏特点首先，该游戏最大的特点就是简单。其他的游戏大部分会有很多关卡，过了第一关才能进入下一关，但是该游戏没有设置任何关卡，只需要简单的滑动鼠标去切水果。而且，水果忍者的创意来源很偶然，一位员工看水果刀推销的电视广告上，商家为了向观众展示自己卖的刀具很锋利，就把准备好的香蕉往上一抛，然后用推广的刀具将这个香蕉从空中切开。这个员工就在公司星期五活动上向大家说出了这个创意，得到大家的认可后，仅用了很短的时间，Halfbrick公司就推出了这款风靡一时的水果忍者游戏。其次，该游戏的细节方面很到位。尽管电脑的画面显示大小是有限的，而且规则简单，但是该游戏的每一个细节做得很到位。在切到水果的时候，果汁溅出来的细节很逼真，画面效果使用户感到很大快感。对于一个休闲类的游戏好不好玩的定义，通常会是这个游戏能不能很快学会。如果是一个从来没有接触这个游戏的用户第一次玩，他会很自然的用刀去切水果，并且如果切到炸弹游戏结束时自然而然就知道下次要躲开炸弹，并不需要看很久的教程。在用户切水果的时候，不仅可以体会到成功的喜悦，也能释放内心的压力，更甚，如果用户很巧妙的躲避了炸弹，或者自己感觉没碰到炸弹而爆炸了，这样一惊一喜也是很好的体验。还有一点，该游戏对用户吸引力很强。有一个案例是，有个商人本来对游戏非常不感兴趣，认为这些游戏都是小孩才会去玩的，但是当他接触到水果忍者这个游戏的时候，他一下子迷上了，并且在推荐给自己的妻子时，一向对游戏更嗤之以鼻的妻子也玩上瘾了。这样一个对用户吸引力很强的游戏，必须经过很好的推广才能流行起来，这就需要做到很好的营销。在这款游戏刚刚推出的时候，开发者的家人和朋友在推荐下都去试玩，这一不错的游戏即刻就受到他们很好的反映。这样在公司的大力推广下，口碑很不错，渐渐很多人对这款游戏就熟悉了。高质量的产品一向能得到很好的效果，所以这款游戏持续很久在游戏下载排行榜上名列第一。1.3.2 与其他水果忍者游戏区别本款“水果忍者”网页版游戏在音效上模仿了原版，所以在玩者刚一进入游戏的时候，会有似曾相的感觉。原版的水果忍者游戏有三个不同的模式可选，经典模式和本游戏比较相似，就是画面中不断出现各种水果掺杂着炸弹，允许有三次以下水果落下的机会并且一切到炸弹就会结束。禅模式会规定时间，在时长一分半的时间里一直出现水果而没有炸弹。街机模式也有时间的限制，是一分钟，在这一分钟里，水果和炸弹都会出现，但是和经典模式很大不同之处是，如果在这个模式下切到炸弹游戏不会结束只会扣分，当然也有一些其他的加分项目之类的。虽然这款游戏与原版游戏相比，游戏只是完成了最简单的经典模式的切水果功能，并没有设置连切奖励，也没有其他模式这一选项，加分项目也只是一个水果加一分这么简单等等。但是本款游戏最大的好处就是可以直接在浏览器上打开，在Chrome 浏览器下运行很顺畅，在IE9下也还运行正常。这种网页版游戏对于玩者来说，既方便又顺畅，玩起来还是有很多乐趣的。这个基于HTML5的网页游戏一定会不断进步，在未来既可以实现网页直接打开的简单快捷，又能包罗原水果忍者游戏的模式变化和功能齐全。第2章 相关技术简介本课题用到的中心技术就是HTML5，这是目前来说最具先进性的客户端，之前只是一个网管接口，通过不断改进，兼容度不断提高，成为一个功能完善的平台。另外一项较先进的技术就是Nodejs，它作为Javascript编程语言的中一个特殊平台，能够在很多时间内构建网络应用。实际上，它对Google V8浏览器进行了封装，所以在Chrome浏览器下，运行Javascript的时间比较短，运行很流畅。2.1 HTML5标准简述HTML5包含了HTML、CSS和JavaScript，它是一种技术综合，是目前网页的最新版本。在表现性能上，它比以往的技术更加高，在继承以往功能的同时又增加了连接本地数据库和其他新应用的功能。其本身还在开发和充实之中，并不是很完善。它现在渐渐实现了并朝着这样一个方向前进，就是使一些复杂的技术体系可以变得简单便捷。例如，很多例如技术体系，对Adobe Flash的一个必要条件，及Oracle JavaFX运行，就是必须以插件形式插在浏览器。但是，HTML5不需要这么繁琐，它提供的一些网络标准集，便可以满足用户这方面的需求。除了HTML原有的标记外，HTML5还创造了一些新的标记元素，如和。通过增加矢量图形这种新型功能，集成了SVG。通过这些创新，当处理网页中的视频、音频或者图形时会更加方便。还有一些标记的引入使得数据信息更加充实丰富，在加载数据时画面更加真实，当然还有其他属性也起到了相同的效果。在增加这么多新属性新元素的同时，对以前的一些不合适的元素进行修改和淘汰，也是一项必不可少的工作。对于这些标签的重新改进之后，HTML5更是精华版的技术组合了。现在，HTML5的核心部分包括API以及文档对象模型DOM。不仅如此，它还对非法文档带有一定的纠错功能。例如在客户端程序中出现语法错误时，它会对其进行提示，以便于处理。HTML5改进了很多原有的元素，使之产生新的功能和用法，适应现代网站的特点。这些新提供的标签有些类似于原有的一些，但在速度或者功能上略有不同。下面介绍几个典型的标记。（网站导航块）类似于标签，但它增加了索引整理优点，并且为视障人士提供便利，增加了小屏幕设备。标记，在浏览器中展现出了新的用处，可以作为一个函数准则发挥作用。是HTML4的标记，具有修改样式属性，纯粹用来显示，没有其他效果。现在已被取消，取而代之的是CSS，还有的被DOM网络行为取代。HTML5的语法不再是基于SGML，仍然是标准通用标记语言，但在标记上或是一定程度的相似性的存在性上，它的设计往往是与旧版本的HTML兼容的。在文档的最开始位置，会有一个开始行，它接近于SGML的文档类型声明，显示在标签之前。通过或这个标签，我们便可以知道该浏览器文件到底是用的是什么规范，它会对渲染模式起到一定的触发作用。同时，在以往存在的DOM接口之外，HTML5提供了API，这些应用程序接口的形式各有不同，功能上也是多种多样的：(1) 实时二维绘图。Canvas API：这种API可以对图形图像以及动画等形式的内容，进行动态产生和渲染。(2) 对HTML5中的数据信息进行按时播放。在HTML5新引入的对象中，有的增加了处理视频以及音频的脚本式API，利用这些元素，不需要在浏览器中安装任何插件，通用性和集成性很高。(3) 通信网络APIs：创建交叉源和实时通信的两个主要部分，包含跨文档通信 与 XMLHttpRequest。(4) 地理定位API：在Web应用程序的帮助下用户能够知道相互的地理位置，并能享受感知作用。(5) Web SQL数据库，这是一个本地的SQL数据库。(6) WebSocket，它以浏览器的socket网络协议为基础，可以完成实时性的数据传输，并且支持当今所有的互联网通讯。2.2 Nodejs简介 Nodejs能够在很多时间内构建网络应用，实际上，它对Google V8浏览器进行了封装，所以在Chrome浏览器下，运行Javascript的时间比较短，运行很流畅。Nodejs创立了具有新功能的API，改良了一些具有特殊用义的例子，所以在不是浏览器的环境下，它的执行情况也很好，Nodejs对于Javascript这方面中的一些不足进行了改善。例如，处理二进制数据对于服务器来说是很重要的，但Javascript对其有用的元素不是很多，所以Nodejs提供了Buffer类，该类可以高效率的在服务器环境中处理二进制数据。不仅仅是在服务器环境中，在各种环境下它都做了相应的优化措施。V8引擎使用的编译技术是最新的，Javascript这种用高级语言来编写的代码，与C语言这类低级语言相比，除了可以节省开发成本之外，其性能是差不多的。Nodejs对于性能的要求是比较严格的，对于Javascript来说，它也是提高了要求，使之编写扩展性能更加高的服务浏览器。虽然还有很多别的平台能够使用Javascript来运行，但对于Node来说，这个功能更加具有优势，它比其他平台功能更丰富。当考虑选择用哪种编程方法的时候，会优先考虑到浏览器这一方面，因为有的编程不适用于浏览器的功能。网络越来越复杂，浏览器的代码也随之变得复杂多样化，Node就很适应这种形势，所以会变得越来越深入人心，成为开发者所深知的平台。Nodejs的运行架构如图2-1 ：图2-1 Nodejs的结构图在这一过程中，Nodejs采用了“事件循环”这一架构，在编写服务浏览器时，编写过程更加方便。在提高服务器性能的同时，又能减少开发成本，使得开发过程复杂度降低，是多种技巧之中的佼佼者。这种特性对于开发者来说是非常珍贵的，它既绕过复杂的并发编程，有提供了很好的性能。以下图2-2是Nodejs在处理数据时带来性能提升的具体展示：图2-2 Nodejs在处理数据时性能提升的具体过程为了支持事件循环，Nodejs添加了很多“非阻塞”库，这些库实际上为文件和数据库提供接口。如果你向主文件发出请求时，不需要等到硬盘找到请求的地址或者对文件进行检测，当硬盘能够对它做出响应时就会将消息发给Nodejs。这种模型能够使得在访问资源信息的时候更加方便，看上去也一目了然。还有一些常用的DOM事件，例如onclick，是大家特别熟悉的。虽然还有很多别的平台能够支持Javascript的执行，但对于Node来说，这个功能更加具有优势，它比其他平台功能更丰富。当考虑选择用哪种编程方法的时候，会优先考虑到浏览器这一方面，因为有的编程不适用于浏览器的功能。网络越来越复杂，浏览器的代码也随之变得复杂多样化，Node就很适应这种形势，所以会变得越来越深入人心，成为开发者所深知的平台。2.3 Web开发工具在开发网页时，因为编写的程序做出来的画面，需要打开浏览器之后才能知道，所以真正的调试工作是在浏览器上进行的，Web的开发工具实际上就是编码过程中的编辑器。网页开发工具基本上分成两大类，第一种是通过编辑器来进行编码，第二种是由Eclipse进行开发。首先介绍用编辑器来编码的这一种，以Editplus作为例子来看。在Editplus中，代码可以大量显示出来，这样有利于提高编程者的效率。Editplus既可以像记事本一样能够很快的打开，又要比记事本功能强大的多，用起来可以节省很多时间。在编程过程中会经常出现错误，Editplus可以无限制的撤销，这样就可以还原到以前的状态。而且，不同类型的代码颜色不一样，方便检查。Editplus不仅仅支持Java，还支持各种C语言。另外一种就是用Eclipse进行开发的，它是一种大型的开发软件。刚开始的时候主要用来编写Java，现在的用途比较广泛，既可作为开源工具，又能以插件的形式来进行开发。Eclipse用起来不仅灵活，更突出的是可以扩展成其他形式，在很多后期开发中应用广泛。它的缺点就是打开的速度不快，通常要等几分钟，而且占用的内存比较多，可能会使电脑有点卡。Aptana对Eclipse有很大的支持，它的存在使得代码的编写过程更加方便，同时使运行过程更稳定。像其他编译器一样，Eclipse也支持多种语言，如Web语言和Javascript。随着软件功能的改进，Aptana也在不断吸收外界的优势，完善功能，取得更多支持的环境。对于软件工程师来说，它就是开发的好帮手，对于开发工作做出很大的贡献。2.4 Chrome浏览器介绍互联网的进步推动着浏览器的改进，以前的浏览器在大家心中的印象就是一个简单的能上网查资料的网页，功能也不齐全，而现今在竞争的压力下，浏览器不断升级，与之前大不相同。现在可以选择的浏览器的种类很多，各大公司相继推出自己品牌的浏览器，这些浏览器的共同之处在于都是用开源内核来建立的。虽然浏览器的种类众多，但是很容易对市场上的浏览器做出分类，基本上可以分为IE浏览器和非IE浏览器。IE浏览器是用泰鼎的页面渲染引擎设计的，但是微软公司出于想取得更大利润的目的，没有致力于将Web的标准扩大，在进行浏览器的开发时，IE浏览器的很多项功能没办法在非IE浏览器下使用。这种行为是对信息资源的极大浪费，开发的项目应该能够资源共享。不过，HTML5应该会解决这个问题，而且时代发展也让微软公司需要做到资源共享，让这个时代成为互联网的时代。为了适应大众的需求，一些公司推出了其他浏览器，这些浏览器基本上是基于IE浏览器开发的，但是比IE要更适应用户的需求，它们改变了原有的缺点，使得推广度更广。现在大家常用的浏览器有360浏览器和搜狗浏览器，这些浏览器不仅可以实现所有IE的功能，又对性能做出改进，更能受到大众的欢迎。除了上述介绍的浏览器之外，火狐浏览器现在也很流行，这个浏览器是开源网站，是由一些志愿者自愿组成工作组开发的。因为微软公司开发的IE浏览器有些功能具有独立性，在业界的位置过于垄断，所以这些志愿者想开发一个浏览器与之竞争。火狐以开发出来就收到很多人的支持，又受到基金会的资金支持，所以它的发展很迅速，也很顺利。但是这么强大的浏览器也是存在一定优点的，由于为了支持这个浏览器需要安装很多插件，速度就会减慢，很多用户也是由于这一点慢慢放弃了这一浏览器。如图1-3是firefox浏览器的结构图，从图中可以轻易看出，一个浏览器的组成结构很复杂也很庞大，虽然这样会使得它的功能更加巨大，但正是这一点使得打开的速度变慢。图2-3 Firefox浏览器结构图WebKit在业界以速度快闻名的，并且它的标准被大众接受，所以大多数开发者和工程师会用它。基于它的浏览器，主要是以谷歌公司的Chrome以及Apple的Safari浏览器为代表。WebKit的内置结构，比较适合开发者进行编码和最终网页的编译，这种开发工具收到业内人士的认可。特别是大家发现IE浏览器存在的问题之后，不仅单核构建，更尝试去开发双核浏览器。以谷歌公司的Chrome浏览器为例，这一基于Webkit构造的浏览器对于HTML5的发展也起到了很大的作用。谷歌的开发者在成功解析Javascript之后，运用V8使得Chrome浏览器打开时速度提升。由于Chrome浏览器的渲染效果比其他浏览器好一些，打开速度也提升了，越来越多的用户就开始使用这一浏览器了。在软件市场内，随处都能见到Chrome软件，购买极其方便，这无疑更促进了Chrome的发展。国内市场于国外在这方面有些不同，因为国内的软件市场比较特殊，一些在国内开发的软件没办法在这一浏览器上运行，这给Chrome带来一定困难。下面是Chrome浏览器的结构图，相比其他功能强大的浏览器，它的结构还是比较简单的，而且整体性能结合的比较合理，使得它的吸引度依然很高，用户的评价都很不错。图2-4 Chrome浏览器架构图第3章 总体设计及程序功能分析3.1 需求分析在这款水果忍者的休闲游戏中，用户可以说饰演了一个非常反感水果的人物角色。当游戏开始后，画面里出现各种各样的水果，玩家可以通过操纵鼠标来作为刀子划破这些水果，如西瓜、桃子、草莓和香蕉。在进行游戏的同时，玩着可以查看左上方的分数，每划破一个水果加一分，到游戏结束的时候就可以看到自己的最终得分了。在画面的右上角会显示三个深蓝色的叉号，漏掉一个水果就会有一个叉号变红，当到达三个叉号都变红的时候就提示游戏结束了。不仅这样，只要你不小心划到任何一个炸弹，游戏都会结束，会回到主菜单。又要保证尽量把水果都切到，又要躲过所有的炸弹。3.2 程序总体功能设计3.2.1 程序功能模块分析该游戏可以分成两大部分：(1) 服务器端：主要完成数据的收集和分发(2) 客户端：主要对用户操作做出响应，绘制游戏场景、游戏的具体实现以及接受数据等。3.2.2 声音的控制分析根据游戏的需要播放声音以及停止声音，并且部分声音玩家在用鼠标切水果、炸弹爆炸、游戏结束时播放，游戏可以比较自如的播放出声音，并且声音较为流畅，增加画面的真实感。3.2.3 服务器客户端分析玩家通过浏览器直接打开游戏进行切水果，并且能够记录现在的得分以及查看以往的最高得分。为了实现这种功能，就要合理利用现存在的计算机架构，对其进行分析理解。目前为止，常用的架构主要有对等架构和客户端-服务器架构。下面详细介绍一下这两种架构。（1）对等架构。这种架构下，数据的传送只需要客户端就能实现，没有用到服务器。在架构刚刚建成时，可以与服务器建立一定的联系，使得客户端可以通过服务器知道相互的信息，然后就不会用到服务器了。这种架构具体有两种形式表现：一种是完整连接拓扑架构。这种情况下，每两个客户端都有连接，每一个客户端都可以直接与任何一个别的的客户端进行数据传送。另一种是环状拓扑架构。这种结构中所有的客户端都只和相邻的客户端相连，当客户端传送信息时，只能通过一个以上的客户端进行传送，信息不能直接到达。对等架构的优点很明显，就是延时很小。另外一种模型的信息传送比较费时，需要用到服务器端做中介来传送信息，相对来说比较复杂。而对等架构不需要服务器端，客户端之间可以直接传送需要的信息，这样就会省很多时间，效率也更高。而且，对等架构不用服务器对于开发者也是有利的，这样开发游戏的时候就不用考虑服务器这一方面，省了很多这方面的管理费用，而且也不用再费心去维持运行游戏中央服务器了。（2）客户端-服务器架构。这种架构需要用到服务器端，需要进行数据交流时，客户端可以先把数据传送到服务器上，需要的时候就可以从服务器端再传过来。服务器在运行时可以建立监听连接，当有客户端需要连接时，服务器会进行连接管理，并规划好怎样最合理的进行之后的信息传送。服务器会有一个对应的主机名称，也叫做IP地址，在一个或者多个端口进行服务。当服务器和客户端已经连接后，服务器就能在很长一段时间下与客户端维系这种交流的关系。这个接口是开放的，通过这一接口，不仅客户端可以将数据传递给服务器，服务器也可以讲信息反馈给客户端，实现双方数据的交流。3.3 程序流程根据各自功能的不同，本程序可以分为以下三部分独立的流程：(1) 客户端界面控制流程。首先设置定时器，当触发时重新绘制当前的界面。在首次创建时，要检测是否已经成功连接到了服务器，才能获取到信息去显示整个画面，之后会发送数据到服务器端。如图3-1所示，就是客户端界面控制流程图。开始定时器触发否是否成功连接到服务器是获取图像数据绘制图像获取水果数据绘制水果信息生成当前切水果的实例，并发送数据到服务器端结束图3-1 客户端打开后连接服务器生成图像流程图(2) 服务器端流程。当服务器接收到客户端传来的数据时，如果数据发生了改变，这将作为事件的触发句柄，服务器会对这些数据做出相应的反应，在处理完信息之后会将数据发送给客户端。 服务器端流程如图3-2所示。 图3-2 服务器端具体过程(3) 客户端数据发送流程。每次当水果位置位置发生变化或背景发生变化，则会重新触发方法，向服务器发送新的数据。如图3-3所示，为客户端数据发送流程。开始是否水果的位置或者背景信息发生了变化是发送水果位置给服务器端否是否切开炸弹否是发送信息给服务器端，继续游戏结束 图3-3 客户端数据发送流程3.4 模块及对应的方法该游戏主要有游戏主菜单的绘制、算法的实现、数据的载入等功能。分为基础类模块ClassLayer、游戏主函数模块ClassGame、场景模块ClassScene、水果模块ClassFruit和声音控制模块ClassSound。ClassLayer模块中有createImage()方法可以加载读取图片，createText()方法可以传送文字信息。 图3-4 ClassLayer模块方法图ClassGame模块是该游戏中最重要的类，其中有主入口函数init()、当服务器器打开方法onopen()、接收数据方法onmessage()、鼠标事件控制方法installClicker()、游戏开始方法start()、加分函数applyScore()、游戏结束函数gameOver()和游戏总的时间触发器remove()。图3-5 ClassGame模块方法图ClassScene模块负责游戏的场景其中有选择场景方法switchSence()、显示菜单方法showMenu()、返回主页方法hideMenu()、重新游戏方法showNewGame()。图3-6 ClassScene模块方法图ClassFruit模块负责对游戏中的水果进行控制，主要有分开函数apart()、抛出函数shotOut()、掉落函数fallOff()、移动函数remove()。图3-7 ClassFruit模块方法图ClassSound方法是声音控制类，有基本控制声音的方法，播放声音play()和暂停播放stop()等方法。 图3-8 ClassSound模块方法图第四章 详细设计4.1 服务器端的运行环境该游戏是在window7操作系统下的服务器端实现的，游戏的正常运行需要保证数据的实时性，所以在处理数据时要考虑到下面的几点：背景数据。服务器端要保证早就收到背景信息，在用户打开网页时，不管是在哪台机器上数据都是一样的。水果数据。当客户端从服务器端读取到各种水果的信息时，会通过一系列的解析之后把信息写到数组中，之后从这个数组中读取水果的信息，然后根据这些数据进行相应的操作。炸弹信息。在切开炸弹时，发生爆炸，信息要实时传输。 这些信息的变化都是因为在运行时有事件触发，这种形式的交流实时性比较强，并且交流的次数较少，不仅缩短时间又能提高效率。 以下代码就是对服务器端主题功能的简单实现过程： 4.2 场景控制在本游戏中用到的脚本是被用来专门进行场景切换的，它通过一个接口可以让用户选择场景后实现场景的切换，switchSence 的接口下设置有“主菜单”、“游戏界面”以及“退出游戏”等场景。对于解决游戏场景的图层问题就要用到layer.js，管理图层是比较复杂的，其中两个关于图层的接口toFront和toBack是核心，通过这两个接口可以简单实现图层管理。但是想要精准定位场景里元素的是那个图层里的就不行了，所以就要用到图层mapping，在这个图层里纪录着每一个图层的位置元素z，每个元素在哪个图层中都详细记载着，搜索起来既方便又快捷。背景信息以及水果的各种信息都被存储在服务器的数据组里，这些数据以二维数据方式存放着，并以二维图的形式表现出来。客户端从服务器那接收到信息之后，通过进一步处理，将数据对应的画面呈现出来。绘制出的菜单效果如图4-1，游戏开始后的画面如图4-2：图4-1 水果忍者的菜单图像 图4-2 水果忍者的游戏画面以下代码实现了场景基本绘制的功能：4.3 水果与刀碰撞的原理当水果的信息传送到服务器时，这一事件会触发服务器读取信息的方法，这个方法会改变传送来的水果的值的信息。在下一次绘制场景的时候，这些新的数据就会被用来重新使用。collide 模块是游戏的碰撞检测模块，它通过计算线段和椭圆的位置关系来进行碰撞判断，在游戏中刀子划过的痕迹就是线段，而水果的整个图像看作是椭圆的图像。以下代码实现了碰撞的基本功能： 4.4 读取服务器端爆炸信息 在游戏过程中，不时在水果中会掺杂出现炸弹，出现的位置和时间都是随机的，使用户出其不意，一旦切到炸弹就会发生爆炸。所以用户在游戏过程中，要在切破所有水果的同时预防炸弹被切到爆炸。当炸弹的信息传送到服务器时，这一事件会触发服务器读取信息的方法，这个方法会改变传送来的炸弹的值的信息。在下一次绘制场景的时候，这些新的炸弹数据就会被用来重新使用。当判断出下一步是鼠标划破炸弹时，就会发生爆炸，并发送到服务器器端，服务器则会分发给客户端。这样游戏就结束了，开始回到最初的界面。爆炸出的效果如图4-3。 图4-3 炸弹爆炸时的图像以下代码实现了爆炸的基本功能： 4.5 查看得分与最高纪录该游戏使用的是 commonJS 的标准来管理这些模块，不同的模块之间是相互联系的，在这些模块中，message是解藕的，它是作为消息管理模块被使用，在这个模块中有postMessage 发送数据接口和 addEventListener 接收数据接口。除此之外，state也起到相似作用，它作为状态管理模块，提供的接口用来对状态进行读写。 以下代码实现了查看得分的基本功能： 第5章 系统测试 5.1 测试环境本系统在如图5-1的环境下进行测试： 图5-1 环境测试图 5.2 兼容性测试当前的主要几种浏览器兼容性测试，分别针对浏览器的功能以及显示样式两方面进行测试，测试结果如图5-2所示：图5-2 兼容性测试图 结束语该课题是对HTML5这一最技术的实践，如今互联网改革的速度这么快，这一新技术无疑能满足用户的新要求，衍生出新的应用，带来更高的商业价值。本课题就是适应用户的这种需求，该水果忍者网页版游戏，可以在网页中直接打开运行，跨浏览器兼容，与其他的技术相比，是占据很大优势的。在看到HTML5的巨大优势之后，现在各大浏览器都很重视这方面的研究，不仅仅在电脑上各大浏览器的努力，各种平板以及手机浏览器也在变革。现在互联网的架构在不断改进，这就需要新的技术来支持。这将意味着一个新的时代到来了，互联网将会比以往任何时候更普及，更能为大家带来便利。虽然现在HTML5的强大功能还没有完全展示出来，但可以肯定的是，在未来会得到充分体现，各种设备的技术都会用到。未来的会联网将是全方位的，尤其是在那些发展比较快的行业中。未来的互联网不仅仅属于一小部分人，它会出现在各种人群中，是属于所