摘要：随着互联网技术的不断进步与发展，智能设备的普及和流行，现在我们所处的社会已经是一个全民媒体的时代，人们也处在一个多屏的时代。什么是多屏？传统电视、数字电视、智能手机、平板电脑等等这些都是多屏，人们的注意力在多屏的影响下被分散开来了，如何将多屏之间联系起来、关联起来，打造一种多屏连接的炫酷的玩法，这是一个相当不错的想法！

现在大家身边几乎人手一部手机，无论上班工作还是外出旅游都离不开它，所以手机很容易成为我们每个人的信息节点，我们可以从中获取到数据。基于这个想法，我设计出一款体感乒乓球游戏，将手机作当做媒介，通过手机做不同动作手势控制另外一个媒体设备（PC）上的乒乓球拍，以此来实现多屏互动游戏。

本程序设计是基于H5开发的Web应用，开发语言采用JavaScript。项目分为两大部分：客户端和服务端，各端的实时通信采用websocket，它是HTML5出的一种协议，可以实现客户端和服务端的双向通信，实时性很好。另外还采用了HTML5的其他新API以及CSS3技术实现前端页面展示。

关键词： 多屏互动 H5 乒乓球游戏设计 Web应用开发 Websocket

目录

摘要

Abstract

1. 引言-1

1.1 课题来源与背景-1

1.2 课题目的与意义-1

1.3 拟定技术路线-2

2. 相关开发技术-3

2.1 H5简介-3

2.1.1 什么是H5？-3

2.1.2 H5新特性-3

2.2 加速度API-4

2.2.1 devicemotion-4

2.2.2 主要属性-4

2.3 手机陀螺仪API-4

2.4 动画优化API-5

2.5 Websocket通信技术-6

2.5.1 Websocket简介-6

2.5.2 Websocket优点-6

2.6 Git-7

2.6.1 Git简介-7

2.6.2 Git用法-7

2.6.3 Git设计思想-7

3. 系统需求分析-9

3.1 系统功能需求分析-9

3.2 技术可行性分析-9

3.3 经济可行性分析-10

3.4 运行环境需求-10

4. 系统设计-11

4.1 系统总体设计-11

4.1.1 系统C/S结构设计-11

4.1.2 系统场景设计-11

4.1.3 系统流程设计-11

4.2 手机端设计-12

4.2.1 重力感应接口-12

4.2.2 陀螺仪接口-13

4.2.3 准备-14

4.2.4 校准-14

4.3 PC端设计-14

4.3.1 PC端总体设计-14

4.3.2 入口页-14

4.3.3 动画-15

4.3.4 立体球拍模型-16

4.3.5 小球运动-17

4.4 服务端设计-17

4.4.1 数据通信-17

4.4.2 数据结构-19

4.4.3 目录架构-19

5. 系统实现-20

5.1 PC浏览器端实现-20

5.1.1 初始化-20

5.1.2 建立连接-20

5.1.3 生成二维码-21

5.1.4 分析消息-21

5.1.5 运动实现-22

5.2 手机浏览器端实现-23

5.2.1 获取数据-23

5.2.2 分析数据-24

5.3 服务端实现-25

5.3.1 webServer-25

5.3.2 webSocketServer-26

6. 测试-29

6.1测试-29

6.1.1测试环境-29

6.1.2测试流程展示-29

6.1.3测试结果-30

7. 系统开发对社会的影响-31

8. 结语-32

8.1.1 学习总结-32

8.1.2 项目总结-32

8.1.3 展望-33

参考文献-34

致谢-35