毕业论文-基于HTML5的消除类游戏
基于HTML5和JavaScript的消消乐游戏的设计和实现
对 全 的 方 块 郜 进 行 相 连 的 判 断 ． 如果 存 在 上 述 情 况 ．
将 这 方 块 直 接 清 除 ， 并 补 充 新 的 方块 ， 再 一 次 进 行 全 罔的判断 ， 循环这 个判断 、 清除 、 补 充 的过 程 。 直 到 不 再
关键词 ：
Ｈ Ｔ ＭＬ ５ ； Ｊ ａ ｖ ａ Ｓ ｃ ｒ ｉ ｐ ｔ ； 消消乐 ； 游戏设计 ； 算 法
０ 引 言
近 几 年 各 种 小 型游 戏 兴 起 ， 成为上班途 中 、 工 作 学 习 之 余 利 用 零 散 的 时 间 放 松 身 心 的消 遣 活 动 ．拥 有 广 大的受众群体 ． ．随 着 近 年 来 网 页 技 术 的 不 断 发 展 和 完 善 ．使 用 Ｈ Ｔ Ｍ Ｌ ５和 Ｊ ａ ｖ ａ Ｓ ｃ ｒ ｉ ｐ ｔ 制 作 游 戏 已 成 为 一 种 主 流， 网页游戏拥 有跨平 台 、 免安 装免 更新 的优点 ． 使 用 手机 、 平板或电脑的网页浏览器便能实现操作 。 本文 以 Ｈ Ｔ ＭＬ ５和 Ｊ ａ ｖ ａ Ｓ ｃ ｉ ｆ ｐ ｔ 作 为平 台 ．实 现 消 消 乐游 戏（ 三 消游戏 ） 的游戏 主体设计 ． 主 要 介 绍 游 戏 界 面 的实 现 、 游 戏 方 块 相 连 的判 定 和 消 除 、 游 戏 过 程 中 动 画 效 果 的 实 现
游 戏阶 段
游 戏控 制
蛭 面加 载
游 戏 方 块 生 成 Ｈ 籍
否
囊 凳Ｈ 方 块
清 除标 ｉ ｄ方块 计算游戏得分
完成 游 戏 初始 化 或完 成 方块 处 理 等 待玩 家 操 作
基于HTML5技术的游戏开发与实现
2019 年第 9 期
1.4 突破常规浏览器游戏限制 在传统的游戏设计中，它通常仅限于在特定范围内构建
游戏，就像在电视机上玩视频游戏一样，用户只能在 Web 浏 览器的方框里玩 Flash 游戏。在 HTML5 游戏中，游戏阶段 不再局限于单个框。人们希望能与所有页面元素进行交互， 并且可使用多个浏览器窗口来构建游戏。 1.5 天然的营销推广利器
作者简介：阳晓霞 (1982—)，女，湖南衡阳人，硕士研究生，高级工程师。研究方向：HTML5 网页设计、大数据分析。 谭卫 (1981—)，女，湖南岳阳人，硕士研究生，高级工程师，讲师。研究方向：网站开发、UI 设计。
— ６９ —
软件开发与应用
信息与电脑 China Computer & Communication
1.1 安全
1.3 不需要插件就能支持 IOS 设备
HTML5 游戏与 APP 游戏的不同之处在于它们没有各种安 全问题，例如收费陷阱，随机广告和非法窃取用户信息，因为 在浏览器中运行的 HTML5 游戏非常安全，并且值得用户信任。
1.2 跨平台
在多屏时代，开发者的痛苦指数非常高，每个人都希望
已故乔布斯大神曾说：“没人愿意使用 Flash，全球已 开始步入 H5 时代”。HTML5 的 Canvas 标签允许进行更多 的交互和动画，就像人们用 Flash 实现的效果一样，用户不 需要预先安装第三方插件 Flash 来玩游戏。出于某种原因， Apple 不允许 Flash 播放器在其 Safari 移动版本上运行，恰好 HTML5 和相关 Web 标准弥补了这一缺陷。
(Heyuan Polytechnic, Heyuan Guangdong 517000, China)
基于HTML5的智力游戏设计-电子信息工程本科学生毕业论文.doc
本科学生毕业论文（设计）题目（中文）：基于HTML5的智力游戏设计（英文）：Design of Intelligent Game Based on HTML5 姓名 xxx学号xxx院（系）电子与信息工程学院专业、年级电子信息工程指导教师 xxx 讲师2017年 5月10日xxx科技学院本科毕业论文（设计）诚信声明本人郑重声明：所呈交的本科毕业论文（设计），是本人在指导老师的指导下，独立进行研究工作所取得的成果，成果不存在知识产权争议，除文中已经注明引用的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品成果。
对本文的研究做出重要贡献的个人和集体均已在文中以明确方式标明。
本人完全意识到本声明的法律结果由本人承担。
本科毕业论文（设计）作者签名：二〇一七年五月十日毕业论文（设计）任务书课题名称基于HTML5的智力游戏设计姓名xxx学号xxx院系电子与信息工程学院专业电子信息工程指导教师xxx 讲师2015年10月20日2、毕业论文（设计）内容要求：该课题需要设计和实现一个在网页上运行的智力游戏，需要使JavaScript 语言和Webstorm或其他前端开发工具，要求所设计的游戏画面良好，运行流畅。
(1)游戏介绍：①游戏为益智类游戏，越到后面越难越有挑战；②游戏玩法：使用键盘上、下、左、右键控制所有方块往这个方向移动。
③游戏规则：当所有方块往一个方向移动时，数字相同的方块可以相加变成一个方块，当拼出一个方块为2048，即为胜利；当16宫被占满且所有相邻方块不能再相加时，游戏结束；④游戏界面：游戏界面有新游戏，记录当前分数，游戏介绍，记录历史最高分；⑤按照游戏的系统实现方法，做出系统分析、系统设计、系统实施。
（2）主要工作量和工作流程如下：①进行系统的需求分析；②开始搭建开发平台和环境；③根据需求分析和设计图来进行代码的编写；④对功能模块进行测试；⑤对项目整体进行测试；⑥将项目打包上传至网站；⑦完成毕业论文撰写，论文格式严格按照xxx科技学院本科毕业设计（论文）规范撰写，字数不少于10000字；⑧准备答辩。
神奇消消乐(HTML小游戏使用JavaScript开发)
神奇消消乐（HTML小游戏使用JavaScript开发）神奇消消乐是一款基于HTML和JavaScript开发的小游戏，它的规则简单而有趣，容易上手并且适合各个年龄段的玩家。
本文将详细介绍神奇消消乐的开发过程和主要功能，以及如何运用HTML和JavaScript技术来实现这款小游戏。
1. 游戏概述神奇消消乐是一款以消除连连看为基础的HTML小游戏。
玩家需要在有限的时间内消除游戏区域中的所有方块，通过选择两个相同的方块使它们消失并得分。
随着游戏的进行，难度会逐渐增加，玩家需要更多的注意力和反应速度来完成挑战。
2. 游戏界面设计为了使游戏界面看起来美观且易于操作，我们采用了简洁而直观的设计风格。
游戏区域呈正方形形状，由多个小方块组成。
在游戏的开始界面，我们以醒目的字体展示游戏的名称，并提供开始按钮供玩家点击。
游戏进行中，玩家可以看到剩余时间、得分等信息，以及当前可消除的方块。
3. 游戏功能实现为了实现神奇消消乐的主要功能，我们使用了JavaScript编程语言。
以下是游戏的主要功能实现方式：1) 创建游戏区域和方块：通过JavaScript函数和DOM操作，我们可以在HTML页面中动态地创建游戏区域，并使用随机数来生成不同类型的方块。
2) 方块点击事件：通过添加方块的点击事件监听器，玩家可以选择两个相同的方块进行消除。
当方块被点击时，我们可以通过判断其类型来执行相应的操作，如消除、得分增加等。
3) 连线检测：为了判断两个方块是否可以消除，我们需要进行连线检测。
通过遍历游戏区域并比较方块的类型和位置，我们可以确定是否存在连线路径，并在玩家消除方块时进行相应的提示或奖励。
4) 时间限制和计时器：为了增加游戏的挑战性，我们设置了时间限制，并在页面上显示倒计时器。
通过JavaScript的计时器函数，我们可以每秒更新时间并检查游戏是否结束。
5) 得分计算和排名系统：在游戏结束时，我们将根据玩家的得分进行排名，并在页面上展示排名列表。
基于HTML5的闯关游戏式课程教学考核的设计和实现
Computer Era No.320190引言随着移动互联的迅猛发展，FLASH 在移动设备中具有一定的局限性，而HTML5和JavaScript 拥有跨平台、不需要安装以及不需要更新等特点，只要用智能手机、平板或台式电脑的网页浏览器就可以进行操作[1]。
当代学生爱玩手机，对富有激情和挑战的项目具有强烈的使用动机。
如果在学习中引入闯关式教学考核项目，将课程知识融入到闯关式的游戏场景中，既考查了学生的学习能力，又契合当代学生的心理特点。
学生在学习中体验到游戏的互动性、趣味性、竞争性和即时反馈等特性，必定可以提升在线学习的乐趣。
本文提出了利用HTML5和JavaScript 网页技术来开发闯关游戏。
它主要利用HTML5新增的拖放功能和使用JavaScript 控制游戏运作。
1HTML5和JavaScript 简介HTML5是目前HTML 最新的修改版本，2014年10月由万维网联盟（W3C ）完成标准制定。
设计HTML5的目标是为了在移动设备上支持多媒体。
HTML5的优势主要表现以下方面[2]。
⑴跨平台性。
不需要考虑兼容性和不同平台的多个版本的发布，为开发者节省了巨大的开发投入，也是未来大家首先的开发方式。
⑵标准化。
这个也是跨平台的基础，因为未来所有浏览器、所有设备均遵循这一标准。
标准化是得以广泛使用的基础，就像TCP/IP 协议，因为其标准化，才得以让网络世界互通互联。
⑶易学易用。
人人都应该会HTML5，这是可以不需要任何特定开发环境的，只要用记事本，电脑上装有浏览器就可以开始，效果可见。
第四，易传播，DOI:10.16644/33-1094/tp.2019.03.013基于HTML5的闯关游戏式课程教学考核的设计和实现*徐晓(无锡机电高等职业技术学校，江苏无锡214028)摘要：随着移动互联网的发展，网页中的功能效果将通过HTML5和JavaScript 来实现。
为了激发学生的学习动机，文章提出了利用HTML5和JavaScript 网页技术来实现闯关游戏式课程教学考核。
html5课程论文-基于html5的贪吃蛇游戏
HTML5课程设计题目：基于html5的贪吃蛇游戏学院：__商学院___________专业：__ 信息管理与信息系统**：**指导教师：田更2015年6月10日摘要随着互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式也开始不断的变化，越来越多的应用可以直接以浏览器打开的方式使用，数据则是存储在云端，更加的安全可靠，方便用户共享数据。
在各种应用不断的趋于更加网络话的同时，一种新的技术标准也随之产生，那就是HTML5（HTML是一种标记语言也是一种标准，互联网开发居于此）。
HTML5是近十年来Web（互联网）标准最巨大的飞跃，和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图象和动画，以及同电脑的交互都被标准化。
也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的富客户端，这个客户端可以在移动终端、PC（个人计算机）或者其他可以有网络的地方轻松的运行。
所以此时研究HTML5，并且大胆的实践有着重要的意义。
课题内容是使用HTML5技术基于Web的环境来制作一个网络版的“坦克大战”游戏应用，该游戏使用了HTML5中的Canvas（画布）、WebSocket（HTML5中最新使用的一种网络连接协议，用于实时通讯）、Audio（HTML5中控制声音的技术）等最新的技术。
目前HTML5标准尚未成熟，很多地方仍在变动，API（应用程序接口）仍不是很稳定，所以还无法真正的完全商用或者全部普及开，但这并不会影响我们来研究它。
服务器端采用的Nodejs（一种Javascript程序语言框架，可以在服务器端运行Javascript语言）这种新型的框架来开发，Nodejs使用Javascript语言来开发，使整个应用从客户端到服务器端编程都是使用Javascript，大大的减少学习成本和开发成本，并且Nodejs性能强大，有很大的研究价值。
一个基于HTML，Javascript的消除游戏
一个基于HTML，Javascript的消除游戏消除游戏-消消乐一个基于HTML，Javascript的消除游戏。
使用了createjs框架。
-> view online demoscreenshot:Example 1:Example “hint()”:Example [col&row]:{col:20, //set 20 columnsrow:16, //set 16 rows}usage:<div class="game-container"><canvas id="js-game" width="300" height="250" class="gamecanvas"></canvas></div><script src="res/zepto.min.1.1.6.js"></script><script src="res/easeljs-0.8.2.min.js"></script><script src="res/tweenjs-0.6.2.min.js"></script><script src="res/hammer.min.js"></script><script src="xiaoxiaole.js"></script><script>var xxl = new XiaoXiaoLe("js-game", "img" ,{col:6, //6 columnsrow:5, //5 rows},function (score) { //score changed calback$("#js-score-num").text(score)},function (score) { //game end calbackalert("gameover!!,You get " + score + " points");},function (time) {$("#js-time-down").text(time)});xxl.start();// hintxxl.hint();</script>index.html:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>XiaoXiaoLe</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link rel="stylesheet" href="res/index.css" /></head><body><div class="main"><div class="score"><button id="js-start">start</button><button id="js-hint">hint</button><button id="js-chint">close hint</button><div class="score-num">score:<span id="js-score-num">0</span></div><div class="score-time">time left:<span id="js-time-down">00:00</span></div></div><div class="game-container"><canvas id="js-game" width="300" height="250" class="gamecanvas"></canvas></div></div><script src="res/zepto.min.1.1.6.js"></script><script src="res/easeljs-0.8.2.min.js"></script><script src="res/tweenjs-0.6.2.min.js"></script><script src="res/hammer.min.js"></script><script src="xiaoxiaole.js"></script><script type="text/javascript">var xxl = new XiaoXiaoLe("js-game", "img",{col:6, //6 columnsrow:5, //5 rows},function (score) { //score changed calback$("#js-score-num").text(score)}, function (score) { //game end calbackalert("gameover!!,You get " + score + " points");}, function (time) {$("#js-time-down").text(time)});$("#js-start").click(function () {xxl.start();})$("#js-hint").click(function () {xxl.hint();})$("#js-chint").click(function () { xxl.closeHint();})</script></body></html>。
基于HTML5的“闯关游戏式”移动学习平台的开发和设计
基于HTML5的“闯关游戏式”移动学习平台的开发和设计陈宏扬(广东轻工职业技术学院，广东广州510300)［摘要］慕课平台建设在我国已有一定规模，但慕课学习平台难以长期吸引那些没有学习兴趣和学习自主性的学生。
随着互联网教育的快速发展，教育游戏越来越热，游戏化学习思维也越来也得到社会认可。
如果能够在慕课平台融入游戏化学习功能，让学生在学习中体验到游戏的互动性、趣味性、竞争性及即时反馈等特性，必然能够提升在线学习的乐趣，激发学生学习动机。
为了适应当代大学生富有激情和挑战的特点，提出了基于HTML5的“闯关游戏式”移动学习平台的开发，以期能够提升慕课平台的学习效果。
［关键词］移动学习；教育游戏；游戏化学习；闯关游戏式The Development and Design of the Passing Game Mobile Learning PlatformBased on HTML5CHEN Hongyang(Guangdong Industry Polytechnic，Guangzhou 510300，China)Abstract：MOOC platform construction has a certain scale in China, but it is difficult to appeal to the students who have no interest and learning autonomy in learning. With the rapid development of internet education, educational games become more and more hot, learning thinking based on game is also increasingly recognized by society. If game learning function can be integrated into MOOC platform, students can experience the game of interactive, interesting, competitive and instant feedback and other characteristics in the study, then it will be able to enhance the fun of online learning, to stimulate students to learn motivation. In order to adapt to the characteristics of passion and challenge of college students, the paper putted forward the development of the "HTML5" mobile learning platform, in order to improve the learning effect.Key words：mobile learning; educational game; Game based learning;Passing game随着教育信息化改革的不断深入以及“互联网+”时代的来临，出现了大量的在线自主学习平台，包括MOOC、SPOC等，相较于传统教学模式，这些平台更加强调学生学习的积极主动性和自觉性,如果缺乏学习动机，在线学习就难以持续[1]。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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包括了导演、场景、布景、摄像机、人物、动作等主要的概念。
导演是整个引擎或者是整个游戏的总指挥，它控制着其他的控件，比如人物该有什么样的动作，有什么样的语言等等，总之其他的事物都要服从导演的指挥；场景和布景主要是负责游戏的背景以及各关卡之间的转换作用，是人们对于一个游戏的第一印象；摄像机是将人物或场景的转换记录下来，连成一段合理的故事；人物和动作也是游戏的灵魂，这里的人物又叫做精灵，其实并不是单纯的指人，也可以是方块等其他的物体，就是给这些精灵附上了动作，才使游戏有了动态的效果。