欢迎来到三一文库! | 帮助中心 三一文库31doc.com 一个上传文档投稿赚钱的网站
三一文库
全部分类
  • 研究报告>
  • 工作总结>
  • 合同范本>
  • 心得体会>
  • 工作报告>
  • 党团相关>
  • 幼儿/小学教育>
  • 高等教育>
  • 经济/贸易/财会>
  • 建筑/环境>
  • 金融/证券>
  • 医学/心理学>
  • ImageVerifierCode 换一换
    首页 三一文库 > 资源分类 > DOC文档下载  

    基于HTML5的WEB环境下坦克大战游戏软件的开发 毕业论文.doc

    • 资源ID:3920575       资源大小:882.52KB        全文页数:43页
    • 资源格式: DOC        下载积分:6
    快捷下载 游客一键下载
    会员登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录 QQ登录   微博登录  
    二维码
    微信扫一扫登录
    下载资源需要6
    邮箱/手机:
    温馨提示:
    用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)
    支付方式: 支付宝    微信支付   
    验证码:   换一换

    加入VIP免费专享
     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    基于HTML5的WEB环境下坦克大战游戏软件的开发 毕业论文.doc

    基于HTML5的WEB环境下坦克大战游戏软件的开发The Development of Battle City Game Software Based on HTML5 Web Environment摘 要随着互联网技术的不断发展和计算机性能的不断提升,用户享受互联网的方式也开始不断的变化,越来越多的应用可以直接以浏览器打开的方式使用,数据则是存储在云端,更加的安全可靠,方便用户共享数据。在各种应用不断的趋于更加网络话的同时,一种新的技术标准也随之产生,那就是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;网络游戏II AbstractWith the increasing development of the Internet technology and the constantly rising of the computer performance, users also begin to enjoy the Internet in the constantly changed ways. More and more application can be directly use in the way of opening the browser, data are stored in the clouds, and therefore its more safe and reliable and continent for users to share data. In the same time of various application continuously tends to be more webified, a new standard of technology is produced, which is HTML5. HTML5 is the most giant leap of Web standards in nearly 10 years and it is different from the previous version.HTML5 is not only used to express the content of the Web, meanwhile, its mission is to bring the Web into a mature application platform, on which the video, audio, image and animation, and the interaction of computers are all standardized. That is to say that through the opening technology and standards HTML5 achieves a no plug-ins model of client. The client can be operated in the mobile terminal, PC or other places which have the network. Therefore, it has significance to study and boldly practice the HTML5.The contents of the subject topics is to use the HTML5 create a Web edition of "tank war" game application based on the environment of Web. The game operates the Canvas, WebSocket, Audio and some latest technology. At present, the standards of HTML5 have not yet mature and some points are still in the variation and API still is not very stable, so it can't be completely commercial or in a good popularization. However, we can still have a good study of it. The server is used Nodejs, a new Javascript framework, to develop. Nodejs is used Javascript to develop, which makes whole application, from the client to the server, using Javascript to program, greatly reduce the cost of learning and development costs. Meanwhile, Nodejs has the strong function and have the great value to study.After the operation of the game, users can directly open it through the browser and against with other players, with a simple, effective, voiced and data transmission of real-time. Users can use the keyboard to control their tanks and to attack another team to win the game with his teammates in the map. The whole game has a strong sense of interesting. Keywords: HTML5; internet real-time communications; Nodejs; online gamesII 目 录摘 要IAbstractII第1章 引言11.1 课题的目的和意义11.2 国内外发展现状21.3 课题主要的内容和功能介绍41.3.1 课题主要的内容41.3.2 坦克大战游戏功能介绍5第2章 相关技术及开发方法简介62.1 相关技术简介62.1.1 HTML5标准简述及意义62.1.2 网络实时性技术及WebSocket72.1.3 Nodejs简介112.2 开发工具及运行环境132.2.1 Web开发工具和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 服务器端的设计265.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致 谢40第1章 引言1.1 课题的目的和意义随着互联网的不断发展,互联网对人们的生活也在不断地变化和加强,人们渐渐地已经开始习惯于互联网所带来的各类服务与应用,并且享受着它带来的便利和丰富。当然随着互联网的基础用户和开发者不断增多,人们不断地去创造和完善它的速度也越来越快,无论从技术层面还是商业层面,新的模式和方法层出不穷,整个行业新陈代谢不断加速,新的应用和新的公司不断地挑战着新的技术和新的模式,由于整个行业存在创业成本很低、技术成本门槛却较高等特点,大公司也不断地推动着新的技术,基于此来创建一定的技术壁垒,同时基于此建立全新的服务和技术。但是毕竟整个互联网是一个开放的环境,大家需要一种标准,而不是一家独大的竞争下去,这样就一定会失去民心,所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。HTML5是近十年来Web标准最巨大的飞跃,和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图象和动画,以及同电脑的交互都被标准化。尽管HTML5的实现还有很长的路要走,但HTML5正在改变Web。另外,目前的互联网不仅仅是传统意义上面的互联网,所有的传统应用和模式正在向着更加移动和便捷发展,人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用,如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用,未来必将也会改变人们生活的方方面面。HTML5中也加入了以上各类新的元素和功能,同时也考虑到了非健全人事使用互联网时可能带来的问题1。所以,研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇,而基于这个变革的年代去使用类似的技术来创造更多新的应用更是能够改变这个世界的一次机会。该课题是基于HTML5来做一个最佳实践,完成之前不可能使用WEB技术来完成的功能,性能照比之前的技术体系要高出很多,而且有足够的前瞻性和创新性。互联网和其他的行业最大的区别就是这是一个创新驱动并且快速变化的行业,一种新的技术可能就会创造出新的应用、新的商业模式,该课题是基于HTML5技术在Web环境中实现的一个实时性的联网游戏,通过使用HTML5中的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。旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站,这些网站中的新功能数不胜数。2006年W3C又重新介入HTML,并于2008年发布了HTML5的工作草案。2009年,XHTML2工作组停止工作。2010年因为HTML5能解决非常实际的问题,所以在规范还未定稿的情况下,各大浏览器厂家就已经按耐不住了,开始对旗下产品进行升级以支持HTML5的新功能。得益于浏览器的实验性反馈,HTML5规范也得到了持续的完善,HTML5以这种方式迅速融入到了对Web平台的实质性改进中。到目前为止HTML5规范已经以工作草案的形式发布了,但还不是最终版本,不过现在在移动终端和Apple公司为主的产品的推动下,HTML5已经得到了广泛的使用3。HTML5草案的前身名为Web Applications 1.0,是在2004年由WHATWG提出,再于2007年获W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作,仍须多年的努力。目前Firefox、Chrome、Opera、Safari(版本4以上)及Internet Explorer 9已支持HTML5技术(Firefox、Chrome、Opera、Safari和Internet Explorer 9均为浏览器品牌)。尽管HTML5已经在网络开发人员中非常出名了,但是它成为主流媒体的一个话题还是在2010年的4月,当时Apple公司的CEO乔布斯发表一篇题为“对flash的思考”的文章,指出随着HTML5的发展,观看视频或其它内容时,Adobe Flash将不再是必须的。这引发了开发人员间的争论,包括HTML5虽然提供了增强的功能,但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同,以及HTML5和Flash间的功能差异。HTML 5的标准草案目前已进入W3C制定标准5大程序的第1步。负责编纂标准格式文件的Google公司的代表Ian Hickson预期,可能得等到2012年才会推出建议候选版(W3C Candidate Recommendation)4。据美国知名科技博客网站TechCrunch报道,Facebook(一家美国的社交网站,现在被誉为全世界最火的网站)已秘密制定了一项名为“斯巴达”(Project Spartan)的移动平台服务计划,此举意在以全新方式向苹果iOS平台(苹果公司的移动终端操作系统)和Google的Android平台(Google公司的移动终端操作系统)以及相关移动服务发起强有力的挑战。“斯巴达”目前仍然属于Facebook秘密开发的产品,目前确切可知的消息是“斯巴达”是一款基于HTML5技术标准的移动服务平台,目标群目前锁定为使用移动版Safari浏览器的iPhone手机和iPad用户。目前已知的“斯巴达”平台的工作原理是:该平台基于HTML5技术,而Safari浏览器又对HTML5有比较好的支持,用户通过Safari访问“斯巴达”平台后,不仅能够在该平台使用Facebook的基本服务,还能够获取使用由外部开发者基于该平台开发的相关应用程序。而且微软的说法最新的Windows 8(微软的下一代操作系统)将会支持两种应用,其一是传统桌面应用程序,另外就是 HTML5网络应用。Windows 8中通过 Internet Explorer 10(微软下一代浏览器)作为其 HTML5 应用核心,所有现有的 Windows 程序将支持 ARM(ARM是一种处理器架构,也是一种处理芯片)片上系统架构。微软称将给开发者提供 Windows 8 HTML和JavaScript 应用开发的API和SDK(Software Development Kit,即软件开发工具包)。HTML5无疑是客户端的发展的一个巅峰,但是服务器端的变化也是显著的,从之前的CGI(Common Gateway Interface,通用网关接口,在物理上是一段程序,运行在服务器上,提供同客户端HTML页面的接口)到JAVA、J2EE(一种商用的JAVA开发框架,更是一种软件生产标准),再到LAMP(Linux+Apache+Mysql+Perl/PHP/Python一组常用来搭建动态网站或者服务器的开源软件,本身都是各自独立的程序,但是因为常被放在一起使用,拥有了越来越高的兼容度,共同组成了一个强大的Web应用程序平台)和Ruby on Rails(Ruby on Rails是一个可以使你开发,部署,维护Web 应用程序变得简单的框架,基于Ruby语言),随着HTML5的兴起下一个服务器端架构将会诞生,再次改变技术圈的架构。本课题使用了较为有前景的一个全新的架构Nodejs,Nodejs是一个Javascript运行环境。实际上它是对Google V8引擎进行了封装(Google V8引擎是用来解析Javascript的专用运行环境,以速度快著称)。V8引擎执行Javascript的速度非常快,性能非常好。Nodejs对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。Nodejs也是刚刚兴起的一种服务器端的开发架构,使得Javascript能够在服务器端运行,而且由于Javascript的函数式编程等特性,基于非阻塞式的编程更加的有优势。国内研究比较超前的是淘宝的CNodejs团队,他们做了大量测试、实践和分享。1.3 课题主要的内容和功能介绍1.3.1 课题主要的内容课题主要的内容包括:(1) 使用HTML5 Cavans来开发动画效果。(2) 基于HTML5 WebSocket的实时数据传输。(3) 服务器端Nodejs的使用。(4) 基于HTML5 Audio来实现控制声音。(5) 网络实时性游戏的设计和实现。(6) 地图的绘制与实时性地图的控制。1.3.2 坦克大战游戏功能介绍玩家打开浏览器,输入地址即可进入坦克大战游戏并进入联机状态,联机后将会被自动分配到黄方或者绿方,玩家可以通过键盘控制自己的坦克,黄、绿双方各自将会以消灭对方为己任,互相攻击。游戏可以负载多人,地图可以在服务器端通过修改数组改变。第2章 相关技术及开发方法简介2.1 相关技术简介2.1.1 HTML5标准简述及意义HTML5是HTML下一个的主要修订版本,现在仍处于发展阶段。目标是取代1999年所定订的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash(Adobe公司的一种技术体系,使用Actionscript语言,开发后生成的程序以插件形式在浏览器端运行)、Microsoft Silverlight(微软公司的一种技术,同样是以插件形式在浏览器端运行),与Oracle JavaFX(基于JAVA的一种技术,SUN公司被Oracles收购后归于Oracle公司,以插件形式在浏览器端运行)的需求,并且提供更多能有效增强网络应用的标准集。HTML5添加了许多新的语法特征,其中包括<video>,<audio>,和<canvas>元素(<video>,<audio>,和<canvas>均为HTML5中的新标记),同时集成了SVG(HTML5中新加入的矢量图形实现方式)内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素包括<section>,<article>,<header>和<nav>(<section>,<article>,<header>和<nav>均为HTML5新添加的标记),是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>,<cite>和<menu>(<a>,<cite>和<menu>均为HTML标签)被修改,重新定义或标准化了。同时APIs和DOM(Document Object Model,文档对象模型)已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。HTML5提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。一些过时的HTML4标记将取消,其中包括纯粹用作显示效果的标记,如<font>和<center>(HTML中为数不多的具有修改样式属性的标签),因为它们已经被CSS取代。还有一些通过DOM的网络行为5。尽管和SGML(Standard Generalized Markup Language,标准通用标记语言)在标记上的相似性,HTML5的句法并不再基于它了,而是被设计成向后兼容对老版本的HTML的解析。它有一个新的开始行看起来就像SGML的文档类型声明,<!DOCTYPE html>(<!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前,此标签可告知浏览器文档使用哪种HTML或XHTML规范)这会触发和标准兼容的渲染模式。在2009年1月5号,HTML5添加了Web Form 2.0(处理表单的功能)的内容。HTML5还提供了许多新的应用程序接口(API),除了原先的DOM接口,HTML5增加了更多样化的API:(1) 实时二维绘图。Canvas API:有关动态产出与渲染图形、图表、图像和动画的API。(2) 定时媒体播放HTML5音频与视频:HTML5里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件。(3) 通信网络Communication APIs:构建实时和跨源(cross-origin)通信的两大基础: 跨文档通信(Cross Document Messaging)与 XMLHttpRequest Level 2。(4) Geolocation API:用户可共享地理位置,并在Web应用的协助下享用位置感知服务(location-aware services)。(5) Web SQL Database,一个本地的SQL数据库。(6) WebSocket,一个基于浏览器的socket(一种网络协议,支持所有的互联网通信),支持实时性的数据传输。(7) 其他:离线存储数据库(离线网络应用程序)、编辑、拖放等。2.1.2 网络实时性技术及WebSocket正常情况下,浏览器访问Web页面时,一般会向页面所在的Web服务器发送一个HTTP请求。Web服务器识别请求,然后返回响应。大多数情况下,如股票价格、新闻报道、余额查询、交通状况、医疗设备读取数据等,当内容呈现在浏览器页面上时,可能已经没有时效性。如果用户想要获得最新的实时信息,就需要不断地手动刷新页面,这显然不是一个明智的做法。目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet。Comet技术可以让服务器端主动以异步方式向客户端推送数据,它会使针对传输消息到客户端的响应延迟完成6。(1) 使用轮询。浏览器会定期发送HTTP请求,并随即接收响应,请求过程如图2-1。需要返回的数据需要返回的数据Time lineServerdatadatarequestrequestBrowser图2-1 传统网络连接通过轮询方式获取数据的过程图这项技术是浏览器在实时信息传送方面的首次尝试。显然,如果知道消息传递的准确时间间隔,轮询将是一个很好的办法,因为可以将客户端的请求同步为只有服务器上的信息可用时才发出。但是,实时数据往往不可预测,不可避免会产生一些不必要的请求,在低消息率情况下会有很多无用的连接不断地打开和关闭7。(2) 使用长连接。浏览器向服务器发送一个请求,服务器会在一段时间内将其保持在打开状态。如果服务器在此期间收到一个通知,就会向客户端发送一个包含消息的响应。如果时间已到却还没有收到通知,服务器会发送一个响应消息来终止打开的请求。然而,最关键的是,当信息量很大时,与传统轮询方式相比,长连接方式并无实质上的性能改善8。有需要推送的数据没有需要推送的数据有需要推送的数据没有需要推送的数据Time lineServerdatadatapollpollpoll收到数据后再次发起poll收到数据后再次发起pollBrowser图2-2 传统网络连接通过长连接方式获取数据的过程图(3) 使用流解决方案。浏览器会发送一个完整的HTTP请求,但服务器会发送并保持一个处于打开状态的响应,该响应持续更新并无限期或是在一段时间内处于打开状态。每当有消息可发送时,该响应就会被更新,但服务器永远不会发出响应完成的信号,这样连接就会一直保持在打开状态以便后续消息的发送。但是,由于流仍是封装在HTTP中,其间的防火墙和代理服务器可能会对响应消息进行缓冲,造成消息传递的延时。因此,当检测到缓冲代理服务器时,许多流解决方案就回退到长连接方式。此外,可利用TLS、SSL连接来保护响应不被缓冲,但在这种情况下,每个连接的创建和清除会消耗更多的服务器资源9。综上所述,所有这些提供实时数据的方式都会涉及HTTP请求和响应报头,其中包含有大量额外的、不必要的报头数据,会造成传输延迟。最重要的是,全双工连接需要的不仅仅是服务器到客户端的下行连接。为了在半双工HTTP的基础上模拟全双工通信,目前的许多解决方案都使用了两个连接:一个用于下行数据流,另一个用于上行数据流。这两个连接的保持和协作也会造成大量的资源消耗,并增加了复杂度。简而言之,HTTP技术并不是为了实现实时全双工通信设计的。当开发人员试图对上述方案继续扩展时,情况会变得更糟。模拟基于HTTP的双向浏览器通信是非常复杂和易错的,而且复杂度不可控。虽然最终用户感觉WEB应用像是实时的,但是这种“实时”体验的代价非常高,包括额外的时间延迟、不必要的网络流量和CPU性能消耗10。WebSocket实现了通过浏览器直接于服务器形成全双工连接。WebSocket是HTML5一种新的协议,它实现了真正的浏览器与服务器全双工通信(full-duplex)。WebSocket请求过程如图2-3。需要返回的数据没有需要推送的数据有需要推送的数据没有需要推送的数据ServerTime linedatadatarequestBrowser图2-3 网络连接通过WebSocket方式获取数据的过程图 WebSocket是HTTP协议的扩展,用HTTP握手之后,服务器和浏览器就使用这条HTTP链接下的TCP连接来直接传输数据,抛弃了复杂的HTTP头部和格式,WebSocket的格式是基于帧(Frame)的,最小的帧只有2个字节。在文本帧中,每一帧始于0x00直接,止于0xFF字节,数据使用UTF-8编码。与long polling相比,通信的次数虽然一样多,但是Web Socket的帧头的标记部分也比long polling的request的header部分简洁得多(几个字节与几K字节的差别)。为了建立WebSocket通信,客户端和服务器在初始握手时,将HTTP协议升级到了WebSocket协议,一旦连接建立成功,就可以在全双工模式下在客户端和服务器之间来回传送WebSocket消息。这就意味着,在同一时间、任何方向,都可以全双工发送基于文本的消息11。2.1.3 Nodejs简介Nodejs是一个Javascript运行环境。实际上它是对Google V8引擎进行了封装。V8引擎执行Javascript的速度非常快,性能非常好。Nodejs对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。例 如,在服务器环境中,处理二进制数据通常是必不可少的,但Javascript对此支持不足,因此,V8.Node增加了Buffer类,方便并且高效地处理二进制数据。因此,Nodejs不仅仅简单的使用了V8,还对其进行了优化,使其在各环境下更加实用12。Nodejs的运行架构如图:图2-4 Nodejs的运行架构图V8引擎本身使用了一些最新的编译技术。这使得用Javascript这类高级语言编写出来的代码与用C这类低级语言写出来的代码性能相差无几,却节省了开发成本。对性能的苛求是Nodejs的一个关键因素。Javascript是一个事件驱动语言,Nodejs利用了这个优点,编写出可扩展性高的服务器。Nodejs采用了一个称为“事件循环(event loop)”的架构,使得编写可扩展性高的服务器变得既容易又安全。提高服务器性能的技巧有多种多样,Nodejs选择了一种既能提高性能,又能减低开发复杂度的架构。这是一个非常重要的特性,并发编程通常很复杂且布满地雷,Node绕过了这些,但仍提供很好的性能13。图2-5 Nodejs在处理数据时带来性能提升的比例图Nodejs采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。当你向文件系统发送一个请求时,无需等待硬盘寻址并检索文件,硬盘准备好的时候非阻塞接口会通知Nodejs。该模型以可扩展的方式简化了对慢资源的访问,直观,易懂。尤其是对于熟悉onmouseover、onclick等DOM事件的用户,更有一种似曾相识的感觉。虽然让Javascript运行于服务器端不是Node的独特之处,但却是其一强大功能。不得不承认,浏览器环境限制了我们选择编程语言的自由。任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。虽然还存在其他一些支持Javascript在服务器端运行的平台,但因为上述特性,Node发展迅猛,成为事实上的平台。2.2 开发工具及运行环境2.2.1 Web开发工具和Aptana简述由于Web开发所作出的程序需要在Web浏览器上面来观看效果,所以调试和编译运行等过程主要由浏览器或者后端服务器来完成,这样使得Web开发工具的主要功能其实就是一个编辑器。Web开发工具渐渐的分为两大类,一类是基于编辑器的,如Editplus、Vim等,另一个则是由Eclipse构建的14。编辑器类以Editplus为例,主要是对编程过程中的代码高亮显示,而且可以提供自定义模板等功能,提高编程效率。而且Editplus打开速度很快,功能强大,很多Web工程师喜欢15。Eclipse则是由IBM研发的大型集成化编译环境(IDE),原本主要用于编写大型的Java程序,后来IBM将其变为开源项目,而且Eclipse以插件的机制可扩展,所以强大的扩展性,使其定制灵活,所以后续有很多基于Eclipse开发的IDE。如编写PHP的ZendStdio、编写Actionscript的FlashDevelop等。虽然Eclipse功能强大,但是打开速度较慢,系统内存消耗较大。Aptana正是基于Eclipse开发的一款强大的IDE,对HTML5和Javascript有强大的支持,很好的代码高亮显示和代码提示功能,且运行稳定、扩展性强。Aptana不仅仅支持HTML5和Javascript,同时也支持Ruby、Python等Web编程语言。其最广为人知的是它非常强悍的Javascript编辑器和调试器,去年Aptana吸收了Radrails项目,添加了非常强大的Ruby on Rails支持。但是Aptana前进的脚步并未停止。随着苹果公司iPhone手机的发布,Aptana也推出了功能完备的iPhone集成开发功能,在Adobe公司的RIA产品AIR推出不久之后,Aptana就支持了AIR的开发环境。 所以Aptana是Web开发工程师手中的一把利器,但是它仍然继承了Eclipse家族打开速度较慢、运行需要资源量较多等缺点。如图2-6是Aptana的集成开发界面,整个界面默认背景色为黑色,代码默认色就是根据色彩明暗度变化比例,组成最利于编程人员的颜色。这种颜色搭配要比白色配黑色更能使眼睛不易疲劳。图2-6 Apt

    注意事项

    本文(基于HTML5的WEB环境下坦克大战游戏软件的开发 毕业论文.doc)为本站会员(小小飞)主动上传,三一文库仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知三一文库(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    经营许可证编号:宁ICP备18001539号-1

    三一文库
    收起
    展开