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

XXXXX大学本科生毕业论文设计基于HTML5的消除类游戏作者姓名：指导教师：所在学院：专业（系）：班级（届）：二〇XX年X月X日目录中文摘要、关键字………………………………………………………………11引言………………………………………………………………21.1研究背景………………………………………………………………21.2研究现状………………………………………………………………21.3研究目的………………………………………………………………31.4本文主要内容………………………………………………………………32研究技术分析………………………………………………………………42.1HTML5简介………………………………………………………………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的前景做了一些分析。关键词：HTML5Canvas游戏引擎cocos2dunity3d21引言1.1研究的背景当今社会，随着经济的不断发展，人们对精神领域的追求也在不断加强，人们不再满足于只在笨拙的台式机上进行工作，而是越来越倾向于使用移动电子产品，并且人们对于网页的设计，刷新的速度都有了更高的要求，在这样的一个时代要求下，以前的网页制作语言HTML已经不能满足人们的要求，需要在移动、跨平台等新特性下研发更新html语言。[1]先前的几个html版本，主要针对的是静态的文本网页，用于显示文档和共享一些数据，后来动态网站和应用程序的出现，使得网页更具有灵动性，但是这些都是基于第三方的插件或者AdobeFlash来完成的，这些插件可以使网站更加丰富，可以提供人机交互的功能。随着网店和网页游戏的不断兴起，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你可以创建绚丽的图形和游戏界面，不仅如此你还可以通过JavaScriptAPI来控制Canvas进行交互应用，产生动态的图画，动态的更新数据。不再借助第三方的Flash软件来显示动画，还可以自定义动画内容，方便快捷。HTML5还可以进行本地存储，这个新的功能可以用来存储分数或者是玩家的排行榜。尽可能的使用新的特性标签来设计实现游戏的基本功能。2研究技术分析2.1HTML5简介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、wolfenstein3Dengine、Panda3D等各种各样的引擎可以写出风格各异的游戏，丰富了人们的精神世界。本文所列举的实例游戏采用的是cocos2d-html5的游戏引擎，这款引擎主要针对用HTML5来编写的游戏，cocos2d-html5包括了导演、场景、布景、摄像机、人物、动作等主要的概念。导演是整个引擎或者是整个游戏的总指挥，它控制着其他的控件，比如人物该有什么样的动作，有什么样的语言等等，总之其他的事物都要服从导演的指挥；场景和布景主要是负责游戏的背景以及各关卡之间的转换作用，是人们对于一个游戏的第一印象；摄像机是将人物或场景的转换记录下来，连成一段合理的故事；人物和动作也是游戏的灵魂，这里的人物又叫做精灵，其实并不是单纯的指人，也可以是方块等其他的物体，就是给这些精灵附上了动作，才使游戏有了动态的效果。这些概念相互依存，相互关联、必不可少，少了任何一项