目录

摘要 1

关键词 1

ABSTRACT. 1

KEY WORDS 1

引言 1

1  绪论 1

1．1  论文背景及意义 1

1．1．1  HTML5的发展现状 1

1．1．2  游戏背景 2

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

1．2  国内外研究现状 3

1．3  本文研究内容 3

1．4  论文组织结构 4

2  基础知识概述 4

2．1  相关技术 4

2．2  开发工具 5

3  需求分析 5

3．1  游戏需求概述 5

3．2  游戏功能性需求 5

3．3  游戏非功能性需求 7

4  游戏设计与实现 8

4．1  游戏界面设计 8

4．1．1  框架设计与实现 8

4．1．2  页面布局以及交互的设计与实现 8

4．2  游戏模块设计与实现 11

4．2．1  功能模块设计 11

4．2．2  三维建模模块实现 11

4．2．3  游戏交互模块实现 15

4．2．4  系统设置模块实现 18

5  系统测试 20

5．1  测试环境 20

5．2  功能测试 20

5．3  性能测试 21

6  总结与展望 21

致谢 21

参考文献 22

基于HTML5的孔明锁游戏设计

网络工程专业学生    魏文海

指导教师    顾兴健

摘要：本文主要研究孔明锁游戏的设计与实现。全文将覆盖孔明锁游戏的需求分析、游戏设计、游戏实现以及整个游戏的测试等各个阶段。首先，通过UML建立了该游戏的需求模型，分析了功能性需求，指出了可用性、性能以及非功能性需求等。其次，提出了游戏功能模块设计，包括孔明锁三维建模模块、孔明锁交互模块、系统设置模块。其中系统设置模块包括音乐音效、操作演示、游戏提示、游戏开始和结束等。采用JavaScript脚本语言定义三维数组来实现孔明锁的结构。基于WebGL第三方库Three.js实现三维模型的纹理贴图、光照、渲染等操作。采用CSS样式语言和jQuery库实现页面布局和显示样式。采用射线求交技术实现孔明锁块拾取、视图翻转、块平移。HTML5的video和 audio标签实现视频、动画交互。最后FireFox浏览器编译和实现系统。通过测试，该游戏具有良好的性能、易用性、可扩展性，基本满足预期要求。

关键词：WebGL；three.js物理引擎；3D孔明锁

Design of Puzzle Lock Game Based on HTML5

Student majoring in network engineering    WEI Wen-hai

Tutor    GU Xing-jian

Abstract：This article is mainly about the design and implementation of the puzzle lock game. The whole article will cover the needs analysis, game design, game produce, game testing and some other stages of the game. First, I used UML to establish the demand model of game, and analyzed the functional requirements, and pointed out the availability, performance and other non-functional requirements. Secondly, I raised the function module design of the game, including the three-dimensional modeling module, the interaction module, and system’s settings modules which includes background music, sound effects, operating demonstration, game tips, game starts, game ends and so on. I used JavaScript language to define the three-dimensional array to achieve the structure of puzzle lock. Realizing a three-dimensional model of texture mapping, lighting, rendering and other operations is based on Three.js of WebGL’s third-party libraries. I used CSS and jQuery library for page layout and display style. And I used ray Intersection technology to realize block picking, view flip, and block dragging. I used HTML5’s video and audio tags to achieve video player and animations interaction. And finally, I use FireFox browser to compile and implement the game system. Through testing, the game shows good performance, ease of use and scalability, basically meeting the expectations.