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

XXXXX 大学本科生毕业论文设计基于 HTML5 的消除类游戏作者姓名：指导教师：所在学院：专业（系）：班级（届）：二 XX 年 X 月 X 日目 录中文摘要、关键字 11 引言 21.1 研究背景 21.2 研究现状 21.3 研究目的 31.4 本文主要内容 32 研究技术分析 42.1 HTML5 简介 42.2. 游戏引擎 42.3 开发环境 53 项目的设计与开发 63.1 游戏玩法 63.2 需求分析 63.3 初步设计 63.4 游戏开始流程 73.5 部分程序界面与实现 94 总结 144.1 项目学习阶段总结 144.2 项目实施阶段总结 154.3 扩展知识 15致谢 17参考文献 18英文摘要、关键字 191基于 HTML5 的消除类游戏软件学院 软件工程专业指导教师 XXX作 者 XXX摘要：近几年来社会不断地快速发展，也让人们在工作中产生了很多这样那样的压力，随着科技的进步，人们更希望通过网络、通过游戏来释放自己的压力，以往的技术都只是让游戏在笔记本或者移动产品上单独运行，并不可以跨平台操作，这也增加了开发者的工作量，因此经过人们不懈的努力，终于在原有基础上对 html 进行了改革，这就是 HTML5。HTML5 具有很多新的特性，最主要的还是它具有跨平台兼容性，不仅可以在电脑上运行，还可以在移动终端运行，不仅如此 HTML5 中的 Canvas 元素可以使浏览器直接创建并处理图像，减轻了开发人员的负担，而且使界面更加美观，具有很好的用户体验。减少了用户刷新页面的时间，得到了更多人的认可,因此基于 HTML5 所制作的游戏也就成了很多人的研究课题。本文通过介绍 HTML5 的一些特性，以及对游戏引擎的学习，比如 cocos2d,unity3d等的认识，并通过当下比较流行的消除类游戏的研发过程分析来使 HTML5 的内容更加形象，并对 HTML5 的前景做了一些分析。 关键词：HTML5 Canvas 游戏引擎 cocos2d unity3d21 引言1.1 研究的背景当今社会，随着经济的不断发展，人们对精神领域的追求也在不断加强，人们不再满足于只在笨拙的台式机上进行工作，而是越来越倾向于使用移动电子产品，并且人们对于网页的设计，刷新的速度都有了更高的要求，在这样的一个时代要求下，以前的网页制作语言 HTML 已经不能满足人们的要求，需要在移动、跨平台等新特性下研发更新html 语言。1先前的几个 html 版本，主要针对的是静态的文本网页，用于显示文档和共享一些数据，后来动态网站和应用程序的出现，使得网页更具有灵动性，但是这些都是基于第三方的插件或者 Adobe Flash 来完成的，这些插件可以使网站更加丰富，可以提供人机交互的功能。随着网店和网页游戏的不断兴起，Web 早就不能只满足于静态的文档，但是Web 本身又不具备对视频，音频，图像处理的开发功能，想要在网页中添加这些就必须借助第三方插件，另外有时还需要其他的技术来支持 HTML，让它支持多种媒体，这就加重了开发人员的工作量，不仅如此，人们再刷新网页时由于内容过多，耗费时间较长，用户体验差。因此通过不懈的努力，HTML5 终于应运而生。1.2 研究的现状HTML5 对旧的 Web 网页制作技术做了大量的改进、创新。它增加了很多新的元素，将一些模块动态化，另外 HTML5 的核心目标是增加了比如、等新的媒体元素，这样就可以不用第三方插件来播放多媒体，操作更加简单方便。不仅如此新增加的 Canvas 元素，可以使浏览器直接创建并处理图形，使得网页布局更加美观大方，也方便了开发人员，代码更加简洁。HTML5 不仅是对互联网的改革，它更增加跨平台性，兼容性更好，它将互联网带向了一个更加成熟的平台，使用 HTML5 开发的程序，不仅可以在电脑上运行，同样人们也可以在移动产品上使用程序，人们获取信息更加方便，快捷。大大的满足了人们对了解各种信息的迫切要求，无论是查看文档信息，还是加载动画、视频，都增加了页面的刷新速度，具有良好的用户体验。HTML5 新增加的这些功能，也为网页游戏提供了开发上的便利条件，不再需要第三方插件来支持游戏的音效，动画，给网页游戏开创了一个新的时代。在国内外也掀起了一股学习开发 HTML5 游戏的热潮，之前的网页游戏开发成本高，即需要服务器端有需要客户端的支持，而现在 HTML5 可以跨平台操作，可以在更多的移动产品上进行操作，更能满足人们对于便捷的要求。同时开发者只需要在原有基础上了解一下增加的新的HTML5 和 JS 语言，当然对于游戏少不了的还有各种引擎，这些会在后面的文章中有所涉及。1.3 研究的目的由当前的游戏开发趋势来看，以后将会是 HTML5 的时代，当刷新 HTML5 的游戏时会像刷新页面那样简单，而且它的所有技术都是开放性的，方便开发者学习和应用。为使用者提供了更加精美的动画效果，这对有游戏的设计来说至关重要，很多游戏能够得到人们的广泛关注除了玩法新颖意外，那就是画风优美，让人赏心悦目，这也是 HTML5 游戏的独特之处。但是毕竟 HTML5 是基于浏览器的语言，所以由此开发的游戏也是轻量级的小游戏，随着移动电子产品的多元化，人们更希望通过游戏来释放自己在工作学习中的压力，虽然 HTML5 不能制作大型游戏，也因此游戏种类千变万化，丰富了人们的生活，不至于再长时间万同一款游戏时觉得枯燥无味。这也为游戏开发者和供应商提供了更多的机会。此外 HTML5 还提供了诸如重力感应，离线地图、多点触控等其他的交互应用功能。无论是对于游戏还是网站来说都是一次质的飞越，而作为一个具有探索，好奇心的软件学生来说，学习 HTML5 必将对自己以后进入社会，对自己以后的工作有所帮助，不断学习新的技术，跟上时代的潮流，这是我们当代大学生的重要职责。本文通过对 HTML5 进行短暂的学习之后，完成了对 HTML5 的小型的实践游戏，来巩固对学习内容的理解，找到了网页与游戏的相当好的契合。1.4 本文主要内容首先使用了 HTML5 新添加的元素标签，对音频进行添加，不再借助第三方软件，方便了我们的编程，只需添加相应的声音文件即可，代码减少了很多，也体现了在各浏览器中的兼容性。而且我们还可以隐藏播放时的界面，这样就不会影响界面的美观了。音频功能是有了新的标签，那么人们更多的是注重视频的添加不再那么麻烦，针对这一点 HTML5 也为此创建了元素标签，使得视频的添加不再过于繁琐，代码也不再过于臃肿。很多人认为视频要比音频的添加困难，因为视频还包括了图像，但是对于HTML5 来说只需要一个标签而已，与音频的添加完全相似。对于游戏来说最主要的就是界面要美观，这就要说到我们 HTML5 最主要的新元素了，通过 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 包括了导演、场景、布景、摄像机、人物、动作等主要的概念。导演是整个引擎或者是整个游戏的总指挥，它控制着其他的控件，比如人物该有什么样的动作，有什么样的语言等等，总之其他的事物都要服从导演的指挥；场景和布景主要是负责游戏的背景以及各关卡之间的转换作用，是人们对于一个游戏的第一印象；摄像机是将人物或场景的转换记录下来，连成一段合理的故事；人物和动作也是游戏的灵魂，这里的人物又叫做精灵，其实并不是单纯的指人，也可以是方块等其他的物体，就是给这些精灵附上了动作，才使游戏有了动态的效果。这些概念相互依存，相互关联、必不可少，少了任何一项整个游戏都会坍塌。4Cocos2d-html5 还支持跨平台操作，这也符合了 HTML5 的新的特性，不仅支持浏览器使用，还可以支持移动应用，让人们随时随地尽情玩耍，现在随处可见拿着移动产品不断玩游戏的人们，不过现在大部分游戏还是用 android 或 Ios 语言来写的，我相信随着 HTML5 的不断发展，将来会有更多的游戏是可以跨平台的，更能满足人们对不同游戏的渴望。2.3 开发环境综合开发工具，网上对于 cocos2D 的开发工具有很多种，我所选择的开发工具是webstorm,这款工具使用方便，只需要将下载好的 cocos2D 引擎加载到工具中即可。WebStorm 是一款基于 javascript 语言的开发工具，被称为“最强的 HTML5 编辑神器” ，它集成了多种模板方便人们开发，还具有拼写检查，重复代码检查，语言分析，智能补全代码，它不仅可以支持不同的浏览器，还支持自定义函数，代码格式化，联想查询，代码调试，代码结构调试、重叠等功能。使用和安装过程相当方便。基本界面如下图：图 2.3 界面所使用 javascript 框架是 Jquery,Jquery 是一款轻量级的语言框架，它不仅兼容CSS3，而且还兼容各种浏览器（如火狐，IE，opera） ，它有一个比其他框架更好的特点，那就是它的文档说明非常全，便于开发者自己学习，同时也提供了很多成熟的插件，还可以将程序代码和 html 内容分开来写，不至于看起来很混乱。Jquery 是一款免费，开放的 javascript 框架，它的语法设计方便了人们的开发与学习，同时它还提供了 API，开发者可以自己编写自己想要的插件，主要的是它可以为游戏提供动态特效。2在游戏调试过程中，采用的是火狐浏览器，因为这是一款主流浏览器，这样也方便了开发者的调试，一般经过调试后，再在其他浏览器上运行时也不会有什么大的问题。3 项目的设计与开发3.1 游戏的玩法现在有很多的消除类游戏，而我们所实现的这类游戏应该是玩法最简单的一种，这款消除类游戏是当下比较流行的星星消除，是一款很容易让人着迷的游戏，点击开始后，通过快速点击两个或者两个以上的靠在一起的方块，实现快速消除，每消除一次方块就会得到相应的分数，每一关都会有一个通过本关的目标分数，当你的分