毕业论文-基于 HTML5 与 Nodejs 开发实时性网页对战游戏坦克大战

密级：公开基于HTML5与Nodejs开发实时性网页对战游戏坦克大战TheDevelopmentofBattleCityWebPageGameBasedonHTML5andNodejs学院：信息科学与工程学院专业班级：计算机科学与技术0703班学号：070405066学生姓名：王潇指导教师：无2011年06月

摘要随着互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式也开始不断的变化，越来越多的应用可以直接以浏览器打开的方式使用，数据则是存储在云端，更加的安全可靠，方便用户共享数据。在各种应用不断的趋于更加网络话的同时，一种新的技术标准也随之产生，那就是HTML5（HTML是一种标记语言也是一种标准，互联网开发居于此）。HTML5是近十年来Web（互联网）标准最巨大的飞跃，和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图象和动画，以及同电脑的交互都被标准化。也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的富客户端，这个客户端可以在移动终端、PC（个人计算机）或者其他可以有网络的地方轻松的运行。所以此时研究HTML5，并且大胆的实践有着重要的意义。课题内容是使用HTML5技术基于Web的环境来制作一个网络版的“坦克大战”游戏应用，该游戏使用了HTML5中的Canvas（画布）、WebSocket（HTML5中最新使用的一种网络连接协议，用于实时通讯）、Audio（HTML5中控制声音的技术）等最新的技术。目前HTML5标准尚未成熟，很多地方仍在变动，API（应用程序接口）仍不是很稳定，所以还无法真正的完全商用或者全部普及开，但这并不会影响我们来研究它。服务器端采用的Nodejs（一种Javascript程序语言框架，可以在服务器端运行Javascript语言）这种新型的框架来开发，Nodejs使用Javascript语言来开发，使整个应用从客户端到服务器端编程都是使用Javascript，大大的减少学习成本和开发成本，并且Nodejs性能强大，有很大的研究价值。该游戏服务器运行后，用户可以直接通过浏览器打开，实时的同其他玩家在游戏中对战，简单高效并且有声音和实时性的数据传输。用户可以用键盘控制自己的坦克，在地图中和自己的队友配合去攻击另一队的坦克来获取胜利，整个游戏趣味性很强。关键词：HTML5；互联网实时性通信；Nodejs；网络游戏I

AbstractWiththeincreasingdevelopmentoftheInternettechnologyandtheconstantlyrisingofthecomputerperformance,dmoreapplicationcanbedirectlyuseinthewayofopeningthebrowser,dataarestoredintheclouds,andthereforeit’ametimeofvariousapplicationcontinuouslytendstobemorewebified,anewstandardoftechnologyisproduced,5isthemostgiantleapofWe5isnotonlyusedtoexpressthecontentoftheWeb,meanwhile,itsmissionistobringtheWebintoamatureapplicationplatform,onwhichthevideo,audio,imageandanimation,tosaythatthroughtheopeentcanbeoperatedinthemobileterminal,ore,tentsofthesubjecttopicsistousetheHTML5createaWebeditionof"tankwar"eoperatestheCanvas,WebSocket,ent,thestandardsofHTML5havenotyetmatureandsomepointsarestillinthevariationandAPIstillisnotverystable,soitcan'r,verisusedNodejs,anewJavascriptframework,isusedJavascripttodevelop,whichmakeswholeapplication,fromtheclienttotheserver,usingJavascripttoprogram,ile,heoperationofthegame,userscandirectlyopenitthroughthebrowserandagainstwithotherplayers,withasimple,effective,anusethekeyboardtocontroltheirds:HTML5;internetreal-timecommunications;Nodejs;onlinegamesII

目摘录要................................................................................................................................II第1章引言..........................................................................................................................11.1课题的目的和意义..................................................................................................11.2国内外发展现状......................................................................................................21.3课题主要的内容和功能介绍..................................................................................41.3.1课题主要的内容...........................................................................................41.3.2坦克大战游戏功能介绍...............................................................................5第2章相关技术及开发方法简介.......................................................................................62.1相关技术简介.........................................................................................................62.1.1HTML5标准简述及意义..............................................................................62.1.2网络实时性技术及72.1.3Nodejs简介.................................................................................................112.2开发工具及运行环境............................................................................................132.2.1Web开发工具和Aptana简述.....................................................................132.2.2浏览器发展和Chrome浏览器介绍...........................................................14第3章游戏玩法设计和需求分析.....................................................................................173.1游戏玩法设计........................................................................................................173.2需求分析...............................................................................................................173.2.1系统角色.....................................................................................................173.2.1用例分析.....................................................................................................17第4章总体设计及程序功能分析.....................................................................................184.1程序总体功能设计................................................................................................184.1.1程序功能模块分析.....................................................................................184.1.2地图读取及共享分析.................................................................................194.1.3声音的控制分析.........................................................................................194.1.4联网对战分析.............................................................................................194.2程序流程...............................................................................................................204.3模块及对应的方法................................................................................................22第5章详细设计................................................................................................................265.1服务器端设计........................................................................................................265.1.1服务器端的运行环境.................................................................................265.1.2服务器端的设计.........................................................................................26I

5.1.3服务器端部分代码.....................................................................................275.2地图功能模块........................................................................................................285.2.1读取地图.....................................................................................................285.2.2绘制地图.....................................................................................................285.2.2地图模块部分代码.....................................................................................295.3坦克模块的设计....................................................................................................315.3.1读取服务器端信息.....................................................................................315.3.2控制坦克.....................................................................................................315.3.3绘制画面.....................................................................................................315.3.4坦克模块的部分实现代码..........................................................................315.4炮弹模块的功能....................................................................................................355.4.1读取服务器端信息.....................................................................................355.4.2碰撞检测.....................................................................................................355.4.3击毁功能.....................................................................................................355.4.4绘制画面.....................................................................................................355.5客户端与服务器端通信........................................................................................35第6章结论........................................................................................................................37参考文献........................................................................................................................38致谢..............................................................................................................................40II

第1章引言1.1课题的目的和意义随着互联网的不断发展，互联网对人们的生活也在不断地变化和加强，人们渐渐地已经开始习惯于互联网所带来的各类服务与应用，并且享受着它带来的便利和丰富。当然随着互联网的基础用户和开发者不断增多，人们不断地去创造和完善它的速度也越来越快，无论从技术层面还是商业层面，新的模式和方法层出不穷，整个行业新陈代谢不断加速，新的应用和新的公司不断地挑战着新的技术和新的模式，由于整个行业存在创业成本很低、技术成本门槛却较高等特点，大公司也不断地推动着新的技术，基于此来创建一定的技术壁垒，同时基于此建立全新的服务和技术。但是毕竟整个互联网是一个开放的环境，大家需要一种标准，而不是一家独大的竞争下去，这样就一定会失去民心，所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。HTML5是近十年来Web标准最巨大的飞跃，和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图象和动画，以及同电脑的交互都被标准化。尽管HTML5的实现还有很长的路要走，但HTML5正在改变Web。另外，目前的互联网不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用，如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用，未来必将也会改变人们生活的方方面面。HTML5中也加入了以上各类新的元素和功能，同时也考虑到了非健全人事使用互联网时可能带来的问题[1]。所以，研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇，而基于这个变革的年代去使用类似的技术来创造更多新的应用更是能够改变这个世界的一次机会。该课题是基于HTML5来做一个最佳实践，完成之前不可能使用WEB技术来完成的功能，性能照比之前的技术体系要高出很多，而且有足够的前瞻性和创新性。互联网和其他的行业最大的区别就是这是一个创新驱动并且快速变化的行业，一种新的技术可能就会创造出新的应用、新的商业模式，该课题是基于HTML5技术在Web环境中实现的一个实时性的联网游戏，通过使用HTML51

中的WebSocket来实现实时性，这无疑是对最新技术的一次最佳实践和学习，也是对自己的能力的一次历练。一个联网的游戏最难解决的问题无疑就是实时性的问题，同步数据的数量、何时同步数据，这些都是需要认真思考和设计的，不仅仅是简单的程序设计，而是复杂度较高真正的软件工程。游戏软件是计算机诞生之后就开始有的产物，最开始是一些计算机极客们无聊时写着玩的代码，渐渐地发展成为了一个巨大的产业，游戏软件由最开始的单机版游戏逐渐发展为大型的网游，但是随着整个行业新生模式的诞生，尤其是如SNS、微博等新型的以人与人关系类的网络，游戏也在向着小型互动的SNS型转变，这样的游戏有着互动性强，直接在网页中运行，用户体验较简单容易，就如之前风靡一时的“偷菜”类游戏。游戏可以带给人们快乐，可以使人们享受与人配合交流的快乐，也可以是打破尴尬的一种方式。对于程序员而言能够编写一个游戏程序带给用户快乐，这无疑也会带给自己成就感并且是一件很有意义和价值的事情。1.2国内外发展现状HTML的发展历经了多个年代，但时间其实不过也在20年左右。1993年HTML首次以因特网草案的形式发布。20世纪90年代的人见证了HTML的大幅发展，从2.0版，到3.2版和4.0版，再到1999年的4.01版。随着HTML的发展，W3C（万维网联盟）掌握了对HTML规范的控制权。然而在快速发布了这四个版本之后，业界普遍认为HTML已经到了穷途末路，对Web标准的焦点也开始转移到了XML（一种数据存储的形式）和XHTML（XHTML类似HTML的一种标记语言，也同样是Web开发的一个标准，要求页面结构像XML一样严谨）上，HTML被放到了次要的位置。不过在此期间，HTML体现了顽强的生命力，主要的网站内容还是基于HTML的。为能支持新的Web应用，同时克服现有的缺点，HTML迫切需要添加新的功能，制定新的规范。致力于将Web平台提升到一个新的高度，一小组人在2004年成立了WHATWG（Web超文本应用技术工作组）。他们创立了HTML5规范，同时开始专门针对Web应用开发新的功能，这被WHATWG认为是HTML中最薄弱的环节。Web2.0实至名归，开创了Web的第二时代[2]。旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站，这些网站中的新功能数不胜数。20062009年，年W3C又重新介入HTML，并于2008年发布了HTML5的工作草案。2

XHTML2工作组停止工作。2010年因为HTML5能解决非常实际的问题，所以在规范还未定稿的情况下，各大浏览器厂家就已经按耐不住了，开始对旗下产品进行升级以支持HTML5的新功能。得益于浏览器的实验性反馈，HTML5规范也得到了持续的完善，HTML5以这种方式迅速融入到了对Web平台的实质性改进中。到目前为止HTML5规范已经以工作草案的形式发布了，但还不是最终版本，不过现在在移动终端和Apple公司为主的产品的推动下，HTML5已经得到了广泛的使用[3]。HTML5草案的前身名为WebApplications1.0，是在2004年由WHATWG提出，再于2007年获W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。目前Firefox、Chrome、Opera、Safari（版本4以上）及InternetExplorer9已支持HTML5技术（Firefox、Chrome、Opera、Safari和InternetExplorer9均为浏览器品牌）。尽管HTML5已经在网络开发人员中非常出名了，但是它成为主流媒体的一个话题还是在2010年的4月，当时Apple公司的CEO乔布斯发表一篇题为“对flash的思考”的文章，指出随着HTML5的发展，观看AdobeFlash将不再是必须的。视频或其它内容时，这引发了开发人员间的争论，包括HTML5虽然提供了增强的功能，但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同，以及HTML5和Flash间的功能差异。HTML5的标准草案目前已进入W3C制定标准5大程序的第1步。负责编纂标准格式文件的Google公司的代表IanHickson预期，可能得等到2012年才会推出建议候选版（W3CCandidateRecommendation）[4]。据美国知名科技博客网站TechCrunch报道，Facebook（一家美国的社交网站，现在被誉为全世界最火的网站）已秘密制定了一项名为“斯巴达”（ProjectSpartan）的移动平台服务计划，此举意在以全新方式向苹果iOS平台（苹果公司的移动终端操作系统）和Google的Android平台（Google公司的移动终端操作系统）以及相关移动服务发起强有力的挑战。“斯巴达”目前仍然属于Facebook秘密开发的产品，目前确切可知的消息是“斯巴达”是一款基于HTML5技术标准的移动服务平台，目标群目前锁定为使用移动版Safari浏览器的iPhone手机和iPad用户。目前已知的“斯巴达”平台的工作原理是：该平台基于HTML5技术，而Safari浏览器又对HTML5有比较好的支持，用户通过Safari访问“斯巴达”平台后，不仅能够在该平台使用Facebook的基本服务，还能够获取使用由3

外部开发者基于该平台开发的相关应用程序。而且微软的说法最新的Windows8（微软的下一代操作系统）将会支持两种应用，其一是传统桌面应用程序，另外就是HTML5网络应用。Windows8中通过InternetExplorer10（微软下一代浏览器）作为其HTML5应用核心，所有现有的Windows程序将支持ARM（ARM是一种处理器架构，也是一种处理芯片）片上系统架构。微软称将给开发者提供Windows8HTML和JavaScript应用开发的API和SDK（SoftwareDevelopmentKit，即软件开发工具包）。HTML5无疑是客户端的发展的一个巅峰，但是服务器端的变化也是显著的，从之前的CGI（CommonGatewayInterface，通用网关接口，在物理上是一段程序，运行在服务器上，提供同客户端HTML页面的接口）到JAVA、J2EE（一种商用的JAVA开发框架，更是一种软件生产标准），再到LAMP（Linux+Apache+Mysql+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台）和RubyonRails（RubyonRails是一个可以使你开发，部署，维护Web应用程序变得简单的框架，基于Ruby语言），随着HTML5的兴起下一个服务器端架构将会诞生，再次改变技术圈的架构。本课题使用了较为有前景的一个全新的架构Nodejs，Nodejs是一个Javascript运行环境。实际上它是对GoogleV8引擎进行了封装（GoogleV8引擎是用来解析Javascript的专用运行环境，以速度快著称）。V8引擎执行Javascript的速度非常快，性能非常好。Nodejs对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。Nodejs也是刚刚兴起的一种服务器端的开发架构，使得Javascript能够在服务器端运行，而且由于Javascript的函数式编程等特性，基于非阻塞式的编程更加的有优势。国内研究比较超前的是淘宝的CNodejs团队，他们做了大量测试、实践和分享。1.3课题主要的内容和功能介绍1.3.1课题主要的内容课题主要的内容包括：(1)使用HTML5Cavans来开发动画效果。(2)基于HTML5WebSocket的实时数据传输。(3)服务器端Nodejs的使用。4

(4)基于HTML5Audio来实现控制声音。(5)网络实时性游戏的设计和实现。(6)地图的绘制与实时性地图的控制。1.3.2坦克大战游戏功能介绍玩家打开浏览器，输入地址即可进入坦克大战游戏并进入联机状态，联机后将会被自动分配到黄方或者绿方，玩家可以通过键盘控制自己的坦克，黄、绿双方各自将会以消灭对方为己任，互相攻击。游戏可以负载多人，地图可以在服务器端通过修改数组改变。5

第2章相关技术及开发方法简介2.1相关技术简介2.1.1HTML5标准简述及意义HTML5是HTML下一个的主要修订版本，现在仍处于发展阶段。目标是取代1999年所定订的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-basedrichinternetapplication，RIA)，如AdobeFlash（Adobe公司的一种技术体系，使用ActionscriptMicrosoftSilverlight语言，开发后生成的程序以插件形式在浏览器端运行）、（微软公司的一种技术，同样是以插件形式在浏览器端运行），与OracleJavaFX（基于JAVA的一种技术，SUN公司被Oracles收购后归于Oracle公司，以插件形式在浏览器端运行）的需求，并且提供更多能有效增强网络应用的标准集。HTML5添加了许多新的语法特征，其中包括