1．1．3  课题研究的意义

孔明锁这个玩具面向的人群比较广泛，老少皆宜。它能够灵活人的手指，开动脑经。孔明锁的结构看上去简单，其实隐含着无穷的奥秘，没有领会它的要领，很难完成拼合。

用HTML5开发游戏可以说是一次崭新的“游戏”，用它开发的游戏及一些其他应用，可以在各种终端设备（如智能手机、平板电脑及台式电脑）的Web浏览器中直接运行。在这之前，用户只能够通过第三方插件（最著名的是Flash）来运行这些应用。而HTML5的出现，让我们可以创建出跨平台的Web应用。

1．2  国内外研究现状

1．3  本文研究内容

   本文主要研究孔明锁游戏的设计与实现，并按照软件工程的生命周期进行阐述，全文将覆盖孔明锁游戏的需求分析、游戏设计、游戏实现以及整个游戏的测试等各个阶段。孔明锁游戏最终是以一个基于HTML5与WebGL技术的网页形式展现在用户面前。网站融合HTML5技术与WebGL的3D技术，使得游戏不再是一个内嵌入网页的Flash部分，而是由HTML5的canvas标签原生，整个网站融为一体，进而拥有更好的用户体验。

本游戏在Windows 8.1操作系统上，采用了代码编辑器EditPlus、FireFox浏览器编译和实现游戏。

1．4  论文组织结构

第一章简要地介绍了HTML5的研究现状以及游戏设计的背景和意义，HTML5游戏在国内外的发展现状，论文的主要研究内容还有论文的组织结构。

第二章从整体上介绍了本游戏的开发环境，运行环境，简单介绍开发过程中用到的相关技术。

第三章讲述对游戏的需求分析过程，阐述了游戏的功能性需求和非功能性需求。

第四章讲述了孔明锁游戏的设计和实现过程。分模块进行了孔明锁的相关设计和实现。重点介绍孔明锁的建模过程和交互过程以及核心方法的概述。

第五章讲述游戏的测试过程和结果。针对孔明锁的各个模块分别进行了功能测试并对测试结果进行分析。

2  基础知识概述

2．1  相关技术

（一） WebGL介绍

WebGL是一种在Web页面上生成3D图形效果的应用编程接口。它是以OpenGL ES 2.0为基础的。与OpenGL一样，它也提供绘制（Rendering（API））功能，但是它应用在HTML和JavaScript上下文中。WebGL绘制的本质是HTML5画布，后者最早是由Apple公司引入到WebKit开源浏览器引擎中。引入画布的理由是为了能在应用程序和Apple Mac OS X操作系统的Safari浏览器中绘制二维图形。

WebGL 1.0规范最终于2011年3月确定下来，并且在Google Chrome、Mozilla Firefox等浏览器中实现对它的支持。自从有了WebGL，开发人员就可以在浏览器内部实现3D图形的硬件加速，就可以开发3D游戏或者其他类型的3D图形应用程序。WebGL具有以下吸引人的特性：

1） WebGL是一个开放的标准，任何人都可以使用，不需要支付任何版权费。

2） WebGL利用图形硬件加速图形绘制，这意味着它的速度确实很快。

3） WebGL在支持它的本地浏览器上运行，用户不用安装插件。

4） 由于WebGL是以OpenGL ES 2.0为基础的，因此对于具有OpenGL ES 2.0编程经验的开发人员来说，甚至对于熟悉台式机OpenGL 开发的人们而言，它是很容易学习的。

WebGL标准也为开发人员提供一个快速学习和测试3D图形的方法。不太像其他3D API那样，需要下载和安装一个工具链。用户只需要一个编写代码的文本编辑器，为了查看生成结果，只需要把这个文件载入到支持WebGL的浏览器中。

（二） Three.js物理引擎

随着WebGL得到越来越多的关注，随之而来的为知所用的中间件也出现了。其中一个就是Three.js。Three.js专注于设定缓冲对象和阴影，这为我们提供了更加简单的接口。