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

《毕业论文基于HTML5的消除类游戏》由会员分享，可在线阅读，更多相关《毕业论文基于HTML5的消除类游戏（22页珍藏版）》请在装配图网上搜索。

1、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英文摘要、关键字19基于HTML

2、5的消除类游戏 软件学院 软件工程专业指导教师 XXX作 者 XXX摘要：近几年来社会不断地快速发展，也让人们在工作中产生了很多这样那样的压力，随着科技的进步，人们更希望通过网络、通过游戏来释放自己的压力，以往的技术都只是让游戏在笔记本或者移动产品上单独运行，并不可以跨平台操作，这也增加了开发者的工作量，因此经过人们不懈的努力，终于在原有基础上对html进行了改革，这就是HTML5。HTML5具有很多新的特性，最主要的还是它具有跨平台兼容性，不仅可以在电脑上运行，还可以在移动终端运行，不仅如此HTML5中的Canvas元素可以使浏览器直接创建并处理图像，减轻了开发人员的负担，而且使界面更加美观

3、，具有很好的用户体验。减少了用户刷新页面的时间，得到了更多人的认可,因此基于HTML5所制作的游戏也就成了很多人的研究课题。本文通过介绍HTML5的一些特性，以及对游戏引擎的学习，比如cocos2d,unity3d等的认识，并通过当下比较流行的消除类游戏的研发过程分析来使HTML5的内容更加形象，并对HTML5的前景做了一些分析。 关键词：HTML5 Canvas 游戏引擎 cocos2d unity3d1 引言1.1 研究的背景当今社会，随着经济的不断发展，人们对精神领域的追求也在不断加强，人们不再满足于只在笨拙的台式机上进行工作，而是越来越倾向于使用移动电子产品，并且人们对于网页的设计，刷

4、新的速度都有了更高的要求，在这样的一个时代要求下，以前的网页制作语言HTML已经不能满足人们的要求，需要在移动、跨平台等新特性下研发更新html语言。1先前的几个html版本，主要针对的是静态的文本网页，用于显示文档和共享一些数据，后来动态网站和应用程序的出现，使得网页更具有灵动性，但是这些都是基于第三方的插件或者Adobe Flash来完成的，这些插件可以使网站更加丰富，可以提供人机交互的功能。随着网店和网页游戏的不断兴起，Web早就不能只满足于静态的文档，但是Web本身又不具备对视频，音频，图像处理的开发功能，想要在网页中添加这些就必须借助第三方插件，另外有时还需要其他的技术来支持HTML

5、，让它支持多种媒体，这就加重了开发人员的工作量，不仅如此，人们再刷新网页时由于内容过多，耗费时间较长，用户体验差。因此通过不懈的努力，HTML5终于应运而生。1.2 研究的现状HTML5对旧的Web网页制作技术做了大量的改进、创新。它增加了很多新的元素，将一些模块动态化，另外HTML5的核心目标是增加了比如<audio>、<video>等新的媒体元素，这样就可以不用第三方插件来播放多媒体，操作更加简单方便。不仅如此新增加的Canvas元素，可以使浏览器直接创建并处理图形，使得网页布局更加美观大方，也方便了开发人员，代码更加简洁。HTML5不仅是对互联网的改革，它更增加跨

6、平台性，兼容性更好，它将互联网带向了一个更加成熟的平台，使用HTML5开发的程序，不仅可以在电脑上运行，同样人们也可以在移动产品上使用程序，人们获取信息更加方便，快捷。大大的满足了人们对了解各种信息的迫切要求，无论是查看文档信息，还是加载动画、视频，都增加了页面的刷新速度，具有良好的用户体验。HTML5新增加的这些功能，也为网页游戏提供了开发上的便利条件，不再需要第三方插件来支持游戏的音效，动画，给网页游戏开创了一个新的时代。在国内外也掀起了一股学习开发HTML5游戏的热潮，之前的网页游戏开发成本高，即需要服务器端有需要客户端的支持，而现在HTML5可以跨平台操作，可以在更多的移动产品上进行操

7、作，更能满足人们对于便捷的要求。同时开发者只需要在原有基础上了解一下增加的新的HTML5和JS语言，当然对于游戏少不了的还有各种引擎，这些会在后面的文章中有所涉及。1.3 研究的目的由当前的游戏开发趋势来看，以后将会是HTML5的时代，当刷新HTML5的游戏时会像刷新页面那样简单，而且它的所有技术都是开放性的，方便开发者学习和应用。为使用者提供了更加精美的动画效果，这对有游戏的设计来说至关重要，很多游戏能够得到人们的广泛关注除了玩法新颖意外，那就是画风优美，让人赏心悦目，这也是HTML5游戏的独特之处。但是毕竟HTML5是基于浏览器的语言，所以由此开发的游戏也是轻量级的小游戏，随着移动电子产品

8、的多元化，人们更希望通过游戏来释放自己在工作学习中的压力，虽然HTML5不能制作大型游戏，也因此游戏种类千变万化，丰富了人们的生活，不至于再长时间万同一款游戏时觉得枯燥无味。这也为游戏开发者和供应商提供了更多的机会。此外HTML5还提供了诸如重力感应，离线地图、多点触控等其他的交互应用功能。无论是对于游戏还是网站来说都是一次质的飞越，而作为一个具有探索，好奇心的软件学生来说，学习HTML5必将对自己以后进入社会，对自己以后的工作有所帮助，不断学习新的技术，跟上时代的潮流，这是我们当代大学生的重要职责。本文通过对HTML5进行短暂的学习之后，完成了对HTML5的小型的实践游戏，来巩固对学习内容的

9、理解，找到了网页与游戏的相当好的契合。1.4 本文主要内容首先使用了HTML5新添加的<audio>元素标签，对音频进行添加，不再借助第三方软件，方便了我们的编程，只需添加相应的声音文件即可，代码减少了很多，也体现了在各浏览器中的兼容性。而且我们还可以隐藏播放时的界面，这样就不会影响界面的美观了。音频功能是有了新的标签，那么人们更多的是注重视频的添加不再那么麻烦，针对这一点HTML5也为此创建了<video>元素标签，使得视频的添加不再过于繁琐，代码也不再过于臃肿。很多人认为视频要比音频的添加困难，因为视频还包括了图像，但是对于HTML5来说只需要一个标签而已，与音频的

10、添加完全相似。对于游戏来说最主要的就是界面要美观，这就要说到我们HTML5最主要的新元素<Canvas>了，通过Canvas你可以创建绚丽的图形和游戏界面，不仅如此你还可以通过JavaScript API来控制Canvas进行交互应用，产生动态的图画，动态的更新数据。不再借助第三方的Flash软件来显示动画，还可以自定义动画内容，方便快捷。HTML5还可以进行本地存储，这个新的功能可以用来存储分数或者是玩家的排行榜。尽可能的使用新的特性标签来设计实现游戏的基本功能。2 研究技术分析2.1 HTML5简介HTML5是万维网html语言的第五个版本，目前比较流行的版本是HTML4.01

11、，虽然相较先前的版本有了很大的改善，但是随着移动应用的发展，以前的那些版本已经远远达不到人们对于科学技术的要求，Html需要在包括语言方面，语法方面和UI、API等各方面的更新，因此就产生了现在这个新的版本。在HTML5之前人们更注重用html来制作一些静态的网页，那时候人们通过网络的交互还不是那么发达，从网络上了解外界信息的心情也不是那么迫切，博客，网店也没有兴起。但是近几年随着科技和经济的不断发展，人们更倾向于从网上获取信息，在网上购买商品，节省了人们很多的时间与精力。因此再2010年HTML5正式被大家所认可，实现了Web领域近十几年来质的飞跃，将Web推向了一个更高、更成熟、更稳定的平

12、台。3在此基础上HTML5将音频，视频，动画等内容融为一体，更是增加了很多新的元素标签，去除了一些繁琐，冗长的标签，将一些相似标签融为一体，比如增加了表单验证标签，节省了表单输入时的麻烦，这些新的标签是网页结构更加紧凑合理。比如hgroup可以将标题进行分组，合成一个个的整体，使开发页面也更加整洁；还有新添加的导航标签nav，有利于搜索引擎的结果整理。HTML5相较其他版本的以大亮点就是将audio和video引入到标签中，这样网页播放音频和视频时就不必借助第三方插件，本身就可以做到了。当然对于游戏来说最主要的还是图形动画的界面要美观，这样才可以吸引更多的人来玩，对于这方面不得不提的就是Can

13、vas标签了，它与其他元素不同，不像audio等元素直接将现有元素插到网页中，而是可以独立的处理或创建2D图形，不仅如此，还可以通过JavaScript语言来控制Canvas的图形来响应与用户交互的动态图形与动画。2.2 游戏引擎介绍完了主要的开发语言平台，那开发过游戏的人都应该了解，开发一款游戏最重要的莫过于引擎了，下面我将介绍一下本次研究课题中所使用到的引擎。游戏引擎是整款游戏的核心，是游戏的心脏，它提供很多种模板供开发者使用，使游戏设计者不必从零开始，就已经有可用的人物，工具等，减轻了开发者的工作量，也降低了学习游戏开发的门槛。一般的游戏引擎包括渲染、场景、摄像、脚本、物理因素（重力、摩

14、擦等）、碰撞检测、音效等系统，游戏玩家所体验到的关卡、剧情、玩法等都由引擎来控制，它在整个游戏中扮演着发动机的角色，为整个游戏提供动力，也扮演着幕后角色，在后台指挥者游戏的进程。一款完整的游戏包括游戏资源（如声音、图片等）和游戏引擎共同组成，缺一不可。随着游戏种类的不断增加，游戏引擎也是多种多样，一般分为2D引擎和3D引擎，其中2D的引擎又有不同的种类比如cocos2d、Box2D、gamemark、untiy2d等，3D的游戏引擎包括Unity3D、away3D、wolfenstein3D engine、Panda3D等各种各样的引擎可以写出风格各异的游戏，丰富了人们的精神世界。本文所列举的

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

16、果。这些概念相互依存，相互关联、必不可少，少了任何一项整个游戏都会坍塌。4Cocos2d-html5还支持跨平台操作，这也符合了HTML5的新的特性，不仅支持浏览器使用，还可以支持移动应用，让人们随时随地尽情玩耍，现在随处可见拿着移动产品不断玩游戏的人们，不过现在大部分游戏还是用android或Ios语言来写的，我相信随着HTML5的不断发展，将来会有更多的游戏是可以跨平台的，更能满足人们对不同游戏的渴望。2.3 开发环境综合开发工具，网上对于cocos2D的开发工具有很多种，我所选择的开发工具是webstorm,这款工具使用方便，只需要将下载好的cocos2D引擎加载到工具中即可。WebSt

17、orm是一款基于javascript语言的开发工具，被称为“最强的HTML5编辑神器”，它集成了多种模板方便人们开发，还具有拼写检查，重复代码检查，语言分析，智能补全代码，它不仅可以支持不同的浏览器，还支持自定义函数，代码格式化，联想查询，代码调试，代码结构调试、重叠等功能。使用和安装过程相当方便。基本界面如下图：图2.3 界面所使用javascript框架是Jquery,Jquery是一款轻量级的语言框架，它不仅兼容CSS3，而且还兼容各种浏览器（如火狐，IE，opera），它有一个比其他框架更好的特点，那就是它的文档说明非常全，便于开发者自己学习，同时也提供了很多成熟的插件，还可以将程序代

18、码和html内容分开来写，不至于看起来很混乱。Jquery是一款免费，开放的javascript框架，它的语法设计方便了人们的开发与学习，同时它还提供了API，开发者可以自己编写自己想要的插件，主要的是它可以为游戏提供动态特效。2在游戏调试过程中，采用的是火狐浏览器，因为这是一款主流浏览器，这样也方便了开发者的调试，一般经过调试后，再在其他浏览器上运行时也不会有什么大的问题。3 项目的设计与开发3.1 游戏的玩法现在有很多的消除类游戏，而我们所实现的这类游戏应该是玩法最简单的一种，这款消除类游戏是当下比较流行的星星消除，是一款很容易让人着迷的游戏，点击开始后，通过快速点击两个或者两个以上的靠在

19、一起的方块，实现快速消除，每消除一次方块就会得到相应的分数，每一关都会有一个通过本关的目标分数，当你的分数大于或等于目标分数，并且没有可以再在进行消除的方块时，本关游戏通过，最后如果剩余的星星数小于10的话，则可以得到额外的奖励，所以要争取赚的更高的分数，才可以一直进行下去，如果有一关，你并未达到目标分数，那游戏就结束了。3.2 需求分析游戏用户包括开发者和游戏玩家。游戏玩家通过浏览器打开游戏，点击开始按钮，开始游戏。根据游戏提示的玩法开始游戏，并且随时查看自己的得分情况。玩家用例分析如下图：图3.1 用例分析3.3 初步设计首先先设计游戏界面，界面是游戏给玩家的第一印象，对于本项目实例来说大

20、致可以分为游戏前台和游戏后台。前台负责游戏的界面与接受玩家发出的指令，前台还负责游戏音效，游戏初始化以及将玩家的单击双击触发事件发送给后台，并接受后台所发送的分数数据。后台则负责处理数据，将数据反馈给前台，还负责将玩家的得分情况排行情况输入数据库中。模块功能图如下：图3.2 功能设计游戏界面设计是一个10*10的方块矩阵，这个矩阵可以根据自己的喜好自定义更改矩阵的数量，当游戏玩家消除方块后，在游戏引擎的控制下，方块会自动下落，更改自己的位置；前台的界面还提供了音效控制按钮，因为并不是每一个人都喜欢玩游戏的时候有音乐，可以根据个人喜好控制背景音效，不同的事件触发会产生不同音效。开发游戏最重要的一

21、项就是游戏引擎，在前台进行碰撞检测，以及其他的物理引擎检测，将数据或者事件的接口传回后台，后台进行处理后，将结果返回前台，前台根据处理结果，改变场景。3.4 游戏开始流程前台部分用户使用浏览器打开游戏，既可以开始游戏，游戏开始流程如下图：图3.3 流程图后台流程包括数据的接收与发送，以及与数据库的交互行为，将前台检测到的行为进行处理。简易流程图如下：图3.4 后台流程图3.5 部分程序界面与实现开始界面只需要接收按钮的点击事件，游戏首页最主要的应该是有好的用户体验，有一个美观大方的页面，现在玩游戏的不仅是儿童，更多的是那些忙碌了一天的白领用来释放压力，放松身心的最有效的方法，所以界面要美观大方

22、。对于首页，我们既可以使用CSS来美化页面，也可以使用HTML5最新的标签Canvas来渲染界面，最终首页部分代码：Layer1.prototype.onStartClicked = function () this.newGame.runAction(cc.ScaleTo.create(0.2, 1.3); cc.BuilderReader.runScene("", "MainLayer");/开始界面的场景创建Layer1.prototype.createBgParticle = function (x, y, n) var background =

23、 cc.ParticleSystem.create("Resources/bg/" + n + ".png"); background.setAnchorPoint(cc.p(1, 0.5); background.setPosition(cc.p(x, y); background.setZOrder(10); this.rootNode.addChild(background); /初始化背景接下来进入主场景界面，其中部分代码如下：MainLayer.prototype.getRandomStar = function (col, row) this

24、.starSize = 75; var stars = PS_MAIN_TEXTURE.STARS; var randomStar = starsgetRandom(stars.length);/随机产生星星 var starSprite = cc.Sprite.createWithSpriteFrameName(randomStar); starSprite.setAnchorPoint(cc.p(0.5, 0.5);/设置星星的位置 starSprite.setPosition(cc.p(36 + colIndex * this.starSize, 1300); starSprite.st

25、arData = n: randomStar, indexOfColumn: col, indexOfRow: row;/布置星星群 starSprite.setZOrder(100); var flowTime = row / 10; var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + col * this.starSize, 36 + row * this.starSize); starSprite.runAction(fallAction); return starSprite;/在这一部分主要是先建设一个主要场景，添加随机掉落的星

26、星的位置。然后再在已有位置上绘制一个10*10的星星群，for (var i = 0; i < this.numX; i+) var sprites = new Array(this.numY); for (var j = 0; j < this.numY; j+) var pSprite0 = this.getRandomStar(i, j); if (pSprite0 != null) this.rootNode.addChild(pSprite0); spritesj = pSprite0; /添加星星群。到这里，这个游戏的基本雏形已经完成，因为本文只是大概的介绍一下整个游戏

27、制作过程中部分代码，所以这里主要介绍的是JS的部分控制代码。游戏中的算法分析，每一颗星星添加单击事件，在此部分需要判断一下碰撞检测，当点击任何一个星星时，第一次单击是选中星星，并判断一下，与它相邻的周围是否有与它相同的星星，如果有则全部选中，并进行第二次单击消除星星，通过语句this.sameColorList.length可以判断出是第几次单击事件，如果它的值小于1，那就表示是第一次单击事件，就检测一下是否有颜色相同的区域；如果它的值大于1，那就表示是第二次单击事件，这时候就要判断是否点击的是同一个星星，如果是那就进行消除操作，操作主要语句是this.removeSameColorStars

28、()，当消除星星时，还应该添加上声音，语句为cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.broken, false)。第二步就是要检测一下所选中的星星周围是不是有相同的颜色的星星，如果有，那就将它们放到同一个数组中去，如果数组的长度大于1，则说明周围有相同的星星。在这只举一个例子，比如左面：var fourSideSpriteList = ;/创建数组变量。 var color = sprite.starData.color; var col = sprite.starData.indexOfColumn;if (col >

29、; 0) var left = this.starTablecol - 1row; if (left != null && left.starData.color = color) fourSideSpriteList.push(left); /判断左边的相邻星星是否颜色一致。在玩游戏的过程中，你会发现，但你选中星星后，相同颜色的会有一片，会自动判断每一颗选中的星星的相同颜色，这就用到了this.sameColorList和newSameColorList这两个数组，第一个数组判断的是当前选中的星星的相邻相同颜色，第二个数组判断的是新选中的延伸出来的星星是否颜色相同。当将上述语

30、句判断完成后，就是要进行消除工作了，不仅要让星星消除，还应该加上一些动画效果，有助于用户体验，主要语句var simpleStar = this.sameColorListk;/K为颜色的变量小于颜色数组长度var col = simpleStar.starData.indexOfColumn;var row = simpleStar.starData.indexOfRow;/创建行和列的变量this.starTablecol.splice(row, 1, null);/边界星星位置this.rootNode.removeChild(simpleStar);/删除颜色相同的星星当产生空余空间时

31、，利用引擎的重力和碰撞检测功能将剩余的临近的星星填充到空余空间，重复这样的动作，只到最后不再有2个或2个以上的相同星星存在时，然后再判断一下所得分数是否已经超过或等于目标分数，如果超出则进入下一关，否则游戏结束。在游戏中人们最关注的莫过于分数了，星星消除的记分规则如下，在主函数中创建一个Score变量，开始值为0，当你只能消除2颗星星时获得20分，消除3颗星星时获得45分，消除4颗星星时获得80分，以此类推，消除的星星数越多，得到的分数就越多，当最后没有可以消除的星星时，剩余的星星会自动消除，如果剩余星星数小于10，则会有额外的加分，所得分数是将这两者相加，判断最后是否超过目标分数，目标分数也

32、会随着关数的增加而增加，这样也挑战着人们的极限，促使人们不断的刷新自己记录。最终游戏界面如下图所示：图4.1 开始界面点击新游戏界面进入初始化的星星群界面：图4.2 星星群界面选中星星界面：图4.3 选中界面游戏进行中画面：图4.4 进行中的界面4 总结4.1 项目学习阶段总结经过了一段时间的学习和时间之后，使我更加深入的了解了HTML5 的各个新的特性，通过使用HTML5和javascript语言编写的这个程序，我明白了如何独立自主的学习一门新的语言，当然只有理论知识还不够，计算机软件就是一个需要不断探索，不断实践的科学，当人们意识到先前的html语言已经不能满足人们的要求时，不断创新，不断

33、进取，不断挑战着自己的极限，也就有了HTML5的诞生。HTML5将网页开发带入了一个新的时代，摒弃了一些其他版本中繁琐的标签，又为网页注入了新的能量，HTML5所制作的不仅是支持多种浏览器，还具有跨平台性，也为网络游戏提供了更多的平台，而且具有较高的安全性和良好的用户体验。现在各大公司纷纷转向了HTML5的研究方向，这也就预示着它将有一个良好的发展前景，它将人们的视线从网络浏览器带向了移动应用，它将横跨多个智能平台。虽然HTML5刚刚问世，一些资料还不健全，但是作为一个当代大学生来说，我们更应该努力学习先进的技术，将理论与实践相结合，不能完全依赖与已有的资料，要通过自己的不断摸索完善HTML5

34、，因此才规定HTML5的技术要绝对开源，供大家讨论分享，提出更多的意见，使得HTML5更加健壮。随着移动应用的不断增长，移动游戏也越来越受到人们的追捧，游戏引擎也会越来越多，这样人们再开发游戏时就会省去一大部分的时间，减少工作量，游戏的更新换代速度也会增加。4.2 项目实施阶段总结在项目实施阶段，首先要做好游戏的分析工作，可以先借鉴一下别人成功的案例，具体情况具体分析，做好需求分析，如果遇到自己解决不了的问题应该及时向老师或他人请教，毕竟HTML5是一种新的语言形式，又加上从未接触过的游戏引擎，虽然说这次的任务难度有点大，但是只要用心学习，虽然称不上完整无缺的游戏，但是最终也是完成了任务。虽然

35、游戏很小，但是也包含了两大块重要的内容，不得不在原有基础上，给自己注入新的血液，观看理论知识，觉得还可以，当真正的开始一个小的Demo时，才发现原来实践起来是那么的困难。就拿HTML5的新增标签Canvas来说，以前只使用过CSS来渲染页面，当时就觉得不太好用，因为不同的浏览器会产生不同的效果，你需要在不同的浏览器上不停的调试，兼容性很不好。而且如果想要在页面上播放视频 、音频你必须借助第三方的插件才可以，但是HTML5的Canvas本身就可以借助javascript语言来达到动画的效果，不需要任何的第三方插件，本来以为可以很轻松的搞定它，但是Canvas并不像flash那样好控制，因为它全部

36、是用语言来控制的，不像flash有一个友好的界面，方便调试。虽然有些小的问题存在，但是这并不影响HTML5的实用性，使用HTML5开发游戏更加方便快捷。4.3 扩展知识HTML5最吸引游戏开发者的地方就是，它具有跨平台性，无论是PC还是Andoid系统，亦或是苹果系统，使用HTML5开发的游戏都可以运行在这些平台上，大大减少了开发者的工作量，只要在一款平台上制作的游戏，其他平台可以直接使用相同的代码，方便游戏的及时更新。用户无论是在电脑上还是在移动电子产品上都可以玩到相同的游戏，甚至是可以联网操作。跨平台的兼容性有好处也有坏处，当你设计了一款游戏开始只打算在电脑上玩时，为这款有添加了漂亮的界面

37、，完整的音效，如果你想把它转移到其他平台时，虽然可以转移，但你必须根据不同的平台，做一些相应的调整，并不是说可能是代码的问题，只是你应该也要考虑硬件，是否支持，如果你直接转移应用，或许效果并不会很好。现在的HTML5还在发展当中，所以说不可以以偏概全，虽然跨平台是它的一大亮点，但目前技术还不是很发达，会产生一些碎片，比如界面动画不完整，触摸事件无法响应等问题。因此，跨平台的研究还需要不断创新，不断改革，争取早日实现真正的跨平台操作，减轻开发人员的工作量，为游戏玩家提供更多更好的游戏，让人们随时随地都可以尽情的玩自己喜欢的游戏。致谢 四年的大学生活即将结束，在最后这半年最重要的事情就是毕业设计和

38、毕业论文的撰写，在我进行毕业设计，撰写论文其间，我的指导老师XXX老师给予了我很大的帮助，在我遇到不懂得问题时老师耐心的教导，指点我，及时纠正我再设计和论文上的不足之处。大二时期X老师就给我上过课，那时候就觉得老师在治学上很严谨，耐心的指导我们，直到将我们的问题教会，在我编写论文期间，老师有为我提供了很多资料，也很热心的和我探讨不明白的地方。从开始到论文的完成，老师都是不辞辛苦的为我解答，占用了老师很多宝贵的时间，在此我向X老师表示万分的感谢。您所教会我的不仅是知识，还有您待人接物的道理，作为您的学生让我受益一生。还要感谢那些与我并肩作战的同学们，是你们和我一起讨论资料，研究课题，并且指出我再

39、设计或者其他方面的不足，我们共同成长，共同进步。以及以前带过我的老师们，您们用专业的知识教育我，有的老师有时甚至都顾不上吃饭，也在为我们答疑解惑，您们这种精神感染着我，为我走进社会奠定了良好的基础，在此向我的同学们和辛勤工作的老师们报以衷心的感谢，感谢你们成就了今天的我。当然还有那些热心的网友，虽然我们素不相识，但你们却给予了我真诚的帮助，在论坛上积极为我解答问题，积极的给我提供各种各样的资料，在我的论文完成之际，也向你们表达我真诚的感谢。我相信有了大家的帮助，我以后一定可以很快的融入社会，在自己的领域上不断创新，再次感谢大家的帮助。参考文献1 Peter Lubbers美，Brian Alb

40、ers 美，Frank Salim美著，李杰，柳靖，刘淼译.HTML5高级程序设计M.北京，人民邮电出版社，2011.2 ChristianHeilmann德著.牛海彬译.深入浅出JavaScriptM.北京,人民邮电出版社,2008.3Rob Hawkes英著，周广新，曾少宁，盛海艳译.HTML5 Canvas基础教程M.北京，人民邮电出版社, 2012.1. 4满硕泉著.Cocos2D-x权威指南M.北京，机械工业出版社，2013.4.The elimination game based on HTML5Abstract: In recent years continuously rapi

41、d development of society. To get people to work in a lot of this or that kind of pressure. With the progress of science and technology. People more hope through the network or through the games to release the pressure of their own. Previous technology is to make the game on the laptop or mobile prod

42、uct run alone,can not cross-platform operation. It also increases the workload of developers. So after people unremitting efforts, finally on the basis of the original has carried on the reform to HTML. This is HTML5.HTML5 has a lot of new features. The main or it has a cross-platform compatibility.

43、 Not only can run on a computer, but also can run in the mobile terminal. The Canvas element in the HTML 5 can make the browser directly created and image picture. Reduce the burden of the developers, and make the interface more beautiful. Has a good user experience. Reduced the amount of time the u

44、ser refresh the page. Based on the HTML 5 game has become a lot of people.In this paper, through the introduction of the features of HTML 5. And the study of game engine, such as cocos2d, unity3d, etc.Through the elimination of the more popular game analysis of the development process to make HTML5 more the content of the image.Key Words: HTML5 Canvas game engine cocos2d unity3d