1、编 号 ： （ ） 字 号本 科 生 毕 业 设 计 （ 论 文 ）题目： 姓名： 学号： 班级： 年 月基于 HTML5 的游戏开发摘 要随着互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式也开始不断的变化，越来越多的应用可以直接以浏览器打开的方式使用，数据则是存储在云端，更加的安全可靠，方便用户共享数据。在各种应用不断的趋于更加网络话的同时，一种新的技术标准也随之产生，那就是 HTML5 。HTML5 是近十年来 Web 标准最巨大的飞跃，和以前的版本不同，HTML5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图
2、象和动画，以及同电脑的交互都被标准化。本文首先从整体上介绍了国内外 HTML5 技术的发展现状，然后讨论了 HTML5 及其相关开发技术的发展历程，分析了 HTML5 添加的最新功能及应用。在这些基础上设计开发了一款基于 HTML5 技术的单机版的“坦克大战”游戏应用，该游戏界面简洁，功能全面，运行流畅，操作简单易懂，主要功能模式包括单人对战和双人对战模式，实现了游戏的关卡难度设置、背景设置、声音设置、用户信息存储与管理等功能。本课题在开发过程中采用了EditPlus 这个功能强大的、可处理文本、HTML 和程序语言的 32 位编辑器。本游戏参照 20 世纪 90 年代时期曾经开发出来用于在电
3、视上运行的同款游戏而设计开发的，趣味性很强同时很有怀旧的氛围。关键词：HTML5；Canvas；JavaScript ；单机版游戏；坦克大战；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 dir
4、ectly 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
5、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 in
6、teraction of computers are all standardized. Based on the latest version of the hypertext markup language HTML5 and its related technologies are studied on the basis of overall first HTML5 technology development present situation at home and abroad are introduced, and then discusses the development
7、course of HTML5 and its related development technologies, after development of several kinds of commonly used tools are introduced, and then analyzes the HTML5 adds new functions and applications, finally based on the developed an based on HTML5 to create a standalone version of the “tanks war“ game
8、, the game interface is concise, comprehensive functions, running smooth, simple operation, the main function models including single against and double mode, realized the game difficulty level setting, background setting, sound Settings, user information storage and management, and other functions.
9、This game reference period had developed in the 1990 s used to run on TV with game design and development, interest is very strong and has a nostalgic atmosphere.Keywords: HTML5; Canvas; JavaScript; stand-alone games;tank war;目 录1 绪论 .11.1 课题的目的和意义 .11.2 国内外发展现状 .21.3 课题主要的内容和功能介绍 .31.3.1 课题主要的内容 .3
10、1.3.2 坦克大战游戏功能介绍 .31.4 相关技术简介 .41.4.1 HTML5 标准简述及意义 .41.4.2 JavaScript 标准简述及意义 .41.4.3 CSS 标准简述及意义 .51.5 开发工具 .61.6 本文章节安排 .72 系统分析 .82.1 系统设计分析 .82.2 系统需求分析 .82.2.1 系统角色 .82.2.2 需求分析 .82.2.3 用例分析 .93 系统概要设计 .113.1 系统总体功能设计 .113.1.1 程序功能模块分析 .113.1.2 地图读取以及修改 .113.1.3 游戏进行中的声音的控制分析 .123.2 程序流程 .123.
11、3 各模块及对应的功能 .144 系统详细设计 .164.1 数据管理模块设计 .164.2 地图功能模块 .174.2.1 读取地图 .174.2.2 绘制地图 .174.2.3 地图模块部分代码 .204.3 坦克模块的设计 .214.3.1 读取数据管理模块信息 .214.3.2 控制坦克 .214.3.3 坦克模块的部分实现代码 .224.4 炮弹模块的功能 .244.4.1 读取数据管理模块信息 .244.4.2 控制炮弹飞行 .254.4.3 炮弹模块的部分实现代码 .254.5 声音控制模块 .284.6 系统奖励模块功能 .284.7 游戏中动画界面模块功能 .295 总结与展
12、望 .325.1 总结 .325.2 展望 .32参考文献 .34翻译部分 .35英文原文 .35中文译文 .38致 谢 .41中国矿业大学 本科生毕业设计（论文） 第 1 页1 绪论1.1 课题的目的和意义目前，随着互联网技术的高速不断发展，其作用和用途在人们的日常生活、学习、工作中也在越来越重要，同时也在不断地变化并且被持续的加强着。人们随着时间的流逝也已经逐渐地开始使用互联网及其附属功能所带来的各项便利服务与应用，并且随时随地都在不自觉地享受着它给我们生活以及工作、学习等带来的好处和方便。当然，随着互联网基础用户和相关开发者的不断增多和底层平民化，人们完善和创造其功能和服务的脚步也随之越
13、来越快。对于整个互联网以及软件行业来说，无论是从其所具有的商业层面还是从其开发所需要的技术层面上来讲，由于新的开发设计的方法和模式的不断推陈出新，伴随而来的就是其新陈代谢速度的不断加快，不断有公司都尝试挑战着与其相关的新的模式和新的技术。凭借着整个行业创业成本低、技术门槛高等特点，许多大型的网络软件公司也都在不断地开发同时促进着新技术和新模式的产生，他们正是基于这个优势来垄断着一定的技术革新，同时也基于此又重新创建出全新的开发技术和服务应用。然而，毕竟整个互联网产业是一个相对开放性的平台，在开发、经营的过程中，大家应该在一个共同被认可的标准模式下进行相关的操作，这样就避免了垄断性的、一家独大式
14、的竞争模式的出现和产生，同时也避免了开发标准多样化、开发结构复杂化和开发路径偏激化等各种问题，就如同需要像秦始皇统一六国后制定出的车同轨、书同文等措施，正是基于此，HTML5 应运而生，而这种更加符合大多数开发者需求的新的标准和技术体系在其不断地革新中也在不断地发展、壮大。 有人说过，HTML5 的产生是Web 标准史上最大的跨度和飞跃。同以前所有的HTML版本所不同的是，HTML5并非仅仅只是用来表示Web 的内容，从它被制定出来的那一刻起，它就被赋予了将Web 带入一个更加成熟的应用以及开发平台中的使命和责任。在这个巨大的平台上，图象、音频、视频和动画，以及它们同电脑的交互方式都将被标准化
15、。从目前看来，尽管离HTML5 的实现还有很长很长的一段距离，但不可否认的是，HTML5 将改变并且正在改变着 Web 的某些方面。另外，目前人们所了解的互联网已经不仅仅是传统意义和规模上的互联网，它使所有过去出现的模式和应用都在向着更加便捷和移动的方向上不断地发展和壮大着，人们在日常生活中可能会通过平板电脑、智能手机等各种各样的移动设备来获取所需要的信息，并且能够使用更加丰富的功能，比如物理位置定位信息等这种新型的数据采集和重力感应、多点触控等新型的交互式的快捷应用，我们可以看到，这必将会改变而且已经在改变着人们生产、生活中的方方面面 1。与此同时，在HTML5 中目前已经加入了上面所提到的
16、各项新的功能和元素。更令人欣慰的是在这其中也开始并且已经考虑到非健全人士在使用互联网时可能会遇到或者带来的问题。所以，研究并应用HTML5 这种新型技术体系并借助于它来尝试做一些相关产品和应用更是一个造福人类社会以及子孙后代的好事，而且能够在这个高速发展的时代敏锐地抓住这中国矿业大学 本科生毕业设计（论文） 第 2 页个机会并使用类似的技术来创造、实施更多新的、便捷的应用，这本身就充满了无穷的乐趣。本课题正是基于HTML5 的游戏开发。相对于其他应用来说，游戏有着它无可匹敌和替代的作用，其有着很强的互动性，可以直接在网页中运行，同时还能给人们以放松，也可以充当一种交流的方式，所以它能够更加容易
17、地融入人们的日常生活中，借此便可推广其中的HTML5 的相关功能。本课题是在该项技术的基础上实现了一款单机版的坦克大战，这无疑是一次实践和学习的机会，同时也是对自己相关能力的一次考验和历练。1.2 国内外发展现状相对于HTML5 刚被制定出来时候的无人问津，如今，业内人士对其的讨论可谓是喋喋不休，乐此不疲，而HTML5 也从一个几乎被遗弃的角落走到了舞台中央。在2012 年的时候，HTML5 曾经被开发者尝试使用于不同的领域之内，那时就有人评价说2012 年的HTML5 的发展远员未达到预期的目标。对于所有的软件工程师来说，电脑端和手机端HTML5 的开发过程是很不一样的。它们两个之间的混合应
18、用不能依赖移动浏览器、不同移动设备之间进行适配等这些问题在开发设计过程中都需要有效的解决方式。而对于用户来说，人们已经习惯了被动式的去下载、更新某些需要使用的软件或其他应用，用户本能的反应就是通过应用商店去搜索应用。可是目前在这项领域占主导地位的苹果和谷歌的应用商店迄今为止还从没上线、发布过一款HTML5 相关站点的应用。这些问题都导致HTML5 的用户推广过程存在相当大的阻力和无奈 2。前不久，据移动应用开发公司Kendo 的调查数据显示：目前仍有94%的软件工程师看好HTML5 未来的发展优势，而这在某种程度上表明了有大批的技术流开发工程师正在进入HTML5 的开发队伍中来。尽管如此，当务
19、之急还是需要一个在世界范围内有巨大影响力、号召力和权威性的大公司参与到对其的推广工作中来。近日，微软和三叶草发布了国内一些少数的采用HTML5 和流行的 Parallax 视觉差效果的体验网站，虽然这些网店在视觉和动态体验上还说不上特别华丽，但是这种商业型性质的HTML5 体验在国内还是相当罕见和新奇的，这个举动反映出了微软公司希望通过新版的IE9 甚至是IE10 来推动国内新标准应用和开发的决心，而相较于国内复杂多变的网络环境，这方面的实现还有很长一段路要走。当然，国内也有比较成熟的HTML5 相关应用的例子。拿一款比较成熟的完全用HTML5 开发的门户新闻网站举例，手机搜狐概念版，它的开发
20、算国内比较早的，其产品在2012 年底就已上线，到目前为止，它的优势在用户中已经完全体现出来了，它可以让用户彻底摆脱下载、安装、更新时的困扰和烦恼，同时又继承了用户在浏览网页新闻时的app模式，显然，门户网站这类应用是一款完全贴合HTML5 实际开发过程和标准的WebApp 产品。尽管如此，相对于国外酷炫体验的HTML5 网站遍地开花的情况来说，无论是从个人的创意发挥上说，还是从大公司的市场营销活动中看，他们都充分利用HTML5 的方式呈现而不是传统的Flash 插件，而反观国内，情况就是那么的理想，当然原因也是显而易见的：（1）目前，国内大部分的用户在网络平台中还是比较偏好使用传统意义上的浏
21、览器，而这些浏览器恰恰都没有很好的支持HTML5、CSS3 等这些最新的技术应用，这就导致大多中国矿业大学 本科生毕业设计（论文） 第 3 页数开发商不得不采用比较保守的开发策略和技术。（2）目前，国内在这方面的前端设计开发人员和团队没有形成一定的规模。首先，虽然HTML、CSS 这些技术看起来并不是很复杂，但是要深入并能够熟练地将其应用还是一个很大的挑战，而在开发过程中还要顾及到各种浏览器的差别、向下兼容的测试等等，这些问题都会出现，甚至让人望而生畏，基于种种原因都导致了很多开发人员不愿意从事有关的开发；然后，由于HTML5 前端发展速度特别快，要求开发人员在进行开发的同时能够不断地吸收新的
22、相关研究成果，而且如果想要在开发过程中具有特别创意的表现，就需要对HTML、CSS 和JS 等相关能够利用的有效模块进行重新编写新的代码，加之于不同项目之间很少有能够重复利用的地方，这就导致在前端开发过程中很难对已有大量模块、代码等进行重复利用，增加的工作量和开发难度，另外，目前专门用于HTML5 的开发调试环境还不是很完整，这些也都导致开发人员很难对其进行深度开发。（3）很多相关的商业机构和公司的决策层对HTML5 这项新的技术并不是很了解，一方面的原因是由于国内还没有已经成熟的参考案例，另一方面也是由于很多广告公司或者Marketing 策划团队没有能够很好的用于展示HTML5 的创意方案
23、，这也导致了市场与决策层之间的信息交流出现断层。（4）因为HTML5 本身就还存在很多问题，它的不完善也导致了很多开发商的观望、犹豫。综上所述，目前国内的HTML5 开发还处于一个很混沌的状态，想要令其焕发活力恐怕只有靠巨头们的牵引了。不过，相信随着支持Webkit内核的浏览器，比如Midori 和搜狗浏览器的推广使用，HTML5会越来越普及，并成为能够改变移动互联网模式的重要力量和成员。1.3 课题主要的内容和功能介绍1.3.1 课题主要的内容课题的主要内容是使用最新的HTML5和CSS3标准来构建各种常见类型的游戏，实现游戏的关卡难度设置、背景设置、声音设置、用户信息存储与管理。1.3.2
24、 坦克大战游戏功能介绍用户在启动支持HTML5的浏览器后，输入有效地址或者点击相关链接即可进入坦克大战游戏界面。游戏分两种模式：单人模式和双人模式。游戏主要功能包括：（1）玩家必须通过键盘或者有效的游戏手柄来间接地控制自己的坦克，以消灭系统自行分配和出现的坦克为目标，同时又必须保护好自己的大本营。游戏中一旦被敌方坦克击中，就算死亡，相应的己方复活次数减一，直至为零或己方大本营被攻破。（2）游戏中出现的地图可以在服务端通过修改地图相关的数组来改变地图中各种通道的走向以及障碍物的分布情况。中国矿业大学 本科生毕业设计（论文） 第 4 页1.4 相关技术简介1.4.1 HTML5 标准简述及意义HT
25、ML5 是HTML 众多版本中继 HTML4 之后又一个主要修订版本，目前其进度仍然处于完善和发展阶段。制定它的初衷是用来取代W3C 于1999 年所制定出的XHTML 1.0 和HTML 4.01 标准，以期能在基于互联网相关应用及开发快速发展的时候，使得网络规范的标准尽快达到符合当代的网络需求的地步。广义的HTML5 实际上指的是包括HTML、JavaScript 和CSS 三项技术在内的一整套技术组合。通过在开发过程中使用HTML5 及其相关技术，能够减少浏览器对于插件的RIA的需求，同时能够研发并增添更多的增强网络应用的相关标准集。HTML5 在继承了上一个版本全部功能的同时还增加了部
26、分新的语法特征，这其中就包括、和标签（，和标签均为HTML5 中的新标记） ，同时还 集成了矢量图形实现方式（SVG）的相关内容。增加这些元素的目的是为了在网页中能够更加容易的展现和插入多媒体和图片内容。除此之外，还增加了其它一些新的标签，比如 、和，其作用在于能够使网页中的相关数据内容得到更加全面的展示。而且一些增加新的属性标签也确实如上文所述，有着与其相同或相近的目的。自然，在增加一些东西的同时删除了一些标签和属性。一些元素比如、和都进行了重新定义或被修的更加标准化了。同时DOM 和APIs也都已经融入了HTML5中，并作为它的基础部分进行使用。HTML5 还增加了一些新的、多样化的API（1）Canvas API：能够动态生成和展示图形、图标、图像以及动画。（2）音频与视频：开发人员不必使用插件就能播放音频和视频。对于这两个元素，HTML5 规范提供了通用、完整、可脚本化控制的API。(3) 通信网络Communication API：构建实时和跨源（cross-origin）通信的两大基础： 跨文档通信（Cross Document Messaging）与XMLHttpRequest Level2。（3）Geolocation API：用户在Web应用程序可共享其地理位置，使其能够享受位置感知服务。（4）Communicat
