扫一扫，访问微社区
后使用快捷导航没有帐号？
签到成功!您今天第{todayrank}个签到，签到排名竞争激烈，记得每天都来签到哦！已连续签到:{constant}天，累计签到:{days}天
关注：1249
当前位置： &
查看: 1097|回复: 12
【HTML5】驴子跳跳游戏源码
本帖为抢楼帖，欢迎抢楼!&
61042/1500排名<font color="#FF昨日变化3主题帖子积分
蛮牛粉丝, 积分 1042, 距离下一级还需 458 积分
蛮牛粉丝, 积分 1042, 距离下一级还需 458 积分
蛮牛币2403
在线时间67 小时
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
　　HTML5源码，驴子跳跳游戏源码独家共享！！！
　　游戏名称：驴子跳跳
　　游戏类型：休闲
游客，如果您要查看本帖隐藏内容请
每日推荐：
14/50主题帖子积分
注册看看, 积分 4, 距离下一级还需 46 积分
注册看看, 积分 4, 距离下一级还需 46 积分
在线时间1 小时
下载下来看看，学习，学习
每日推荐：
14/50排名<font color="#FF昨日变化59主题帖子积分
注册看看, 积分 4, 距离下一级还需 46 积分
注册看看, 积分 4, 距离下一级还需 46 积分
在线时间1 小时
感谢楼主分享
每日推荐：
11/50主题帖子积分
注册看看, 积分 1, 距离下一级还需 49 积分
注册看看, 积分 1, 距离下一级还需 49 积分
在线时间0 小时
我试试，不知道能不能下载，一定要行啊，O(∩_∩)O谢谢
每日推荐：
136/50排名<font color="#FF昨日变化59主题帖子积分
注册看看, 积分 36, 距离下一级还需 14 积分
注册看看, 积分 36, 距离下一级还需 14 积分
在线时间6 小时
下下来看看，希望给力啊楼主。
每日推荐：
136/50排名<font color="#FF昨日变化59主题帖子积分
注册看看, 积分 36, 距离下一级还需 14 积分
注册看看, 积分 36, 距离下一级还需 14 积分
在线时间6 小时
楼主骗人啊。。。
每日推荐：
120/50主题帖子积分
注册看看, 积分 20, 距离下一级还需 30 积分
注册看看, 积分 20, 距离下一级还需 30 积分
在线时间3 小时
下载来，看看。。。。。
每日推荐：
9排名<font color="#FF昨日变化主题帖子积分
在线时间523 小时
发大水发生的发生的发生
每日推荐：
281/150排名<font color="#FF昨日变化63主题帖子积分
初来乍到, 积分 81, 距离下一级还需 69 积分
初来乍到, 积分 81, 距离下一级还需 69 积分
在线时间2 小时
亲，能让我下载嘛，你是个好人啊，谢谢
每日推荐：
2105/150排名<font color="#FF昨日变化63主题帖子积分
初来乍到, 积分 105, 距离下一级还需 45 积分
初来乍到, 积分 105, 距离下一级还需 45 积分
在线时间2 小时
感谢楼主的分享
每日推荐：
4343/500排名<font color="#FF昨日变化4主题帖子积分
四处流浪, 积分 343, 距离下一级还需 157 积分
四处流浪, 积分 343, 距离下一级还需 157 积分
在线时间82 小时
{:104:}{:104:}
[]: 我本纯洁 发帖时在路边捡到 2
蛮牛币，偷偷放进了口袋.
每日推荐：
4430/500排名<font color="#FF昨日变化4主题帖子积分
四处流浪, 积分 430, 距离下一级还需 70 积分
四处流浪, 积分 430, 距离下一级还需 70 积分
蛮牛币2327
在线时间69 小时
html5的吗？不错，看看
每日推荐：
4430/500排名<font color="#FF昨日变化4主题帖子积分
四处流浪, 积分 430, 距离下一级还需 70 积分
四处流浪, 积分 430, 距离下一级还需 70 积分
蛮牛币2327
在线时间69 小时
楼主骗人啊，打开后就几张图片。
[]: 一个袋子砸在了 钝刀的老王 头上，钝刀的老王 赚了 1
每日推荐：
游戏蛮牛给予质量较高、影响力较大的unity相关技术开发者的荣誉称号
社区QQ达人
使用QQ帐号登录论坛的用户
认证开发者
经过游戏蛮牛认证的独立开发者
购买游戏蛮牛书籍内容简介：
1、学位论文不属于保密范围，适用本授权书。本人签名：日期：导师签名：日期：基于Kinect和HTML实现体感交互游戏的关键技术研究摘要用户体验要求的日益提高推动着人机交互技术的不断发展。自鼠标和触屏的人机交互方式出现后，用户更加渴求以一种自然人的交流方式与机器进行交互，因而利用体态以及语言进行人机交互的体感交互技术已然成为人机交互的发展趋势，并逐步与PC、平板、手机等多终端融合，从游戏领域不断向大众应用领域行业渗透。体感技术在游戏领域的探索开创了体感交互的先河，并引入健康游戏的理念，成功开发了集娱乐体验与运动健身于一体的体感交互游戏模式。然而它并不支持网页浏览器模式；多人游戏也只局限于XboxLive平台。本文针对传统体感游戏无法在网页浏览器体验的问题展开研究，在体感交互游戏的关键技术以及游戏开发的主流技术的相关方向上完成以下主要工作，利用现在流行的Kinect识别技术，Javascript网页开发技术以及HTMLWebsocket通信技术，实现一种全新的网页版体感交互游戏模式，主要完成的工作如下：针对现有体感交互游戏系统多人游戏的局限性，利用HTMLWebsocket通信技术设计实现一种基于事件方式的体感动作与游戏原型通信机制，完成异地用户数据高效、实时web通信；利用Kinect体感。2、基于html5和kinect实现体感交互游戏的关键技术研究atosensoryinteractiongamemodebyintegratingentertainmentandsportsfitnesssuccessfullyHowever,geographicalisolationleadstousersoperatingmotion-sensinginteractivegameslocally,therefore,manyusersfarawayfromeachotherfailtoparticipateinthesamegamesonlineAimedatsolvingmulti-usersindifferentplacesfailtoplaythesamemotion-sensinggameatthesametime,thispaperhasfinishedrelativeworkaboutkeytechnologiesofmotion-sensinginteractivegamesandgamesdevelopment,whichisdescribedasfollows：Designacommunicationmechnismbetweenusers’actionandprotypesbasedontheeventmodetosolvemulti-userindifferentplacesfailedtoplaythesamemo。3、NUIAPI[]中提供了两种模式来获取彩色图像、深度图像以及骨骼跟踪数据流。一种是轮询模型，另一种是事件模型。轮询模型是读取骨骼事件的最简单方式，通过调用SkeletonStream第三章基于Kniket及HTML实现体感交互游戏的方案以及关键技术对象的OpenNextFrame()方法即可实现。该方法可以传递参数指定等待下一帧骨骼数据的时间。当新的数据准备好或是超出等待时间时，它才会返回；事件模型以事件驱动的方式获取骨骼数据，更加灵活、准确。应用程序传递一个事件处理函数给SkeletonFrameReady事件，该事件定义在KinectSensor对象中。当下一帧的骨骼数据准备好时，会立即调用该事件回调函数。因此Kinect应用程序可以通过调用OpenSkeletonFrame()函数来实时获取骨骼数据。本文就是采用事件模型的方式获取数据流的。图-彩色图像数据图-深度图像数据北京邮电大学硕士学位论文图-骨骼跟踪图像数据在获取到骨骼跟踪数据后，需要对数据进行处理，排除其他环境因素、人为因素等的干扰，所以加了一个查找离Kinect最近的被跟踪的骨骼算法。首先这个骨骼是被跟踪的之一，计算这些跟踪者头部坐标的Z值大小，Z值越小的离Kinect越近，就认为他/她就是离Kinect最近的被跟踪的骨骼，也是我们需要Kinect记录的玩家骨骼。动作识别数据采集完成后，就可以根据数据中每一帧的变化来判断用户所做的动作。所以说，骨骼跟踪是动作识别的基础。从大范围上说，动作识别包括静态姿势，手势及肢体动作。人们在实际交往中，高达%的信息是通过非语言方式传递。手势及肢体语言占主要部分。动作识别是体感游戏的前提，它在新一代自然人机交互中有着举足轻重的重要意义。我们可以视人体动作为骨骼节点的运动或静止。4、基于html5和kinect实现体感交互游戏的关键技术研究.pdf长一些；而如果选择普通质量的图像传输，时间更短，但会降低图像质量，影像用户体验。红外摄像头的工作原理与彩色摄像头是完全不同的。Kinect首先通过左侧的红外线摄影机向环境中发出红外线光谱，这束红外线光谱由于具有很高的随机性，其在空间中任意两个不同位置所反射形成的光斑都不相同，对环境形成立体的“光编码”；再通过右侧的红外线接收器来采集Kinect视野中的红外线图像；最终，利用这幅红外图像和Kinect的原始参数进行一系列复杂计算，就可以得到视野中的三维深度信息了。红外图像和彩色图像的处理方式大体相同，但是红外图像无法和彩色图像同时获取。骨骼追踪技术是Kinect最大特色。微软公司采集超过万张的人体图片，才归纳出人体骨骼模型。通过研究KinectforWindowsSDK发现它包含有四个主要对象模型，分别是SkeletonStream，SkeletonFrame，Skeleton和Joint。SkeletonStream对象中可以绑定SkeletonFrameReady事件和AllFramesReady事件，在这两个事件中可以获取骨骼数据，还有一种方法是利用OpenNextFrame方法通过“拉”模型来获取骨骼数据。通常情况下，它默认是不工作的，开启它需要用到enable()方法。和彩色图像和深度图像类似，一旦开启相关对象，Kinect会一直保持Connected状态，为了减小计算机内存和CUP占有率，缩减消耗，当我们不需要的时候需要关闭它，此时用到disabled()方法。该对象另。5、体感游戏,Kinect,Kinect体感交互技术,Kinect的,HTML 5,kinect,和Kinect体感游戏,交互研究,体感交互,体感技术,kinect技术的,交互和技术,基于体感交互的,HTML5ers’actionandprotypesbasedontheeventmodetosolvemulti-userindifferentplacesfailedtoplaythesamemotion-sensinggameatthesametimeonline,whichcanrealizeeffectivelywebcommunicationbetweendifferentusersindifferentplacestimely；Completeusers’actioncollectionandrecognitionbytakinguseofKinectDcamera,andsetupamappingmechnismtorealizeoperatingrolesdrivenbytheusers’action；CombiningWebsocketcommunicationmechanismandrecognitionmoduleabove,developasomaticinteractivegamesystembasedonKinectandHTML,whichcansupportsingle-playerandmulti-playermodeandbringusersthetotalentertainmentexperiencewithoutanycontrollerThroughtheaccessofInternet,datasofdifferentuserscanbeupdatedinrealtime,anddisplaydynamicallythroughthegame。6、理念与游戏的开发以何种方式结合，如何让体感游戏展现更好的趣味性、互动性、同时能够满足人们对健康生活的理念的需求，是体感游戏开发者必须考虑的问题。针对传统的基于Kinect[]的体感交互游戏开发只局限于Xbox平台，多人游戏只能通过XboxLive，并且Kinect需要与外设相连（如游戏机等），用户只能选择固定的游戏等缺点，用户迫切希望能够有一种崭新的方式来实现异地用户在PC平台上实时互动，并具有丰富的游戏资源、多人竞技等良好的游戏体验。互联网技术的蓬勃发展，让地域的概念弱化了，并且丰富的资源也可以给用户带来多姿多彩的游戏体验。互联网的介入让异地、多用户、丰富游戏下载库、流畅的游戏竞技体验、实时的社区互动性于一体的新型的体感交互游戏成为可能。体感游戏从最终的手柄输入、按键等方式演变到无需任何额外的硬件设备介入，利用D摄像头依靠视频识别以及骨骼追踪来捕获用户在三维空间中的动作，游戏的嵌入平台也从特定的电脑屏幕发展成为当今超大屏幕的智能电视平台，可见，体感游戏的到来开启了一个全新的游戏时代——（全文完）基于Kinect传感器的体感减压游戏关键技术及实现_杜棋东_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
基于Kinect传感器的体感减压游戏关键技术及实现_杜棋东
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢鹅厂原创 | 使用HTML5开发Kinect体感游戏 -
鹅厂原创 | 使用HTML5开发Kinect体感游戏
零写在前面 对前端工程师而言，开发Kinect的体感游戏似乎有些触不可及，因为目前市面上基本上是用C#或C++来开发，但如果游戏运行在我们熟悉的浏览器中，结合HTML5的新特征，我们是不是可以玩出新高度呢？一简介在前不久成都TGC2016展会上，我们开发了一款《火影忍者手游》的体感游戏，主要模拟手游章节《九尾袭来 》，用户化身四代，与九尾进行对决，吸引了大量玩家参与。表面上看，这款游戏与其它体感体验无异，实际上，它一直运行于浏览器Chrome下，也就是说，我们只需要掌握前端相应技术，就可以开发基于Kinect的网页体感游戏。二如何实现使用H5开发基于Kinect的体感游戏，其实工作原理很简单，由Kinect采集到玩家及环境数据，比如人体骨骼，使用某种方式，使浏览器可以访问这些数据。1、采集数据Kinect有三个镜头，中间镜头类似普通摄像头，获取彩色图像。左右两边镜头则是通过红外线获取深度数据。我们使用微软提供的SDK去读取以下类型数据： 色彩数据：彩色图像； 深度数据：颜色尝试信息； 人体骨骼数据：基于以上数据经计算，获取到人体骨骼数据。2、使浏览器可访问到Kinect数据我尝试和了解过的框架，基本上是以socket让浏览器进程与服务器进行通信 ，进行数据传输： Kinect-HTML5 用C#搭建服务端，色彩数据、尝试数据、骨骼数据均有提供； ZigFu 支持H5、U3D、Flash进行开发，API较为完整，貌似收费； DepthJS 以浏览器插件形式提供数据访问； Node-Kinect2 以Nodejs搭建服务器端，提供数据比较完整，实例较多。我最终选用Node-Kinect2，虽然没有文档，但是实例较多，使用前端工程师熟悉的Nodejs，另外作者反馈比较快。 Kinect： 捕获玩家数据，比如深度图像、彩色图像等； Node-Kinect2： 从Kinect获取相应数据，并进行二次加工； 浏览器： 监听node应用指定接口，获取玩家数据并完成游戏开发。三前期准备1、系统要求：这是硬性要求，我曾在不符合要求的环境下浪费太多时间。 USB3.0 支持DX11的显卡 win8及以上系统 支持Web Sockets的浏览器 当然Kinect v2传感器是少不了的2、环境搭建流程： 连接上Kinect v2 安装 KinectSDK-v2.0 安装 Nodejs 安装 Node-Kinect2 四实例演示如下图所示，我们演示如何获取人体骨骼，并标识脊椎中段及手势：1、服务器端创建web服务器，并将骨骼数据发送到浏览器端，代码如下：2、浏览器端浏览器端获取骨骼数据，并用canvas描绘出来，关键代码如下：很简单的几行代码，我们便完成了玩家骨骼捕获，有一定 java基础的同学应该很容易能看明白，但不明白的是我们能获取哪些数据？如何获取？骨骼节点名称分别是什么？而node-kienct2并没有文档告诉我们这些。五开发文档Node-Kinect2并没有提供文档，我将我测试总结的文档整理如下：1、服务器端能提供的数据类型； bodyFrame 骨骼数据 infraredFrame 红外数据 longExposureInfraredFrame 类似infraredFrame，貌似精度更高，优化后的数据 rawDepthFrame 未经处理的景深数据 depthFrame 景深数据 colorFrame 彩色图像 multiSourceFrame 所有数据 audio 音频数据，未测试 2、骨骼节点类型 节点类型 JointType 节点名称 0 spineBase 脊椎基部 1 spineMid 脊椎中部 2 neck 颈部 3 head 头部 4 shoulderLeft 左肩 5 elbowLeft 左肘 6 wristLeft 左腕 7 handLeft 左手掌 8 shoulderRight 右肩 9 elbowRight 右肘 10 wristRight 右腕 11 handRight 右手掌 12 hipLeft 左屁 13 kneeLeft 左膝 14 ankleLeft 左踝 15 footLeft 左脚 16 hipRight 右屁 17 kneeRight 右膝 18 ankleRight 右踝 19 footRight 右脚 20 spineShoulder 颈下脊椎 21 handTipLeft 左手指（食中无小） 22 thumbLeft 左拇指 23 handTipRight 右手指 24 thumbRight 3、手势，据测识别并不是太准确，在精度要求不高的情况下使用 0 unknown 不能识别 1 notTracked 未能检测到 2 open 手掌 3 closed 握拳 4 lasso 剪刀手，并合并中食指 4、骨骼数据body [object] {bodyIndex [number]：索引，允许6人joints [array]：骨骼节点，包含坐标信息，颜色信息leftHandState [number]：左手手势rightHandState [number]：右手手势tracked [boolean]：是否捕获到trackingId} 5、kinect对象 on 监听数据 open 打开Kinect close 关闭 openBodyReader 读取骨骼数据 open**Reader 类似如上方法，读取其它类型数据 六实战总结接下来，我总结一下TGC2016《火影忍者手游》的体感游戏开发中碰到的一些问题。1、讲解之前，我们首先需要了解下游戏流程。 1.1、通过手势触发开始游戏1.2、玩家化身四代，左右跑动躲避九尾攻击 1.3、摆出手势“奥义”，触发四代大招 2、服务器端游戏需要玩家骨骼数据（移动、手势），彩色图像数据（某一手势下触发拍照），所以我们需要向客户端发送这两部分数据。值得注意的是，彩色图像数据体积过大，需要进行压缩。3、客户端客户端业务逻辑较复杂，我们提取关键步骤进行讲解。3.1、用户拍照时，由于处理的数据比较大，为防止页面出现卡顿，我们需要使用web worker3.2、接投影仪后，如果渲染面积比较大，会出现白屏，需要关闭浏览器硬件加速。3.3、现场光线较暗，其它玩家干扰，在追踪玩家运动轨迹的过程中，可能会出现抖动的情况，我们需要去除干扰数据。（当突然出现很大位移时，需要将数据移除）3.4、当玩家站立，只是左右少量晃动时，我们认为玩家是站立状态。七实战总结1、使用HTML5开发Kinect体感游戏，降低了技术门槛，前端工程师可以轻松的开发体感游戏；2、大量的框架可以应用，比如用JQuery、CreateJS、Three.js（三种不同渲染方式）；3、无限想象空间，试想下体感游戏结合webAR，结合webAudio、结合移动设备，太可以挖掘的东西了……想想都激动不是么！