摘 要

随着网络信息技术的发展，快节奏的生活使得人们的集中休闲时间越来越少，休息时间向碎片化方向发展。为了满足休闲之需，轻型的网页游戏越来越受到用户的青睐。网页游戏对机器配置的要求低，无需客户端下载，简单有趣的同时，占用时间也少。而在当前主流的网页游戏开发语言中，HTML5具有的独特优势为网页游戏的开发提供了大量便利。

本文通过使用HTML5的新特性Canvas等元素，辅以JavaScript及CSS，进行网页拼图游戏的设计与开发，以更便捷的方式实现游戏的功能，在满足人们碎片化时间内的休闲的同时，验证HTML5新特性为网页游戏开发带来的优势。

本文通过使用HTML5进行实际编码对HTML5新添加的元素进行了验证，HTML5能够进行更为便捷的网页游戏开发。

关键词：HTML5；新特性；网页游戏；休闲

Abstract

With the development of the Internet,the fast pace of life makes it less the focused time people relax ,replaced by pieces of time.To meet the leisure requirements,the light web games is becoming increasingly popular among the users.The web game has little requests to the machine,without downloading the client,besides,it is easy and interesting while taking up a little of time.Among the current mainstream of developing language of web games,HTML5 provides plenty of convenience with its special advantages to developing web games.

To verify the advantages in developing web games provided by the new features of HTML5 as well as meeting people’s leisure demand in pieces of time,this paper practiced designing and developing a puzzle game in a more convenient way ,by using the new features of HTML5 like Canvas ,also with the help of JavaScript and CSS.

As a result,this paper verified the newly added features of HTML5 by coding practically,HTML5 does be able to make it more convenient to develop web games.

Key Words：HTML5；new features; web games; leisure

目录

第1章 绪论 1

1.1 HTML5技术的发展 1

1.2 网页游戏概况 1

1.2.1 网页游戏的概念 1

1.2.2 网页游戏的发展 1

1.2.3 网页游戏的特点 2

1.3 HTML5网页游戏现状 3

1.4 课题研究目的及意义 3

1.5 课题研究内容 4

第2章 拼图游戏需求分析 5

第3章 设计方案及思路 7

3.1 游戏系统总体设计 7

3.2 游戏算法设计 7

3.2.1 游戏原理分析 7

3.2.2 游戏算法分析 7

第4章 详细设计与实现 12

4.1 游戏主界面设计 12

4.1.1 拼图框设计 12

4.1.2 游戏选项框设计 13

4.2 拼图功能实现 14

第5章 系统测试 17

5.1 系统测试的目的及准则 17

5.2 测试用例设计 17

第6章 总结与展望 19

6.1 总结 19

6.2 展望 19

参考文献 21

致谢 22

第1章 绪论

1.1 HTML5技术的发展

HTML5的概念最早出现于2004年，当时WHATWG提出Web Applications 1.0，也就是HTML5草案的前身，2007年，该草案被W3C接纳，同年，致力于研究HTML发展的新的HTML工作团队成立，标志着HTML5的发展迈上了新的台阶。

HTML5虽然较早时已经在网络开发人员中有了一定的知名度，但是在2010年的4月，才出现了使得HTML5成为主流媒体的契机。当时苹果公司的CEO乔布斯发表的“对Flash的思考”的文章引发了开发人员间的广泛争论。文章指出，随着HTML5的发展，观看视频或其它内容时，Adobe Flash将不再是必须的。开发人员就此言论针对HTML5和Flash间的功能差异进行交锋，并认识到由于不同浏览器对标准不同部分的支持程度的不同，尽管HTML5提供了更加强大的功能，但在开发时仍需考虑这些差异。这在一定程度上促进了HTML5的研究与普及。

2012年12月17日，万维网联盟（W3C）以宣称“HTML5是开放的Web网络平台的奠基石”为引，正式宣布投入了大量网络工作者心血的HTML5规范的定稿完成。

2013年5月6日， HTML 5.1正式草案公布。该规范在定义了HTML第五次重大版本的同时，并首次决定对万维网的核心语言，即超文本标记语言（HTML）作出修改。在这个版本中，将会跟进实时研发，不断推出与HTML5相关的新功能，以给Web应用程序的开发者提供必要的帮助，并在该版本中，新元素的互操作性将会得到显著性提高。

2014年10月28日，HTML5标准正式发布，基于互联网的各种开发应用自此统一格式，不再分版本和终端，这意味着相关应用的开发成本将大大缩减，网页应用开发的新局面将自此打开，网页应用的开发将迎来新的热潮。

1.2 网页游戏概况

1.2.1 网页游戏的概念

通常所说的网页游戏，即基于网页浏览器的网络在线多人游戏；从诞生开始发展至今，经历种种变化，最终形成了约三种通用类型，即基于Web浏览器，使用 PHP/ASP/Perl等解释语言建设的虚拟社区；基于Web浏览器，使用Flash/JAVA技术制作的游戏与需要下载客户端并连接专用服务器运行的游戏。

尽管是用服务器端脚本编写的网页游戏应用，但是它的运行离不开术必要的客户端技术支持,比如网页浏览器，或者浏览器上常用的一些插件,如Java或者Flash.因此网页游戏的开发虽然以前端为主，但并不仅限于前端。

1.2.2 网页游戏的发展