基于HTML5的手机实时游戏设计与实现Word文档下载推荐.docx
- 文档编号:6485990
- 上传时间:2023-05-06
- 格式:DOCX
- 页数:38
- 大小:1.51MB
基于HTML5的手机实时游戏设计与实现Word文档下载推荐.docx
《基于HTML5的手机实时游戏设计与实现Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《基于HTML5的手机实时游戏设计与实现Word文档下载推荐.docx(38页珍藏版)》请在冰点文库上搜索。
毕业论文(设计)成果归中南财经政法大学所有。
特此声明。
作者专业
电子商务(技术方向)
作者学号
作者签名
年月日
基于HTML5的手机实时游戏设计与实现
Thedesignandimplementationof
mobilephonerealtimegamebased
onHTML5
2012年4月20日
摘要
HTML5是下一代互联网的web标准,和以前的版本不同,HTML5并非仅仅用来表示Web内容,它将使Web进入一个成熟的应用平台,在这个平台上,视频、音频、图像和动画,以及同电脑的交互都被标准化。
随着Adobe宣布停止Flash移动版开发,不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。
作为新一代的网页语言,HTML5跨平台的支持得到不断增强,智能手机的迅速普及加上资费和网络速度的逐渐松绑,也为HTML5技术提供了良好的发展环境。
HTML5“可以实现跨平台游戏编码移植”的特性使其成为移动游戏开发者新的选择。
在国际上,Zynga、SPILGAMES、Disney都已经在HTML5游戏方面进入了实践阶段,Google、APPLE,微软也明确表示对HTML5的移动设备支持。
可见,HTML5已成为游戏开发的重要趋势之一。
本文通过对HTML5新特性的介绍结合具体的开发实例的设计与实现,以加深对HTML5的认识,掌握手机游戏开发的基本流程,并对遇到的开发问题做必要分析。
就HTML5应用的研究开发提出了个人的看法并对HTML5手机游戏开发前景重点做出展望。
本文的写作将分为四部分:
第一部分将首先阐述本文的的研究目的和意义,国内外研究现状分析。
第二部分主要是对本文用到的关键技术的介绍以及本文实例开发中的环境配置的方法。
第三部分为实例开发部分,在这里我们将利用HTML5的一些新特性结合nodejs的技术做一个简单的五子棋游戏,以加深对HTML5游戏开发的了解,并对当中遇到的问题进行分析与解决。
第四部分是对本文写作的总结与展望。
本文的创新点是利用最热门的HTML5技术结合nodejs的实时交互技术做一个手机实时游戏,通过对游戏的实现,更加清晰地阐述HTML5的优缺点,并且提出一些开发HTML5游戏时应该注意的问题和解决方法,以给后来者一些经验和教训。
关键词:
HTML5;
nodejs;
手机网络游戏;
Abstract
HTML5isthenextgenerationofInternetwebstandards,andcomincontrastwiththepreviousversion,HTML5isnotonlyusedtorepresentWebcontent,itwillenabletheWebintoafull-fledgedapplicationplatform,inthisplatform,video,audio,imagesandanimations,aswellasinteractionwiththecomputerarestandardized.AsAdobeannouncedtheendtosupporttheFlashmobileversionofthedevelopment,manypeoplepredictedthedevelopmentofHTML5mobileInternetindustrywillbringprofoundchangesintherevolutionary.Asanewgenerationofweblanguage,HTML5cross-platformsupporthasbeengrowing,therapidadoptionofsmartphoneplustariffandnetworkspeedgraduallyrelaxed,andalsoprovidesagoodenvironmentforthedevelopmentofHTML5technology.HTML5"
cross-platformgamecodingtransplantationmakesthenewchoiceformobilegamedevelopers.Intheinternationalarena,Zynga,SPILGAMES,DisneyhasbeeninHTML5gameenteredthepracticalstage,Google,APPLE,MicrosoftalsomadeitclearthatthesupportofHTML5mobiledevices.Visible,HTML5hasbecomeoneoftheimportanttrendofdevelopmentofthedrama.
Inthispaper,theintroductionofnewHTML5featurescombinedwiththedesignandimplementationofspecificdevelopmentinstance,inordertodeepentheunderstandingofHTML5,tomasterthebasicflowofthemobilegamedevelopment,andtheproblemsencounteredindevelopmenttomakethenecessaryanalysis.
HTML5applicationsresearchanddevelopmentofapersonalopinionandHTML5mobilegamedevelopmentprospectsfocusforOutlook.
Thewritingofthispaperwillbedividedintofourparts:
Thepurposeandsignificanceofthefirstpartwillelaborateonthisarticle,andtheresearchsituation.Thesecondpartintroducesthekeytechnologiesusedinthisarticleaswellasthedevelopmentenvironmentconfiguration.Thethirdpartistheinstanceofthedevelopmentsection,wewillusesomeofthenewfeaturesofHTML5withnodejstechnologytodoasimple331gamesinordertodeepenunderstandingofHTML5,weneedtoanalyzeandsolveproblemsencountered.Thefourthpartisasummaryandoutlookofthiswriting.
TheinnovationofthispaperistheuseofthemostpopularHTML5technologynodejsreal-timeinteractivetechnologytodoareal-timemobilephonegames,andgame,wewillbemoreclearlyexplainedtheadvantagesanddisadvantagesoftheHTML5,andwewillproposethedevelopmentofHTML5gameshouldbenotedthatsomeoftheproblemsandsolutions,togivenewcomerssomeexperienceandlessonslearned.
Keywords:
HTML5;
mobilephonenetworkgame;
一、引言
(一)本选题的研究目的和意义
随着Adobe宣布停止Flash移动版开发,HTML5成为不断被提及的热门话题,不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。
对于手机游戏而言,HTML5的到来绝不仅仅是技术上的革新,更意味着广阔的发展空间以及自由、开放的未来。
HTML5手机游戏基于网页和浏览器运行,不再一味依赖于狭窄封闭的手机应用商店,可以在网页上直接发布。
在推广方式上,HTML5游戏依托于广阔而开放的互联网资源,可以结合传统互联网的推广模式,也可以通过网络社交平台合作,或者创造新的推广模式。
HTML5是近十年来Web标准最巨大的飞跃,和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图像和动画,以及同电脑的交互都被标准化。
尽管HTML5的实现还有很长的路要走,但HTML5正在改变Web。
目前的互联网已经不仅仅是传统意义上面的互联网,所有的传统应用和模式正在向着更加移动和便捷发展,人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用,如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用,未来必将也会改变人们生活的方方面面。
本选题是基于HTML5做一个最佳实践,完成之前不可能使用WEB技术来完成的功能,性能照比之前的技术体系要高出很多,而且有足够的前瞻性和创新性。
(二)国内外发展现状
手机游戏开发是个新兴行业。
手机游戏不仅开始逐步完善,创造更优质的体验,还代表着新兴技术。
最早一些游戏在出厂前就固化在芯片中了,象Nokia的贪吃蛇就是一个最著名的例子。
但由于用户不能自己安装新的游戏,所以它们后来逐渐变得不太流行了。
差不多同时出现的还有短消息服务游戏和浏览器游戏,由于前者价格过于昂贵,很快就被淘汰了,对于浏览器游戏由于早期浏览器都是基于无线应用协议(WAP),而WAP本质上是一个静态浏览载体,游戏的效果可想而知。
最应该提到的是基于J2ME和其它的解释语言的游戏,由于大部分的手机厂商都迫切希望Java手机推广应用,上千万的Java手机已经到了消费者的手中。
它有比SMS或WAP更好控制的界面,允许使用子图形动画,并且可以通过无线网络连接到远程服务器。
因为Java手机的普及,所以它后来成为目前最好的移动游戏开发环境。
然而随着HTML5的出现,这个情形可能会发生改变,HTML5具有很大的技术优势,开发者开发一款游戏可以发布很多的平台,使得开发者的成本降低。
开发者就类似于做一个网页,关键部分的适配会很少。
如果将网页游戏看作一个网页的话,将这个网页适配到不同的浏览器要比重新开发一套客户端代码工作量和难度都要小得多。
同时开发者也不需要掌握更多的开发语言,只需要掌握HTML5和Javascript就可以了,而不用掌握Java、Objective-c、C++等等。
(三)本选题的主要内容
1.使用HTML5Canvas来开发动画效果。
Canvas是HTML5最重要的特性,Canvas可以用来进行绘制图形,绘制游戏的图案或者其他图形图案,允许使用脚本动态渲染点阵图像。
简单来说,Canvas就是允许你在HTML5中,使用Javascript去绘制喜欢的任何图形,包括文字,图片、线、点、各种形状等。
Canvas使用的是Canvas2DAPI去绘制图形,这个API功能十分强大,而且大部分的浏览器都支持2Dcanvas——包括Opera,Firefox,Konqueror和Safari。
本文将利用javascript对Canvas进行控制来显示游戏动画,通过对Canvas各种特性的尝试和应用,以加深对Canvas的理解和掌握,通过和flash等传统插件的对比,展现Canvas的优缺点,提出可改进的地方。
2.使用HTML5Audio来实现控制声音。
直到现在,仍然不存在一项旨在网页上播放音频的标准。
今天,大多数音频是通过插件(比如Flash)来播放的。
然而,并非所有浏览器都拥有同样的插件。
HTML5规定了一种通过audio元素来包含音频的标准方法。
audio元素能够播放声音文件或者音频流。
本文通过对audio标签的具体应用不仅能够最大的体现这个标签的功能,同时也希望能够更好的展现这个标签给我们编程带来的方便性。
3.使用HTML5WebSocket进行实时数据传输。
本文将利用WebSocket库Socket.io来实现浏览器与服务器的双向通讯。
4.nodejs的使用。
nodejs是基于服务端的javascript,本文将利用nodejs作为服务器端的编程工具。
5.基于HTML5游戏的设计和实现。
本文将采用面向对象的方法进行游戏设计。
游戏的设计尽可能的应用HTML5的新特性。
另外本文将只针对单机游戏的设计和编码。
二、相关技术及开发方法简介
(一)相关技术简介
1.HTML5简介
HTML5是HTML下一个的主要修订版本,现在仍处于发展阶段。
目标是取代1999年所定订的HTML4.01和XHTML1.0
标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。
广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-basedrichinternetapplication,RIA),如AdobeFlash、MicrosoftSilverlight,与OracleJavaFX的需求,并且提供更多能有效增强网络应用的标准集。
HTML5草案的前身名为WebApplications1.0。
于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。
在2008年1月22日,第一份正式草案已公布,在2010年9月正式向公众推荐。
HTML5是近十年来Web标准最巨大的飞跃。
和以前的版本不同,HTML5并非仅仅用来表示Web内容,它的使命是将Web带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。
目前Firefox、Chrome、Opera、Safari(版本4以上)、InternetExplorer9已支持HTML5技术。
HTML5提供了一些新的元素和属性,例如<
nav>
(网站导航块)和<
footer>
。
这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<
audio>
和<
video>
标记。
一些过时的HTML4标记将被取消。
其中包括纯粹显示效果的标记,如<
font>
center>
,它们已经被CSS取代。
除了原先的DOM接口,HTML5增加了更多API,如:
(1)实时二维绘图。
CanvasAPI:
有关动态产出与渲染图形、图表、图像和
动画的API。
(2)定时媒体播放HTML5音频与视频:
HTML5里新增的元素,它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API,而无需安装任何插件。
(3)通信网络CommunicationAPIs:
构建实时和跨源(cross-origin)通信的
两大基础:
跨文档通信(CrossDocumentMessaging)与XMLHttpRequestLevel
2。
(4)GeolocationAPI:
用户可共享地理位置,并在Web应用的协助下享用
位置感知服务(location-awareservices)。
(5)WebSQLDatabase,一个本地的SQL数据库。
(6)WebSocket,一个基于浏览器的socket(一种网络协议,支持所有的互
联网通信),支持实时性的数据传输。
(7)其他:
离线存储数据库(离线网络应用程序)、编辑、拖放等。
2.nodejs简介
Node是一个Javascript运行环境(runtime)。
实际上它是对GoogleV8引擎(应用于GoogleChrome浏览器)进行了封装。
V8引擎执行Javascript的速度非常快,性能非常好。
Node对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。
例如,在服务器环境中,处理二进制数据通常是必不可少的,但Javascript对此支持不足,因此,V8.Node增加了Buffer类,方便并且高效地处理二进制数据。
因此,Node不仅仅简单的使用了V8,还对其进行了优化,使其在各环境下更加给力。
V8引擎本身使用了一些最新的编译技术。
这使得用Javascript这类高级语言编写出来的代码与用C这类高级语言写出来的代码性能相差无几,却节省了开发成本。
对性能的苛求是Node的一个关键因素。
Javascript是一个事件驱动语言,Node利用了这个优点,编写出可扩展性高的服务器。
Node采用了一个称为“事件循环(eventloop)”的架构,使得编写可扩展性高的服务器变得既容易又安全。
提高服务器性能的技巧有多种多样。
Node选择了一种既能提高性能,又能减低开发复杂度的架构,这是一个非常重要的特性。
并发编程通常很复杂且布满地雷。
Node绕过了这些,但仍提供很好的性能。
Node采用一系列“非阻塞”库来支持事件循环的方式。
本质上就是为文件系统、数据库之类的资源提供接口。
当你向文件系统发送一个请求时,无需等待硬盘(寻址并检索文件),硬盘准备好的时候非阻塞接口会通知Node。
该模型以可扩展的方式简化了对慢资源的访问,直观,易懂。
尤其是对于熟悉onmouseover、onclick等DOM事件的用户,更有一种似曾相识的感觉。
虽然让Javascript运行于服务器端不是Node的独特之处,但却是其一强大功能。
浏览器环境限制了我们选择编程语言的自由。
任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。
虽然还存在其他一些支持Javascript在服务器端运行的平台,但因为上述特性,Node发展迅猛,已经成为事实上的平台。
在Node启动的很短时间内,社区就已经贡献了大量的扩展库(模块)。
其中很多是连接数据库或是其他软件的驱动,但还有很多是凭他们的实力制作出来的非常有用的软件。
node机制的根本原理是多利用CPU、高速缓存处理相应访问,减少比如像硬盘到内存,或到高速缓存中的检索读取的等待时间。
(二)开发工具以及运行环境配置
1.web开发工具AptanaStudio
AptanaStudio是一个集成式的Web应用程序开发环境,它不仅可以作为独立的程序运行,而且还可以作为Eclipse插件使用。
其最广为人知的是它非常强悍的JavaScript编辑器和调试器。
AptanaStudio可以支持多种AJAX和JavaScript工具箱,包括JavaScript编辑和调试。
此外,Aptana还吸收了Radrails项目,添加了非常强大的RubyonRails支持。
随着苹果公司iPhone手机的发布,Aptana也推出了功能完备的iPhone集成开发功能,在Adobe公司的RIA产品AIR推出不久之后,Aptana就支持了AIR的开发环境。
如今AptanaStudio支持如下几大方面的开发功能:
(1)智能代码完成:
相对于其他类型的语言,JavaScript的智能代码完成部分功能往往较弱,总是给人提示不全的感觉。
AptanaStudio提供的智能代码完成功能不仅涵盖JavaScript语法,还包括HTML和CSS。
(2)浏览器兼容性提示:
对浏览器前端开发人员而言,自己开发出来的脚本是否能跨浏览器运行无疑是首要考虑的问题。
AptanaStudio深谙这一需求,在开发阶段便尽量扼杀浏览器兼容性隐患:
在JavaScript的每一个属性或方法提示之后,均会跟随该属性或方法适用于的浏览器类型。
(3)代码错误提示:
AptanaStudio的代码错误提示非常准确,可以用“一个都不能少”来形容。
(4)文档结构树:
很多开发人员偏爱Firefox的原因在于,Firefox内置了一些有利于开发人员的功能,如错误控制台(ErrorConsole)、DOM查看器(DOMInspector)。
AptanaStudio也提供了类似DOM查看器的工具来帮助分析页面文档的层次结构。
2.Javascrīpt框架Jquery
Jquery是继prototype之后又一个优秀的Javascrīpt框架。
它是轻量级的js库(压缩后只有21k),它兼容CSS3,还兼容各种浏览器(IE6.0+,FF1.5+,Safari2.0+,Opera9.0+)。
jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
目前jQuery最新版本添加了对HTML5的支持,发布的版本号为jQuery1.7。
jQuery1.7具有以下几大亮点:
新的事件API:
.on()和.off();
委托事件性能改进;
在IE6/7/8中的更好地支持HTML5;
切换动画更加直观;
异步模块定义(AMD):
现在在jQuery中已支持AMDAPI;
jQuery.Deferred对象功能扩展;
新的jQuery.isNumeric()方法。
3.调试工具Chrome浏览器
Chrome浏览器是一款设计简洁、技术先进的浏览器,可以使用户更快速、安全且轻松地使用网络,该浏览器是基于其他开放原始码软件所撰写,包括WebKit和Mozilla,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。
目前市场上的浏览器虽然品牌众多,但是其都是根据几大开源
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 HTML5 手机 实时 游戏 设计 实现