摘 要

HTML5是下一代互联网的Web标准，和以前的版本不同，HTML5并非仅仅用来表示Web内容，它将使Web进入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。

作为新一代的网页语言，HTML5跨平台的支持得到不断增强，智能手机的迅速普及加上资费和网络速度的逐渐松绑，也为HTML5技术提供了良好的发展环境。HTML5“可以实现跨平台游戏编码移植”的特性使其成为移动游戏开发者新的选择。HTML5已成为游戏开发的重要趋势之一。

本文在学习和掌握HTML5 CANVAS画布和JavaScript相关技术的基础上，设计并实现一个网页版的连连看小游戏，实现了不同难度的游戏场景选择，分数计算等基本功能。

关键词： HTML5；连连看；JavaScript；Canvas

Abstract

HTML5 is the next generation of Internet web standards, and previous versions, HTML5 is not just used to represent Web content, it will enter a mature Web application platform, in this platform, video, audio, graphics and animation, as well as with computer interaction have been standardized.

As a new generation web language, cross-platform support for HTML5 has been growing, rapidly growing popularity of smart phones, plus charges and progressive relaxation of network speed, but also provides a good environment for the development of HTML5 technologies. HTML5 "can achieve cross-platform game coded transplant" feature makes mobile game developers new options. HTML5 has become an important trend in game development.

In this paper, learn and master HTML5 CANVAS canvas and JavaScript related technologies, based on the design and implementation of a web version of Lianliankan game, to achieve a different degree of difficulty of the game scene selection, the score calculation and other basic functions.

Key Words：HTML5；Link up；JavaScript；Canvas

目 录

第1章 绪论 1

1.1 研究背景 1

1.2 研究目的及意义 1

1.3 国内外研究现状 2

1.4 主要研究内容 3

第2章 开发工具与技术 4

2.1 开发工具介绍 4

2.2 开发技术介绍 4

2.2.1 HTML5介绍 4

2.2.2 JavaScript介绍 5

2.2.3 jQuery介绍 6

第3章 需求分析 7

3.1可行性分析 7

3.1.1技术可行性分析 7

3.1.2经济可行性分析 7

3.2功能需求 7

3.3运行环境 8

第4章 系统设计 9

4.1系统总体设计 9

4.2关键问题思路 9

4.2.1游戏地图设计思路 9

4.2.2路径判断的思路 10

4.2.3 游戏胜利的思路 12

4.3系统详细设计 12

4.3.1场景模块 12

4.3.2关卡模块 14

4.3.3游戏逻辑模块 14

4.3.4分数时间模块 15

4.3.5用户操作模块 15

4.3.6提示模块 16

第5章 运行测试 17

5.1关卡选择测试 17

5.2场景生成测试 18

5.3游戏逻辑测试 18

5.4分数计算测试 20

5.5提示测试 21

5.6游戏成功测试 21

第6章 总结和展望 22

参考文献 23

致 谢 24

第1章 绪论

1.1 研究背景

HTML5是下一代互联网的Web标准，也被认为是下一代网页开发语言，作为HTML的最新一代标准，不同于以前的版本，HTML5并非仅仅用来表示Web内容，它提供了一系列新的元素，一部分是语义化的标签，还有一部分则是为了支持多媒体的元素，比如video/canvas/audio等，这些具有革命性意义的特性让越来越多的开发人员进入研究，这些划时代的新特性将使Web进入一个成熟的应用平台，在这个平台上视频、音频、图像和动画，以及同电脑的交互都被标准化^[1]。

作为新一代的网页语言，HTML5跨平台的支持得到不断增强，智能手机的迅速普及和网络速度的大幅增长，也为HTML5技术的普及提供了良好的发展环境。目前各大主流的浏览器都已经全面兼容HTML5，智能移动平台和移动互联网的兴起，让HTML5的应用更惹人关注。

游戏软件是自从计算机诞生开始，就同时诞生的产物，本来只是娱乐的产物，随着时代的发展，如今已经发展成了巨大的产业，随着智能设备的增多，游戏运行的平台也不在局限于PC了，网页游戏，手机游戏，不同的平台，各种不同的游戏，这种情况下，对游戏的跨平台性就有了很大的要求，传统的游戏要想在不同的平台上运行，需要开发人员针对不同的平台开发不同的版本，这对开发人员和成本是一个很大的消耗。在这基础上，HTML5“可以实现跨平台游戏编码移植”的特性使其成为游戏开发者新的选择。在国际上，Zynga、SPILGAMES、Disney都已经在HTML5游戏方面进入了实践阶段，Google、APPLE、微软也明确表示对HTML5的移动设备支持。可见，HTML5已成为游戏开发的重要趋势之一。

HTML5是Web的未来，不仅在电脑端，而且在移动端也一定会得到广泛的应用。据统计2015年全球有10亿手机浏览器支持HTML5，同时HTML Web开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者，更将占据移动游戏开发领域中的半壁江山。

1.2 研究目的及意义