1、 本科生毕业论文（设计） 论文题目 ： 基于 HTML5 的手机实时游戏 的设计与实现 姓名 ： 学号 ： 班级 ： 年级 ： 专业 ： 电子商务（ 信息技术 ） 学院 ： 信息与安全工程 学院 指导教师 ： 完成时间 ： 2012 年 04 月 20 日 中南财经政法大学 2012 届本科 生 毕业论文（设计） 作者 声明 本毕业论文（设计）是在导师的指导下由本人独立撰写完成的，没有剽窃、抄袭、造假等违反道德、学术规范和其他侵权行为。对本论文 （设计） 的研究做出重要贡献的个人和集体，均已在文中以明确方式标明。因本毕业论文（设计）引 起的法律结果完全由本人承担。 毕业论文（设计）成果归中南财
2、经政法大学所有。 特此声明。 作者专业 ： 电子商务（技术方向） 作者学号 ： 作者签名 ： 年 月 日 中南财经政法大学 2012 届本科 生 毕业论文（设计） 基于 HTML5 的手机实时游戏 设计与实现 The design and implementation of mobile phone real time game based on HTML5 2012 年 4 月 20 日 摘 要 中南财经政法大学 2012 届本科 生 毕业论文（设计） HTML5 是下一代互联网的 web 标准， 和以前的版本不同， HTML5 并非仅仅用来表示 Web 内容，它将使 Web 进入一个成熟的
3、应用平台，在这个平台上，视频、音频、 图像 和动画，以及同电脑的交互都被标准化。随着 Adobe 宣布停止 Flash 移动版开发，不少人预言 HTML5 的发展将给移动互联网产业带来革命性的深刻变化。 作为新一代的网页语言， HTML5 跨平台的支持得到不断增强，智能手机的迅速普及加上资费和网络速度的逐渐松绑，也为 HTML5 技术提供了良好的发展环境。 HTML5“ 可以实现跨平台游戏编码移植 ” 的 特性使其成为移动游戏开发者新的选择。在国际上， Zynga、 SPILGAMES、 Disney 都已经在HTML5 游戏方面进入了实践阶段， Google、 APPLE， 微软也明确 表示
4、对 HTML5的移动设备支持。可见， HTML5 已成为 游 戏开发的重要趋势之一。 本文通过对 HTML5 新特性的介绍结合具体的开发实例的设计 与 实现，以加深对 HTML5 的认识，掌握手机游戏开发的基本流程，并对遇到的开发问题做必要分析。 就 HTML5 应用的研究开发 提出了个人的看法 并对 HTML5 手机游戏开发前景重点做出 展望。 本文的写作将分为 四 部分 ：第一部分 将 首先阐述本文的的研究目的和意义，国内外研究现状分析。第二部分主要是对本文用到的关键技术的介绍以及本文实例开发中的环境配置的方法。第三部分为实例开发部分，在这里我们将利用HTML5 的一些新特性结合 node
5、js 的技术做一个简单的五子棋游戏，以加深对HTML5 游戏开发 的了解，并对当中遇到的问题进行分析与解决。第四部分是对本文写作的总结与展望。 本文的创新点是利用最热门的 HTML5 技术结合 nodejs 的实时交互技术做一个手机实时游戏，通过对游戏的实现，更加清晰地阐述 HTML5 的优缺点，并且提出一些开发 HTML5 游戏 时 应该注意的问题和解决方法，以给后来者一些经验和教训。 关键词： HTML5； nodejs； 手机网络游戏； Abstract 中南财经政法大学 2012 届本科 生 毕业论文（设计） HTML5 is the next generation of Intern
6、et 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 well as interaction with the computer are standardized. As Adobe
7、 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, HTML5 cross-platform support has been growing, the rapid adoption
8、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 developers. In the international arena, Zynga, SPILGAMES, Disney has be
9、en 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 introduction of new HTML5 features combined with the design and imp
10、lementation 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 applications research and development of a personal opinion and HTML
11、5 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 introduces the key technologies used in this article as well as
12、 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, we need to analyze and solve problems encountered. The fourt
13、h 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 explained the advantages and disadvantages of the HTML5, and w
14、e 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. 中南财经政法大学 2012 届本科 生 毕业论文（设计） Key words: HTML5； nodejs； mobile phone network game； 目录 中南财经政法大学 2012 届本科 生 毕业论文（设计） 一、引言 . 1 （一）本选题的研究目的和意义 . 1 （
15、二）国内外发展现状 . 1 （三）本 选题的主要内容 . 2 二、 相关技术及开发方法简介 . 3 （一）相关技术简介 . 3 （二） 开发工具以及运行环境配置 . 4 三、实例开发 . 6 （一） 五子棋游戏玩法设计和需求分析 . 6 （ 二 ） 概要设计 . 7 （三） 详细设计与实现 . 14 （四） 运行测试 . 21 四、总结与展望 . 26 五、参考文献 . 27中南财经政法大学 2012 届本科 生 毕业论文（设计） - 1 - 一、引言 (一 ) 本选题的研究目的和意义 随着 Adobe 宣布停止 Flash 移动版开发， HTML5 成为不断被提及的热门话题，不少人预言 HT
16、ML5 的发展将给移动互联网产业带来革命性的深刻变化。对于手机游戏而言， HTML5 的到来绝不仅仅是技术上的革新，更意味着广阔的发展空间以及自由、开放的未来 。 HTML5 手机游戏基于网页和浏览器运行，不再一味依赖于狭窄封闭的手机应用商店，可以在网页上直接发布。在推广方式上， HTML5 游戏依托于广阔而开放的互联网资源，可以结合传统互联网的推广模式，也可以通过网络社交平台合作，或者创造新的推广模式。 HTML5 是近十年来 Web 标准最巨大的飞跃，和 以前的版本不同， HTML5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、
17、图像 和动画，以及同电脑的交互都被标准化。尽管 HTML5 的实现还有很长的路要走，但 HTML5 正在改变 Web。目前的互联网已经不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可能通过手机、平板电脑等各类移动设备来获取信息和使用更加丰富的应用，如物理位置定位信息等新的数据采集和多点触控、重力感应等新的交互方式的应用，未来必将也会改变人们生活的方方面面。 本选题是基于 HTML5 做一个最佳实践，完成之前不可能使用 WEB 技术来完成的功能，性能照比之前的技术体系要高出很多，而且有足够的前瞻性和创新性。 (二 ) 国内外发展现状 手机游戏开发是个新兴行业。
18、手机游戏不仅开始逐步完善，创造更优质的体验，还代表着新兴技术。 最早 一些游戏在出厂前就固化在芯片中了，象 Nokia的贪吃蛇就是一个最著名的例子。但由于用户不能自己安装新的游戏，所以它们 后来 逐渐变得不太流行了。 差不多同时出现的还有 短消息服务游戏 和浏览器游戏，由于前者 价格过于昂贵，很快就被淘汰了，对于浏览器游戏由于早期浏览器 都是基于 无线应用协议 (WAP)，而 WAP 本质上是一个静态浏览载体 ，游戏的效果可想而知。最应该提到的是基于 J2ME 和其它的解释语言 的游戏，由于大部分的手机厂商都迫切希望 Java 手机推广应用 ， 上千万的 Java 手机已经到了消费者的手中。它
19、有比 SMS 或 WAP 更好控制的界面，允许使用子图形动画，并且可以通过无线网络连接到远程服务器。 因为 Java 手机的普及，所以它 后来成为目前最好的移动游戏开发环境 。然而随着 HTML5 的出现，这个情形可能会发生改变， HTML5 具有很大的技术优势， 开发者开发一款游戏可以发布 很多中南财经政法大学 2012 届本科 生 毕业论文（设计） - 2 - 的平台，使得 开发者的成本降低。开发者就类似于做一个网页，关键部分的适配会很少。如果将网页游戏 看作 一个网页的话，将这个网页适配到不同的浏览器要比重新开发一套客户端代码工作量和难度都要小得多。同时开发者也不需要掌握更多的开发语言，
20、只需要掌握 HTML5 和 Javascript 就可以了，而不用掌握 Java、 Objective-c、 C+等等。 (三 ) 本选题的主要内容 1.使用 HTML5 Canvas 来开发动画效果。 Canvas 是 HTML5 最重要的特性， Canvas 可以用来进行绘制图形，绘制游戏的图案或者其他图形图案，允许使用脚本动 态渲染点阵图像。简单来说，Canvas 就是允许你在 HTML5 中，使用 Javascript 去绘制喜欢的任何图形，包括文字，图片、线、点、各种形状等。 Canvas 使用的是 Canvas 2D API 去绘制图形，这个 API 功能十分强大，而且大部分的浏览
21、器都支持 2D canvas 包括 Opera, Firefox, Konqueror 和 Safari。 本文 将利用 javascript 对 Canvas 进行控制来显示游戏动画，通过对 Canvas 各种特性的尝试和应用，以加深对 Canvas 的理解和掌握，通过和 flash 等传统插件的对比，展现 Canvas 的优缺点，提出可改进的地方。 2.使用 HTML5 Audio 来实现控制声音。 直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 audio 元素来
22、包含音频的标准方法。 audio 元素能够播放声音文件或者音频流。 本文通过对 audio 标签的具体应用不仅能够最大的体现这个标签的功能，同时也希望能够更好的展现这个标签给我们编程带来的方便性。 3.使用 HTML5 WebSocket 进行实时数据传输。 本文将利用 WebSocket 库 Socket.io 来 实现浏览器与服务器的双向通讯。 4.nodejs的使用。 nodejs 是基于服务端的 javascript，本文将利用 nodejs 作为服务器端的编程工具。 5.基于 HTML5 游戏的设计和实现。 本文将采用面向对象的方法进行游戏设计。游戏的设计尽可能的应用HTML5 的新
23、特性。另外本文将只针对单机游戏的设计和编码。 中南财经政法大学 2012 届本科 生 毕业论文（设计） - 3 - 二、 相关技术及开发方法简介 (一 ) 相关技术简介 1.HTML5 简介 HTML5 是 HTML 下一个的主要修订版本， 现在仍处于发展阶段。目标是取代 1999 年所定订的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及 HTML5 时，实际指的是包括 HTML、 CSS 和 JavaScript 在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（ plug-in-bas
24、ed rich internet application， RIA)，如 Adobe Flash、 Microsoft Silverlight，与 Oracle JavaFX 的需求，并且提 供更多能有效增强网络应用的标准集。 HTML5 草案的前身名为Web Applications 1.0。 于 2004 年被 WHATWG 提出， 于 2007 年被 W3C 接纳，并成立了新的 HTML 工作团队。在 2008 年 1 月 22 日，第一份正式草案已公布 ,在 2010 年 9 月正式向公众推荐。 HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同， HTML 5 并非仅
25、仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。 目前 Firefox、 Chrome、 Opera、 Safari（版本 4 以上）、Internet Explorer 9 已支持 HTML5 技术。 HTML5 提供了一些新的元素和属性，例如 （网站导航块）和 。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如 和 标记。一些过时的 HTML4 标记将被取消。其中包括纯粹显示效果的标记，如和 ，它们已经被 CSS 取代。除了原先的
26、 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 数据库。
