论基于 HTML5 的网页版体感游戏的实现

这是一个专门讨论 idea 的地方。

每个人的时间，资源是有限的，有的时候你或许能够想到很多 idea，但是由于现实的限制，却并不是所有的 idea 都能够成为现实。

那这个时候，不妨可以把那些 idea 分享出来，启发别人。

This topic created in 4288 days ago, the information mentioned may be changed or developed.

今天第一次体验XBOX上的水果忍者，感觉比手机和ipad上的好玩太多了。
这让我回想起了几年前玩过的一款非常古董级的用mac摄像头玩的体感游戏ToySight Gold（非常的好玩）
既然一个摄像头+视频追踪数据算法就能搞定的操控方式为什么没什么人开发相应的app呢？况且现在HTML5技术这么先进，刚才这两点完全可以在网页里实现，不需要安装任何app

目前已经有基于HTML5的水果忍者 http://flashhawk.github.io/spp.js/examples/fruitNinja/

也有基于摄像头识别手势控制幻灯片操作的项目 http://revealjs.herokuapp.com/
理论上应该可以在PC或mac上实现Xbox上水果忍者的效果。不知道有没有人愿意研究一下。

Supplement 1 · Sep 14, 2014

增加一下回复里分享的HTML5体感游戏：（请使用chrome体验以获得最佳效果）
墙来了 http://wc.alloyteam.com
怪兽打打 http://ued.taobao.org/mtg/gaia/game.html
感谢：@temberature @HaEx

html5

摄像头

忍者

8 replies • 2014-09-15 10:17:39 +08:00

bigzhu

Sep 14, 2014 via Android

想法不错，可以试试。
网页沙盒太死，估计访问不了摄像头。

另外问题是类似游戏本来粘性就低，网页版很难激起付费欲望。
如何盈利呢。

hjc4869

Sep 14, 2014

网页访问摄像头，然后用javascript对视频/图像数据进行分析处理？？

抱歉我家CPU和RAM还想多活几年。。。

faceair

Sep 14, 2014 via Android

我们以前做过纯网页体感游戏的参赛项目。手机打开一个html5网页，在这个网页收集手机传感器信息。这个网页再通过websocks连接服务器，服务端分析传感数据后再控制网页端的动作。

当时我们想相对摄像头实现更多的动作，所以选择这个方案。摄像头识别二维动作还好，但对于前进后退识别起来比较困难。

当时识别效果和操控性都不是很好，我们想了下，可能有的问题是：
1、各个手机浏览器、不同手机对html5的支持度不一样。有的手机传感器数据会漂移，有的浏览器获取数据有问题，所以当时我们只有一台测试机是正常的。
2、算法和思路有问题。因为我们是一个类似于RPG游戏，所以我们需要完整识别出对应的动作后才能实现一个动作。这样的后果就是有很长一段时间我们是在等待一段数据，大概采集30个点的数据后才会开始识别。当时的识别的学习算法是一个学长写的，据他说采集的样本不够大，如果够大的话识别率还能再提高点。
3、网络延迟。一般体感游戏都是本地的，而纯网页实现至少需要一个远程服务器来识别动作。体感数据上传，分析，再回传动作。这个操作延时太长。

后来比赛结束就没有再研究了，各位有兴趣可以想想怎么继续优化。

temberature

Sep 14, 2014

http://www.alloyteam.com/2012/11/somatosensory-game-wall-introduced/
同分享个网页体感游戏

typcn

Sep 14, 2014 via iPhone

我试过手机网页无法html5调用。电脑可以

akfish

Sep 14, 2014

除非传感器标配，并且提供API支持，然后才有可能，比如Leap Motion就能从网页里调用。
不然你要自己写算法？摄像头的帧率本身不足以达到实时交互，js的性能更不足以支撑复杂的CV算法，虽然理论上可以通过hacker WebGL shader来做GPU加速。
假如说某家公司投入大量人力物力做到了，前端你懂的，代码无处藏，全被别人白捡走了，没人会去干这种事的。

HaEx

Sep 14, 2014

同分享一个： http://ued.taobao.org/mtg/gaia/
目前浏览器的运算效率还是非常低的

ioth

Sep 15, 2014

体感，喜欢的不是太多。
xbox做了，别人赚钱不容易。
sony都快活不下去了。向前看，学apple