基于HTML5的手机实时游戏设计与实现


本科生毕业论文(设计) 论文题目 : 基于 HTML5 的手机实时游戏 的设计与实现 姓名 : 学号 : 班级 : 年级 : 专业 : 电子商务(信息技术) 学院 : 信息与安全工程学院 指导教师 : 完成时间 : 2012 年 04 月 20 日 中南财经政法大学 2012 届本科生毕业论文(设计) 作者声明 本毕业论文(设计)是在导师的指导下由本人独立撰写完成的,没有剽窃、 抄袭、造假等违反道德、学术规范和其他侵权行为。对本论文(设计)的研究做 出重要贡献的个人和集体,均已在文中以明确方式标明。因本毕业论文(设计) 引起的法律结果完全由本人承担。 毕业论文(设计)成果归中南财经政法大学所有。 特此声明。 作者专业 : 电子商务(技术方向) 作者学号 : 作者签名 : 年 月 日 中南财经政法大学 2012 届本科生毕业论文(设计) 基于 HTML5 的手机实时游戏 设计与实现 The design and implementation of mobile phone real time game based on HTML5 2012 年 4 月 20 日 摘 要 中南财经政法大学 2012 届本科生毕业论文(设计) 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 中南财经政法大学 2012 届本科生毕业论文(设计) HTML5 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 well 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, HTML5 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 developers. 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 introduction 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 applications 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 introduces 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, 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 explained 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. 中南财经政法大学 2012 届本科生毕业论文(设计) Key words: HTML5;nodejs;mobile phone network game; 目录 中南财经政法大学 2012 届本科生毕业论文(设计) 一、引言 ................................................................................................. 1 ( 一 )本选题的研究目的和意义 ........................................................................................ 1 (二 ) 国 内 外 发展现状 ........................................................................................................ 1 (三 )本选题的主要内容 .................................................................................................... 2 二、 相关技术及开发方法简介 .......................................................... 3 ( 一 ) 相 关技术简介 ............................................................................................................ 3 (二)开发工具以及运行环境配置 .................................................................................... 4 三、实例开发 ......................................................................................... 6 ( 一 ) 五子棋游戏玩法设计和需求分析 ............................................................................ 6 (二 ) 概 要设计.................................................................................................................... 7 (三 ) 详细设计与实现 ...................................................................................................... 14 (四)运行测试.................................................................................................................. 21 四、总结与展望 ................................................................................... 26 五、参考文献 ....................................................................................... 27 中南财经政法大学 2012 届本科生毕业论文(设计) - 1 - 一、引言 (一) 本选题的研究目的和意义 随着 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 具有很大的技术优势,开发者开发一款游戏可以发布很多 中南财经政法大学 2012 届本科生毕业论文(设计) - 2 - 的平台,使得开发者的成本降低。开发者就类似于做一个网页,关键部分的适 配会很少。如果将网页游戏看作一个网页的话,将这个网页适配到不同的浏览 器要比重新开发一套客户端代码工作量和难度都要小得多。同时开发者也不需 要掌握更多的开发语言,只需要掌握 HTML5 和 Javascript 就可以了,而不用掌 握 Java、Objective-c、C++等等。 (三) 本选题的主要内容 1.使用HTML5 Canvas 来开发动画效果。 Canvas 是 HTML5 最重要的特性,Canvas 可以用来进行绘制图形,绘制游 戏的图案或者其他图形图案,允许使用脚本动态渲染点阵图像。简单来说, Canvas 就是允许你在 HTML5 中,使用 Javascript 去绘制喜欢的任何图形,包括 文字,图片、线、点、各种形状等。Canvas 使用的是 Canvas 2D API 去绘制图 形,这个 API 功能十分强大,而且大部分的浏览器都支持 2D canvas ——包括 Opera, Firefox, Konqueror 和 Safari。本文将利用 javascript 对 Canvas 进行控制 来显示游戏动画,通过对 Canvas 各种特性的尝试和应用,以加深对 Canvas 的 理解和掌握,通过和 flash 等传统插件的对比,展现 Canvas 的优缺点,提出可 改进的地方。 2.使用HTML5 Audio 来实现控制声音。 直到现在,仍然不存在一项旨在网页上播放音频的标准。今天,大多数音 频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插 件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能 够播放声音文件或者音频流。本文通过对 audio 标签的具体应用不仅能够最大 的体现这个标签的功能,同时也希望能够更好的展现这个标签给我们编程带来 的方便性。 3.使用HTML5 WebSocket 进行实时数据传输。 本文将利用 WebSocket 库 Socket.io 来实现浏览器与服务器的双向通讯。 4.nodejs的使用。 nodejs 是基于服务端的 javascript,本文将利用 nodejs 作为服务器端的编程 工具。 5.基于 HTML5 游戏的设计和实现。 本文将采用面向对象的方法进行游戏设计。游戏的设计尽可能的应用 HTML5 的新特性。另外本文将只针对单机游戏的设计和编码。 中南财经政法大学 2012 届本科生毕业论文(设计) - 3 - 二、 相关技术及开发方法简介 (一) 相关技术简介 1.HTML5 简介 HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。目标是 取代 1999 年所定订的 HTML 4.01 和 XHTML 1.0 标准,以 期 能 在 互联网应用迅 速发展的时候,使网络标准达到符合当代的网络需求。广义论及 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 日,第一份正式草案已公布, 在 2010 年 9 月正式向公众推荐。HTML5 是近十年来 Web 标准最巨大的飞跃。 和以前的版本不同,HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同 电脑的交互都被标准化。目前 Firefox、Chrome、Opera、Safari(版本 4 以上)、 Internet Explorer 9 已支持 HTML5 技术。 HTML5 提供了一些新的元素和属性,例如
还剩34页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 2 人已下载

下载pdf