1、基于HTML5的手机实时游戏设计与实现本科生毕业论文（设计）论文题目：基于HTML5的手机实时游戏的设计与实现姓名：学号：班级：年级：专业：电子商务（信息技术）学院：信息与安全工程学院指导教师：完成时间：2012年 04 月20日作者声明本毕业论文（设计）是在导师的指导下由本人独立撰写完成的，没有剽窃、抄袭、造假等违反道德、学术规范和其他侵权行为。对本论文（设计）的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。因本毕业论文（设计）引起的法律结果完全由本人承担。毕业论文（设计）成果归中南财经政法大学所有。特此声明。作者专业：电子商务（技术方向）作者学号：作者签名：年 月 日 基于HTM
2、L5的手机实时游戏 设计与实现The design and implementation ofmobile phone real time game based on HTML52012年4月20日摘 要HTML5是下一代互联网的web标准，和以前的版本不同，HTML5并非仅仅用来表示Web 内容，它将使Web 进入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。随着Adobe宣布停止Flash移动版开发，不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。作为新一代的网页语言，HTML5跨平台的支持得到不断增强，智能手机的迅速普及加上资费和
3、网络速度的逐渐松绑，也为HTML5技术提供了良好的发展环境。HTML5“可以实现跨平台游戏编码移植”的特性使其成为移动游戏开发者新的选择。在国际上， Zynga、SPILGAMES、Disney都已经在HTML5游戏方面进入了实践阶段，Google、APPLE， 微软也明确表示对HTML5的移动设备支持。可见， HTML5已成为游戏开发的重要趋势之一。本文通过对HTML5新特性的介绍结合具体的开发实例的设计与实现，以加深对HTML5的认识，掌握手机游戏开发的基本流程，并对遇到的开发问题做必要分析。就HTML5应用的研究开发提出了个人的看法并对HTML5手机游戏开发前景重点做出展望。本文的写作将
4、分为四部分：第一部分将首先阐述本文的的研究目的和意义，国内外研究现状分析。第二部分主要是对本文用到的关键技术的介绍以及本文实例开发中的环境配置的方法。第三部分为实例开发部分，在这里我们将利用HTML5的一些新特性结合nodejs的技术做一个简单的五子棋游戏，以加深对HTML5游戏开发的了解，并对当中遇到的问题进行分析与解决。第四部分是对本文写作的总结与展望。本文的创新点是利用最热门的HTML5技术结合nodejs的实时交互技术做一个手机实时游戏，通过对游戏的实现，更加清晰地阐述HTML5的优缺点，并且提出一些开发HTML5游戏时应该注意的问题和解决方法，以给后来者一些经验和教训。关键词：HTM
5、L5；nodejs；手机网络游戏；AbstractHTML5 is the next generation of Internet web standards, and com in contrast with the previous version, HTML5 is not only used to represent Web content, it will enable the Web into a full-fledged application platform,in this platform, video, audio, images and animations, as w
6、ell as interaction with the computer are standardized. As Adobe announced the end to support the Flash mobile version of the development, many people predicted the development of HTML5 mobile Internet industry will bring profound changes in the revolutionary. As a new generation of web language, HTM
7、L5 cross-platform support has been growing, the rapid adoption of smart phone plus tariff and network speed gradually relaxed, and also provides a good environment for the development of HTML5 technology. HTML5 cross-platform game coding transplantation makes the new choice for mobile game developer
8、s. In the international arena, Zynga, SPILGAMES, Disney has been in HTML5 game entered the practical stage, Google, APPLE, Microsoft also made it clear that the support of HTML5 mobile devices. Visible, HTML5 has become one of the important trend of development of the drama. In this paper, the intro
9、duction of new HTML5 features combined with the design and implementation of specific development instance, in order to deepen the understanding of HTML5, to master the basic flow of the mobile game development, and the problems encountered in development to make the necessary analysis.HTML5 applica
10、tions research and development of a personal opinion and HTML5 mobile game development prospects focus for Outlook. The writing of this paper will be divided into four parts: The purpose and significance of the first part will elaborate on this article, and the research situation. The second part in
11、troduces the key technologies used in this article as well as the development environment configuration. The third part is the instance of the development section, we will use some of the new features of HTML5 with nodejs technology to do a simple 331 games in order to deepen understanding of HTML5,
12、 we need to analyze and solve problems encountered. The fourth part is a summary and outlook of this writing.The innovation of this paper is the use of the most popular HTML5 technology nodejs real-time interactive technology to do a real-time mobile phone games, and game, we will be more clearly ex
13、plained the advantages and disadvantages of the HTML5, and we will propose the development of HTML5 game should be noted that some of the problems and solutions, to give newcomers some experience and lessons learned.Key words: HTML5；nodejs；mobile phone network game；一、引言(一) 本选题的研究目的和意义随着Adobe宣布停止Flas
14、h移动版开发，HTML5成为不断被提及的热门话题，不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。对于手机游戏而言，HTML5的到来绝不仅仅是技术上的革新，更意味着广阔的发展空间以及自由、开放的未来。HTML5手机游戏基于网页和浏览器运行，不再一味依赖于狭窄封闭的手机应用商店，可以在网页上直接发布。在推广方式上，HTML5游戏依托于广阔而开放的互联网资源，可以结合传统互联网的推广模式，也可以通过网络社交平台合作，或者创造新的推广模式。HTML5 是近十年来Web标准最巨大的飞跃，和以前的版本不同，HTML5并非仅仅用来表示Web 内容，它的使命是将Web 带入一个成熟的应用平
15、台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。尽管HTML5 的实现还有很长的路要走，但HTML5 正在改变Web。目前的互联网已经不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用，如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用，未来必将也会改变人们生活的方方面面。本选题是基于HTML5 做一个最佳实践，完成之前不可能使用WEB 技术来完成的功能，性能照比之前的技术体系要高出很多，而且有足够的前瞻性和创新性。(二) 国内外发展现状手机游戏开发是个
16、新兴行业。手机游戏不仅开始逐步完善，创造更优质的体验，还代表着新兴技术。最早一些游戏在出厂前就固化在芯片中了，象Nokia的贪吃蛇就是一个最著名的例子。但由于用户不能自己安装新的游戏，所以它们后来逐渐变得不太流行了。差不多同时出现的还有短消息服务游戏和浏览器游戏，由于前者价格过于昂贵，很快就被淘汰了，对于浏览器游戏由于早期浏览器都是基于无线应用协议(WAP)，而WAP本质上是一个静态浏览载体，游戏的效果可想而知。最应该提到的是基于J2ME和其它的解释语言的游戏，由于大部分的手机厂商都迫切希望Java手机推广应用，上千万的Java手机已经到了消费者的手中。它有比SMS或WAP更好控制的界面，允许
17、使用子图形动画，并且可以通过无线网络连接到远程服务器。因为Java手机的普及，所以它后来成为目前最好的移动游戏开发环境。然而随着HTML5的出现，这个情形可能会发生改变，HTML5具有很大的技术优势，开发者开发一款游戏可以发布很多的平台，使得开发者的成本降低。开发者就类似于做一个网页，关键部分的适配会很少。如果将网页游戏看作一个网页的话，将这个网页适配到不同的浏览器要比重新开发一套客户端代码工作量和难度都要小得多。同时开发者也不需要掌握更多的开发语言，只需要掌握HTML5和Javascript就可以了，而不用掌握Java、Objective-c、C+等等。(三) 本选题的主要内容1.使用HTM
18、L5 Canvas 来开发动画效果。Canvas是HTML5最重要的特性，Canvas可以用来进行绘制图形，绘制游戏的图案或者其他图形图案，允许使用脚本动态渲染点阵图像。简单来说，Canvas就是允许你在HTML5中，使用Javascript去绘制喜欢的任何图形，包括文字，图片、线、点、各种形状等。Canvas 使用的是Canvas 2D API去绘制图形，这个API功能十分强大，而且大部分的浏览器都支持 2D canvas 包括 Opera, Firefox, Konqueror 和 Safari。本文将利用javascript对Canvas进行控制来显示游戏动画，通过对Canvas各种特性
19、的尝试和应用，以加深对Canvas的理解和掌握，通过和flash等传统插件的对比，展现Canvas的优缺点，提出可改进的地方。2.使用HTML5 Audio 来实现控制声音。直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。本文通过对audio标签的具体应用不仅能够最大的体现这个标签的功能，同时也希望能够更好的展现这个标签给我们编程带来的方便性。3.使用HTML5 WebSocket 进行实时数
20、据传输。本文将利用WebSocket库Socket.io来实现浏览器与服务器的双向通讯。4.nodejs的使用。nodejs是基于服务端的javascript，本文将利用nodejs作为服务器端的编程工具。5.基于HTML5游戏的设计和实现。本文将采用面向对象的方法进行游戏设计。游戏的设计尽可能的应用HTML5的新特性。另外本文将只针对单机游戏的设计和编码。二、 相关技术及开发方法简介(一) 相关技术简介1.HTML5简介 HTML5是HTML下一个的主要修订版本，现在仍处于发展阶段。目标是取代1999年所定订的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网
21、络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正
22、式草案已公布,在2010年9月正式向公众推荐。HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。目前Firefox、Chrome、Opera、Safari（版本4以上）、Internet Explorer 9已支持HTML5技术。HTML5提供了一些新的元素和属性，例如（网站导航块）和。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如和标记。一些过时
23、的HTML4标记将被取消。其中包括纯粹显示效果的标记，如和，它们已经被CSS取代。除了原先的DOM接口，HTML5增加了更多API,如：(1) 实时二维绘图。Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。(2) 定时媒体播放HTML5 音频与视频：HTML5 里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。(3) 通信网络Communication APIs：构建实时和跨源（cross-origin）通信的两大基础： 跨文档通信（Cross Document Messaging）与XMLHttpRequest L
24、evel2。(4) Geolocation API：用户可共享地理位置，并在Web 应用的协助下享用位置感知服务（location-aware services）。(5) Web SQL Database，一个本地的SQL 数据库。(6) WebSocket，一个基于浏览器的socket（一种网络协议，支持所有的互联网通信），支持实时性的数据传输。(7) 其他：离线存储数据库（离线网络应用程序）、编辑、拖放等。2.nodejs简介Node是一个Javascript运行环境(runtime)。实际上它是对GoogleV8引擎（应用于Google Chrome浏览器)进行了封装。V8引擎执行Jav
25、ascript的速度非常快，性能非常好。Node对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。例如，在服务器环境中，处理二进制数据通常是必不可少的，但Javascript对此支持不足，因此，V8.Node增加了Buffer类，方便并且高效地 处理二进制数据。因此，Node不仅仅简单的使用了V8,还对其进行了优化，使其在各环境下更加给力。V8引擎本身使用了一些最新的编译技术。这使得用Javascript这类高级语言编写出来的代码与用C这类高级语言写出来的代码性能相差无几，却节省了开发成本。对性能的苛求是Node的一个关键因素。 Javascript是一个事件驱
26、动语言，Node利用了这个优点，编写出可扩展性高的服务器。Node采用了一个称为“事件循环(event loop）”的架构，使得编写可扩展性高的服务器变得既容易又安全。提高服务器性能的技巧有多种多样。Node选择了一种既能提高性能，又能减低开发复杂度的架构，这是一个非常重要的特性。并发编程通常很复杂且布满地雷。Node绕过了这些，但仍提供很好的性能。Node采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。当你向文件系统发送一个请求时，无需等待硬盘（寻址并检索文件），硬盘准备好的时候非阻塞接口会通知Node。该模型以可扩展的方式简化了对慢资源的访问，
27、直观，易懂。尤其是对于熟悉onmouseover、onclick等DOM事件的用户，更有一种似曾相识的感觉。虽然让Javascript运行于服务器端不是Node的独特之处，但却是其一强大功能。浏览器环境限制了我们选择编程语言的自由。任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。虽然还存在其他一些支持Javascript在服务器端 运行的平台，但因为上述特性，Node发展迅猛，已经成为事实上的平台。在Node启动的很短时间内，社区就已经贡献了大量的扩展库（模块）。其中很多是连接数据库或是其他软件的驱动，但还有很多是凭他们的实力制作出来的非常有用的软
28、件。node机制的根本原理是多利用CPU、高速缓存处理相应访问，减少比如像硬盘到内存，或到高速缓存中的检索读取的等待时间。(二) 开发工具以及运行环境配置1.web开发工具Aptana StudioAptana Studio 是一个集成式的Web应用程序开发环境，它不仅可以作为独立的程序运行，而且还可以作为Eclipse插件使用。其最广为人知的是它非常强悍的JavaScript编辑器和调试器。AptanaStudio可以支持多种AJAX和JavaScript工具箱，包括JavaScript编辑和调试。此外，Aptana还吸收了Radrails项目，添加了非常强大的RubyonRails支持。随
29、着苹果公司iPhone手机的发布，Aptana也推出了功能完备的iPhone集成开发功能，在Adobe公司的RIA产品AIR推出不久之后，Aptana就支持了AIR的开发环境。如今AptanaStudio支持如下几大方面的开发功能：（1）智能代码完成：相对于其他类型的语言，JavaScript 的智能代码完成部分功能往往较弱，总是给人提示不全的感觉。Aptana Studio 提供的智能代码完成功能不仅涵盖 JavaScript 语法，还包括HTML 和 CSS 。（2）浏览器兼容性提示：对浏览器前端开发人员而言，自己开发出来的脚本是否能跨浏览器运行无疑是首要考虑的问题。Aptana Stud
30、io 深谙这一需求，在开发阶段便尽量扼杀浏览器兼容性隐患：在 JavaScript 的每一个属性或方法提示之后，均会跟随该属性或方法适用于的浏览器类型。（3）代码错误提示： Aptana Studio 的代码错误提示非常准确，可以用“一个都不能少”来形容。（4）文档结构树：很多开发人员偏爱 Firefox 的原因在于，Firefox 内置了一些有利于开发人员的功能，如错误控制台（Error Console）、DOM 查看器（DOM Inspector）。Aptana Studio 也提供了类似 DOM 查看器的工具来帮助分析页面文档的层次结构。2.Javascrpt框架JqueryJquery
31、是继prototype之后又一个优秀的Javascrpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。目
32、前jQuery最新版本添加了对HTML5的支持，发布的版本号为jQuery1.7。jQuery 1.7 具有以下几大亮点：新的事件 API：.on ()和 .off ()；委托事件性能改进；在 IE 6/7/8中的更好地支持 HTML5；切换动画更加直观；异步模块定义（AMD）：现在在 jQuery 中已支持 AMD API；jQuery.Deferred 对象功能扩展；新的 jQuery.isNumeric ()方法。3.调试工具Chrome 浏览器Chrome 浏览器是一款设计简洁、技术先进的浏览器，可以使用户更快速、安全且轻松地使用网络，该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。目前市场上的浏览器虽然品牌众多，但是其都是根据几大开源
