h5的多屏互动乒乓球游戏设计【字数：13895】
摘 要随着互联网技术的不断进步与发展，智能设备的普及和流行，现在我们所处的社会已经是一个全民媒体的时代，人们也处在一个多屏的时代。什么是多屏？传统电视、数字电视、智能手机、平板电脑等等这些都是多屏，人们的注意力在多屏的影响下被分散开来了，如何将多屏之间联系起来、关联起来，打造一种多屏连接的炫酷的玩法，这是一个相当不错的想法！现在大家身边几乎人手一部手机，无论上班工作还是外出旅游都离不开它，所以手机很容易成为我们每个人的信息节点，我们可以从中获取到数据。基于这个想法，我设计出一款体感乒乓球游戏，将手机作当做媒介，通过手机做不同动作手势控制另外一个媒体设备（PC）上的乒乓球拍，以此来实现多屏互动游戏。本程序设计是基于H5开发的Web应用，开发语言采用JavaScript。项目分为两大部分客户端和服务端，各端的实时通信采用websocket，它是HTML5出的一种协议，可以实现客户端和服务端的双向通信，实时性很好。另外还采用了HTML5的其他新API以及CSS3技术实现前端页面展示。
Key Words: Design of MultiScreen Interactive; HTML5; Table Tennis Game; Web Application Development; Websocket 目 录
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 *好棒文|www.hbsrm.com +Q: &351916072&
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
引言
课题来源与背景
当下多屏互动技术在不断发展，它实际上是一个比较宽泛的概念。通俗点来讲，多屏互动可以让用户在不同的终端设备上进行多媒体内容的传输和显示，并且能够实时的控制它们。而H5提供的websocket协议能够很好的解决了实时通信的问题，使得各端之间能够紧密联系起来，从而丰富了操作页面的形式，这也是多屏互动技术崛起的原因之一。
目前国内外对于该项技术的运用已经相当成熟了，它们所呈现的效果也都炫酷无比。比如网上的一个多屏互动方案“冰川时代”小游戏，该游戏实现了非常炫酷的效果：把手机当做一个装满水和冰块的杯子来模拟一个倒水的动作，接着看到的效果就是杯中的冰块好像从页面的顶部掉下来似的，整个操作如行云流水而且效果非常好。
另外，互娱的大佬也使用类似技术做了一个“营救悟空”的活动运营页。用户扫描二维码与PC端网页进行连接，通过用户在手机上的触发的点击、滑动等事件来渲染PC网页上的内容，这种效果也非常吸引用户。
类似的多屏互动应用还有很多，总结以下它们，就是使用基于websocket协议的双工通信技术来做一些炫酷的引导动画来吸引用户，以达到推广宣传的作用。
所以多屏互动的推广与流行是一个必然的趋势，随着技术的不断成熟，多屏互动能实现我们超乎想象的效果。就目前来说，运用多屏互动技术实现的适合广大用户娱乐的产品也已经在市场上出现，它的流行并不是昙花一现，而是拉开了一个新的多屏互动时代的序幕。
课题目的与意义
本课题的目标是开发一款不一样的乒乓球游戏，提供一个多人互动的娱乐方式——体感乒乓球，并支持双人对战，主要是给与用户与自己伙伴一起游戏时的轻松、愉快。
该系统的视觉展示都是在浏览器中实现的，可以让 PC端屏幕成为电视机，而手机成为你的游戏遥控器。
游戏主要特色如下：
Key Words: Design of MultiScreen Interactive; HTML5; Table Tennis Game; Web Application Development; Websocket 目 录
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 *好棒文|www.hbsrm.com +Q: &351916072&
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
引言
课题来源与背景
当下多屏互动技术在不断发展，它实际上是一个比较宽泛的概念。通俗点来讲，多屏互动可以让用户在不同的终端设备上进行多媒体内容的传输和显示，并且能够实时的控制它们。而H5提供的websocket协议能够很好的解决了实时通信的问题，使得各端之间能够紧密联系起来，从而丰富了操作页面的形式，这也是多屏互动技术崛起的原因之一。
目前国内外对于该项技术的运用已经相当成熟了，它们所呈现的效果也都炫酷无比。比如网上的一个多屏互动方案“冰川时代”小游戏，该游戏实现了非常炫酷的效果：把手机当做一个装满水和冰块的杯子来模拟一个倒水的动作，接着看到的效果就是杯中的冰块好像从页面的顶部掉下来似的，整个操作如行云流水而且效果非常好。
另外，互娱的大佬也使用类似技术做了一个“营救悟空”的活动运营页。用户扫描二维码与PC端网页进行连接，通过用户在手机上的触发的点击、滑动等事件来渲染PC网页上的内容，这种效果也非常吸引用户。
类似的多屏互动应用还有很多，总结以下它们，就是使用基于websocket协议的双工通信技术来做一些炫酷的引导动画来吸引用户，以达到推广宣传的作用。
所以多屏互动的推广与流行是一个必然的趋势，随着技术的不断成熟，多屏互动能实现我们超乎想象的效果。就目前来说，运用多屏互动技术实现的适合广大用户娱乐的产品也已经在市场上出现，它的流行并不是昙花一现，而是拉开了一个新的多屏互动时代的序幕。
课题目的与意义
本课题的目标是开发一款不一样的乒乓球游戏，提供一个多人互动的娱乐方式——体感乒乓球，并支持双人对战，主要是给与用户与自己伙伴一起游戏时的轻松、愉快。
该系统的视觉展示都是在浏览器中实现的，可以让 PC端屏幕成为电视机，而手机成为你的游戏遥控器。
游戏主要特色如下：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/wlw/212.html
