毕业论文-基于HTML5的消除类游戏

XXXXX大学本科生毕业论文设计基于HTML5的消除类游戏作者：指导教师：所在学院：专业（系）：班级（届）：二〇XX 年 X 月 X 日目录中文摘要、关键字 (1)1 引言 (2)1.1 研究背景 (2)1.2 研究现状 (2)1.3 研究目的 (3)1.4 本文主要容 (3)2 研究技术分析 (4)2.1 HTML5简介 (4)2.2. 游戏引擎 (4)2.3 开发环境 (5)3 项目的设计与开发 (6)3.1 游戏玩法 (6)3.2 需求分析 (6)3.3 初步设计 (6)3.4 游戏开始流程 (7)3.5 部分程序界面与实现 (9)4 总结 (14)4.1 项目学习阶段总结 (14)4.2 项目实施阶段总结 (15)4.3 扩展知识 (15)致 (17)参考文献 (18)英文摘要、关键字 (19)基于HTML5的消除类游戏软件学院软件工程专业指导教师 XXX作者 XXX摘要：近几年来社会不断地快速发展，也让人们在工作中产生了很多这样那样的压力，随着科技的进步，人们更希望通过网络、通过游戏来释放自己的压力，以往的技术都只是让游戏在笔记本或者移动产品上单独运行，并不可以跨平台操作，这也增加了开发者的工作量，因此经过人们不懈的努力，终于在原有基础上对html进行了改革，这就是HTML5。

HTML5具有很多新的特性，最主要的还是它具有跨平台兼容性，不仅可以在电脑上运行，还可以在移动终端运行，不仅如此HTML5中的Canvas元素可以使浏览器直接创建并处理图像，减轻了开发人员的负担，而且使界面更加美观，具有很好的用户体验。

减少了用户刷新页面的时间，得到了更多人的认可,因此基于HTML5所制作的游戏也就成了很多人的研究课题。

本文通过介绍HTML5的一些特性，以及对游戏引擎的学习，比如cocos2d,unity3d 等的认识，并通过当下比较流行的消除类游戏的研发过程分析来使HTML5的容更加形象，并对HTML5的前景做了一些分析。

关键词：HTML5 Canvas 游戏引擎 cocos2d unity3d1 引言1.1研究的背景当今社会，随着经济的不断发展，人们对精神领域的追求也在不断加强，人们不再满足于只在笨拙的台式机上进行工作，而是越来越倾向于使用移动电子产品，并且人们对于网页的设计，刷新的速度都有了更高的要求，在这样的一个时代要求下，以前的网页制作语言HTML已经不能满足人们的要求，需要在移动、跨平台等新特性下研发更新html语言。

[1]先前的几个html版本，主要针对的是静态的文本网页，用于显示文档和共享一些数据，后来动态和应用程序的出现，使得网页更具有灵动性，但是这些都是基于第三方的插件或者Adobe Flash来完成的，这些插件可以使更加丰富，可以提供人机交互的功能。

随着网店和网页游戏的不断兴起，Web早就不能只满足于静态的文档，但是Web本身又不具备对视频，音频，图像处理的开发功能，想要在网页中添加这些就必须借助第三方插件，另外有时还需要其他的技术来支持HTML，让它支持多种媒体，这就加重了开发人员的工作量，不仅如此，人们再刷新网页时由于容过多，耗费时间较长，用户体验差。

因此通过不懈的努力，HTML5终于应运而生。

1.2研究的现状HTML5对旧的Web网页制作技术做了大量的改进、创新。

它增加了很多新的元素，将一些模块动态化，另外HTML5的核心目标是增加了比如<audio>、<video>等新的媒体元素，这样就可以不用第三方插件来播放多媒体，操作更加简单方便。

不仅如此新增加的Canvas 元素，可以使浏览器直接创建并处理图形，使得网页布局更加美观大方，也方便了开发人员，代码更加简洁。

HTML5不仅是对互联网的改革，它更增加跨平台性，兼容性更好，它将互联网带向了一个更加成熟的平台，使用HTML5开发的程序，不仅可以在电脑上运行，同样人们也可以在移动产品上使用程序，人们获取信息更加方便，快捷。

大大的满足了人们对了解各种信息的迫切要求，无论是查看文档信息，还是加载动画、视频，都增加了页面的刷新速度，具有良好的用户体验。

HTML5新增加的这些功能，也为网页游戏提供了开发上的便利条件，不再需要第三方插件来支持游戏的音效，动画，给网页游戏开创了一个新的时代。

在国外也掀起了一股学习开发HTML5游戏的热潮，之前的网页游戏开发成本高，即需要服务器端有需要客户端的支持，而现在HTML5可以跨平台操作，可以在更多的移动产品上进行操作，更能满足人们对于便捷的要求。

同时开发者只需要在原有基础上了解一下增加的新的HTML5和JS语言，当然对于游戏少不了的还有各种引擎，这些会在后面的文章中有所涉及。

1.3研究的目的由当前的游戏开发趋势来看，以后将会是HTML5的时代，当刷新HTML5的游戏时会像刷新页面那样简单，而且它的所有技术都是开放性的，方便开发者学习和应用。

为使用者提供了更加精美的动画效果，这对有游戏的设计来说至关重要，很多游戏能够得到人们的广泛关注除了玩法新颖意外，那就是画风优美，让人赏心悦目，这也是HTML5游戏的独特之处。

但是毕竟HTML5是基于浏览器的语言，所以由此开发的游戏也是轻量级的小游戏，随着移动电子产品的多元化，人们更希望通过游戏来释放自己在工作学习中的压力，虽然HTML5不能制作大型游戏，也因此游戏种类千变万化，丰富了人们的生活，不至于再长时间万同一款游戏时觉得枯燥无味。

这也为游戏开发者和供应商提供了更多的机会。

此外HTML5还提供了诸如重力感应，离线地图、多点触控等其他的交互应用功能。

无论是对于游戏还是来说都是一次质的飞越，而作为一个具有探索，好奇心的软件学生来说，学习HTML5必将对自己以后进入社会，对自己以后的工作有所帮助，不断学习新的技术，跟上时代的潮流，这是我们当代大学生的重要职责。

本文通过对HTML5进行短暂的学习之后，完成了对HTML5的小型的实践游戏，来巩固对学习容的理解，找到了网页与游戏的相当好的契合。

1.4本文主要容首先使用了HTML5新添加的<audio>元素标签，对音频进行添加，不再借助第三方软件，方便了我们的编程，只需添加相应的声音文件即可，代码减少了很多，也体现了在各浏览器中的兼容性。

而且我们还可以隐藏播放时的界面，这样就不会影响界面的美观了。

音频功能是有了新的标签，那么人们更多的是注重视频的添加不再那么麻烦，针对这一点HTML5也为此创建了<video>元素标签，使得视频的添加不再过于繁琐，代码也不再过于臃肿。

很多人认为视频要比音频的添加困难，因为视频还包括了图像，但是对于HTML5来说只需要一个标签而已，与音频的添加完全相似。

对于游戏来说最主要的就是界面要美观，这就要说到我们HTML5最主要的新元素<Canvas>了，通过Canvas你可以创建绚丽的图形和游戏界面，不仅如此你还可以通过JavaScript API来控制Canvas进行交互应用，产生动态的图画，动态的更新数据。

不再借助第三方的Flash软件来显示动画，还可以自定义动画容，方便快捷。

HTML5还可以进行本地存储，这个新的功能可以用来存储分数或者是玩家的排行榜。

尽可能的使用新的特性标签来设计实现游戏的基本功能。

2研究技术分析2.1 HTML5简介HTML5是万维网html语言的第五个版本，目前比较流行的版本是HTML4.01，虽然相较先前的版本有了很大的改善，但是随着移动应用的发展，以前的那些版本已经远远达不到人们对于科学技术的要求，Html需要在包括语言方面，语法方面和UI、API等各方面的更新，因此就产生了现在这个新的版本。

在HTML5之前人们更注重用html来制作一些静态的网页，那时候人们通过网络的交互还不是那么发达，从网络上了解外界信息的心情也不是那么迫切，博客，网店也没有兴起。

但是近几年随着科技和经济的不断发展，人们更倾向于从网上获取信息，在网上购买商品，节省了人们很多的时间与精力。

因此再2010年HTML5正式被大家所认可，实现了Web领域近十几年来质的飞跃，将Web推向了一个更高、更成熟、更稳定的平台。

[3]在此基础上HTML5将音频，视频，动画等容融为一体，更是增加了很多新的元素标签，去除了一些繁琐，冗长的标签，将一些相似标签融为一体，比如增加了表单验证标签，节省了表单输入时的麻烦，这些新的标签是网页结构更加紧凑合理。

比如hgroup可以将标题进行分组，合成一个个的整体，使开发页面也更加整洁；还有新添加的导航标签nav，有利于搜索引擎的结果整理。

HTML5相较其他版本的以大亮点就是将audio和video引入到标签中，这样网页播放音频和视频时就不必借助第三方插件，本身就可以做到了。

当然对于游戏来说最主要的还是图形动画的界面要美观，这样才可以吸引更多的人来玩，对于这方面不得不提的就是Canvas标签了，它与其他元素不同，不像audio等元素直接将现有元素插到网页中，而是可以独立的处理或创建2D图形，不仅如此，还可以通过JavaScript语言来控制Canvas的图形来响应与用户交互的动态图形与动画。

2.2游戏引擎介绍完了主要的开发语言平台，那开发过游戏的人都应该了解，开发一款游戏最重要的莫过于引擎了，下面我将介绍一下本次研究课题中所使用到的引擎。

游戏引擎是整款游戏的核心，是游戏的心脏，它提供很多种模板供开发者使用，使游戏设计者不必从零开始，就已经有可用的人物，工具等，减轻了开发者的工作量，也降低了学习游戏开发的门槛。

一般的游戏引擎包括渲染、场景、摄像、脚本、物理因素（重力、摩擦等）、碰撞检测、音效等系统，游戏玩家所体验到的关卡、剧情、玩法等都由引擎来控制，它在整个游戏中扮演着发动机的角色，为整个游戏提供动力，也扮演着幕后角色，在后台指挥者游戏的进程。

一款完整的游戏包括游戏资源（如声音、图片等）和游戏引擎共同组成，缺一不可。

随着游戏种类的不断增加，游戏引擎也是多种多样，一般分为2D引擎和3D引擎，其中2D的引擎又有不同的种类比如cocos2d、Box2D、gamemark、untiy2d等，3D的游戏引擎包括Unity3D、away3D、wolfenstein3D engine、Panda3D等各种各样的引擎可以写出风格各异的游戏，丰富了人们的精神世界。

本文所列举的实例游戏采用的是cocos2d-html5的游戏引擎，这款引擎主要针对用HTML5来编写的游戏，cocos2d-html5包括了导演、场景、布景、摄像机、人物、动作等主要的概念。

导演是整个引擎或者是整个游戏的总指挥，它控制着其他的控件，比如人物该有什么样的动作，有什么样的语言等等，总之其他的事物都要服从导演的指挥；场景和布景主要是负责游戏的背景以及各关卡之间的转换作用，是人们对于一个游戏的第一印象；摄像机是将人物或场景的转换记录下来，连成一段合理的故事；人物和动作也是游戏的灵魂，这里的人物又叫做精灵，其实并不是单纯的指人，也可以是方块等其他的物体，就是给这些精灵附上了动作，才使游戏有了动态的效果。