说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

暴强:用iOS设备控制的HTML5“小蜜蜂”游戏

HTML文档下载 WORD文档下载 PDF文档下载
红白机上的经典“小蜜蜂”游戏在HTML5技术下得到了革新:英国伦敦的Webdigi公司运用HTML5结合Node.js进行开发,扫描二维码使得游戏在PC浏览器中显示,玩家通过左右摇晃iPhone/iPad控制飞船,向小蜜蜂发起攻击。

近日,英国伦敦一家专注于Web App开发的公司Webdigi针对经典FC游戏“小蜜蜂”进行了一次有趣的翻新:用HTML5结合Node.js技术彻底改变该游戏的传统玩法。


玩家可以在PC浏览器上访问: http://www.webdigi.co.uk/fun/space/,然后用iPhone或iPad扫描其中的二维码(或在手机浏览器中访问: http://webdigi.co.uk/821638),响应后玩家能够左右摇晃iPhone/iPad控制飞船打小蜜蜂了,当然,你也可以在PC浏览器中玩该游戏,方向键(左、右)控制飞船的移动,空格键发射子弹。这也是智能手机与PC双屏互动的一种新玩儿法。


用户iOS设备控制端核心代码如下:

//Detect if the browser supports DeviceMotionEventif (window.DeviceMotionEvent != undefined) {//ondevicemotion is fired when iOS device detects motion  window.ondevicemotion = function(e) {//ax is the movement on the x axis.//This motion is used to move the ship in the game  ax = event.accelerationIncludingGravity.x * 5;  ay = event.accelerationIncludingGravity.y * 5; //Status 0 is start, 1 is left, 2 is right, 3 is stayif(status == 0){ //initial condition  status = 3; //stay  socket.emit('spaceChange', {'ax': 3});  statusmsg = 'Waiting for movement';}if(ax > 14 && status != 2){ //move right on device  status = 2;  socket.emit('spaceChange', {'ax': 2});  statusmsg = 'Moving ship right';}if(ax < -14 && status != 1){ //move left on device     status = 1;     socket.emit('spaceChange', {'ax': 1});                    statusmsg = 'Moving ship left'; } if(ax > -14 && ax < 14 && status != 3){ //device held steady  status = 3;  socket.emit('spaceChange', {'ax': 3});  statusmsg = 'Ship held steady';}

对于Web开发者而言,使用Node.js的好处在于,能在客户端和服务器端使用同一种语言(Javascript)创建一款完整的Web App,从而减少切换环境带来的麻烦。Socket.IO是一个针对实时Web App的Javascript库。通过Socket.IO库,Node.js便能够轻松实现WebSocket(WebSocket protocol是HTML5一种新的协议,它实现了浏览器与服务器的全双工通信)。

服务器端Socket.IO代码如下:

//Start on connectionio.sockets.on('connection', function (socket) {  //Set room for user when connection is made socket.on('setChannel', function (data) { socket.join(data.channelName); });  //When iOS device moves send data to browser //Multiple browsers can be listening to same device socket.on('spaceChange', function (data) { socket.broadcast.to(data.channelName)                   .emit("spaceChanges",data); }); });

用户PC浏览器端数据处理的代码如下:

//iOS detection and corresponding actionvar lastkey = 37;var dataStart=0;  socket.on('connect', function() {   //if sockets gets disconnected then mention room again   socket.emit('setChannel',               {'channelName': '<?php echo $randRoom; ?>'});  });   socket.on('spaceChanges', function (data) {     if(dataStart == 0){        //First movement data arrived        document.getElementById('status').innerHTML                   = 'Receiving data from your iOS device';        dataStart = 1;     }    ax = data.ax;    var posob=new Object();    if(ax == 2){        //move right        lastkey = 39;        posob.keyCode = lastkey;        posob.type = 'keydown';        document.getElementById('status').innerHTML                    = 'iOS device tilted right';    }    if(ax == 1){        //move left        lastkey = 37;        posob.keyCode = lastkey;        posob.type = 'keydown';        document.getElementById('status').innerHTML                    = 'iOS device tilted left';    }    if(ax == 3){        //hold ship in place        posob.keyCode = lastkey;    posob.type = 'keyup';        document.getElementById('status').innerHTML                    = 'iOS device held steady';    }    //Send action received above    keypressaction(posob);  });    //Fire automatically once first data startswindow.setInterval(function(){  if(dataStart == 1){    var posob=new Object();    posob.keyCode = 32;    posob.type = 'keydown';    keypressaction(posob);    posob.keyCode = 32;    posob.type = 'keyup';    keypressaction(posob);  }//Timer is correctly a shot ever 200ms.//Decrease 200 to lower for even faster firing!}, 200); 

文章来源:Webdigi Blog

(编译/杨依帆 责编/张宁)

2013年数据中心发展的五个关键因素 可穿戴式设备:高调的Google 低调的苹果 由CloudFlare宕机引发的思考 传iWatch年内推出 或成苹果救命稻草 Twitter开源其Java消息流库Hosebird Client API正在崛起 渐成企业核心业务 HTML5会是Firefox OS的生门还是死门? 三星的成功并非偶然,而是专业 避免恶意软件 日本政府警告用户慎用Google Play 曝光:诺基亚要推出新手机系统Meltemi 为研发iWatch,Jony Ive订购大量Nike腕表 APP运营人的一天:宫爆老奶奶产品运营 新传感器:三星Galaxy S4或将支持眼球追踪 IBM发布基于OpenStack的服务 从Windows Server 2012云创益大赛看国内行业私有云发展 张小龙谈微信:你可能不知道的9件事 源代码管理十诫 游戏手柄也能编程 极客打造不用键盘输入的IDE 开源不只是程序员的专利 政府也可以 开源搜索Elasticsearch:PB级数据的快速搜索 月下载量已达20万次 乐视网联手富士康推超级电视 欲颠覆传统盈利/营销模式 IBM 2012IT实践达人赛圆满落幕 宣布成立新兴技术大学 对比MapReduce 流处理框架没有所谓的查询层 美国政府:修复漏洞仍有风险 应禁用Java插件 AppGlu应用辅助工具:帮助开发者处理善后工作 iOS!你这几个方面该向Android好好学习 小于1%,中国有真正自主的移动操作系统吗? 张小龙专访系列(下):不一样的产品思维 Gartner:截止到2016年公有云市场复合增长为17.7% Appcore:在企业内部部署IaaS平台 B轮融资600万美元 超现实主义!用脑电波控制你的计算机设备 请问win2000_Server的service pack在哪有卖,D版?北京? 安装JBuilder5对机器有什么性能要求吗(内存、cpu...)?Thanks!(内空) 关于PB作为OLE SERVER的问题 我想做个启动画面的窗口 关于MYSQL的问题 数据库高手请进,值得一看 怎么从文本文件里取出其内容? 请大家帮忙看一下,关于Delphi的三层MIS开发 如何获得经典的C++/MFC方面的电子文档,中英都行,谢谢! 压缩中提到的文件头有什么作用 , 请问各位专家,在网页上如何制作视频点播?有几种方式! 我报了中程谁有历年的中程试卷? 我收到的信都是?号,怎么看???? VB中是否有移位操作符??是否有_能够得到数据类型宽度的函数? 哪里有core java的e版down啊? 有事好商量!请进! DLL编程错误,请高手指教一下!! 活见鬼,真气人....... 问一个trigger问题? 问一下:我的char*都用_T("asdfsafd")表示了,资源也没任何问题,可有时候运行程序显示乱码 在论坛里,发一个帖子新开一个窗口,当发完后让原来那个窗口刷新一下 我的机子到底怎么回事???? 我试试.. CListCtrl中如何选定整个一行? 来到济南天气太热,特来送分 ★★★★★ 见于现在伪ID和盗用密码的现象十分嚣张,我提议…… ★★★★★ 请教各位,我用vb6.0访问ms sql7.0数据库,为什么有时出现,“过期,数据已超时?” 请问COM和DLL有什么区别和联系?(30分) 关于侯老师 win95-a-developers-guide 一书的源配书... ISAPI中不能存取ASP中的Session、Application变量?高手你老人家在哪里? 大家来看看这些招聘题目合不合适 提一个网页制作的问题哈,大家不要扔西红市啊,网叶制作可是程序员的基本技能之一 activeskin里的skinbuilder有谁用过???来讨论吧 我在msdn上看到vb中的字符串有两种:定长字符串和变长字符串。请问如何分别声明这两种类型? 怎样在ADO中引用已打开的recordset的某一字段值,请给几个例,谢谢了! seedundersnow and holyfire help me!about 8253! 谁有cute ftp 4.2.6 beta的注册码 请问如何把页面查询到的记录导入到Excel中呢? 有用过TAdvStringGrid的吗?OnGetEditorType( )为何不被调用? 请教高手如何用Xsl编制函数控制Xml??急急 哪位给一个MD5的例子!谢谢了 长春的李延生来领分 求救:一个VC中多线程的问题 提个问题,原来对VC尤其是界面和C++语法这一块比较熟,现在由于公司需要转C++BUILDER,难不难,需要熟悉哪些 [总300分,会继续加分]哪位大哥用编程实现过创建SQL Server的DTS package并且run the package的全过程[急] 能不能使用html 压缩中提到的文件头有什么作用 , 保含哪些信息 菜鸟问题1 提一个网页制作的问题哈,大家不要扔西红市啊,网叶制作可是程序员的基本技能之一。。。。。。。 关于:import java.util.StringTokenizer; 问题! 如何实现在某特定时间(如每月1号,或7天后)执行特定asp程序? 一块红布子30m,宽1.5m,用它做2条直角三角形都是5分米的等腰直角三角形小旗,可以做多少面? 有一个长3m,宽2m,深1.5m的蓄水池,用一个水管向池内注满水需30分钟,水管每分钟注水量是多少? 一个圆柱形蓄水池底直径是10米,池深1米这个蓄水池的容积是多少立方米 一块长方形红布长20米,宽1.5米,用它做腰是5分米的等腰直角三角形小旗,可以做多少面.求列算式(公式)符号!&*/¥%…#我看不懂 挖一个长5m,宽3m,深2.5m的长方形蓄水池,这个水池的占地面积是( ).A 20平方米 B 15平方米 C 70平方米 一个圆柱形蓄水池,底面直径是10米,池深5米.这个水池的占地面积是多少平方分米?(2)在四周和底面抹上水泥,水泥的面积是多少平方分米?(3)蓄水池的最大容积是多少立方分米? 一块长120分米,宽8分米的红布,剪成腰长是2分米的等腰直角三角形小红旗,可以剪出多少面这样的小红旗? 某工地修了一个长8m宽5m深3m蓄水池,如果每分钟注水200立方分米,注满水池需要多长时间 一个长方体蓄水池长8m,宽4m,深3m.这个蓄水池占地面积是多少平方米?在池底和四周抹水泥,抹水泥的面积多少?蓄水多少立方米? 一块长25分米,宽20分米的长方形红布,裁剪成直角边都是2分米的等腰直角三角形小红旗,最多可以做多少面小红旗?百度知道 一个圆柱形蓄水池,底面半径3m深2.5m这个水池占地多少平方分米 校要建一个底面周长12.56M,高3M的圆柱形蓄水池,这个水池的占地面积是多少 抹水泥的面积有多少平方M? 一块长方形红布,长9厘米,宽6厘米,要用它做成底是2厘米、高度是3厘米的直角三角形小旗,可以做多少面? 一个长方体水池,它的长是50m、宽是2m、深是3m,如果水池中水深1.5m,这个水池有水多少立方米?请快一些~~着急用呀呀呀呀~~谢谢! 某农场挖了一个圆柱型蓄水池,底面直径是3m,高是8m 1要在这个蓄水池的周围和底面上抹上一层水泥,抹水泥的面积是多少平方米?2在这个蓄水池内装满水可以装多少立方米的水 20立方米的水大概有多重? 一个长方体的水池长50m宽20m深3m池内水位高2m 这个水池能装多少吨?【一立方米水重1吨】沿水池走一圈,至少要走多少米?如果给这个水池四周及底面铺上瓷砖,铺瓷砖的面积有多大? 一个圆柱形蓄水池,底面半径2m,深3m,在池底和四周抹上水泥.如果每平方米用水泥20千克,水泥要用多少千克 每立方米水有多重? 一个长方体水池,它的长宽高分别为50m、20m和3m,如果水池中水深1.5米,这个水池中的水有多少立方米?1.到底是求体积还是表面积?如果以后遇到这种问题,怎么判断到底是求体积还是求表面积?2.水 一个长方体水池长5分米宽4分米深3分米,水面离池口4厘米放一块棱长2.1分米的正主体石块水会溢出多少毫升 一个蓄水池,用去存水的70%后,注入100立方米水,这时池内的水正好是原来的50%.这个蓄水池原来有水多少要方程,一步一步解 挖一个的长方体的蓄水池,长7m,宽3m,深2m.若将10.5立方米的沙铺在池底,这时池深多少米? 一个长方体水池,长6米,宽5米,深0.68米,水面距池口18厘米,这个水池里有多少立方米的水? 一个蓄水池,用去70%,注入一百立方m,现在的水正好是原来的一半,原来多少水 一个圆柱形的蓄水池,底面周长是25.12米,深是2.4米,水面离地面0.9米,这个蓄水池现在蓄水多少吨?我不知道是(2.4—0.9)还是直接0.9 水面离地面0.一个圆柱形的蓄水池,底面周长是25.12米,深是2 一个长方体水池长5分米,宽4分米深3分米,水面离池口4厘米放一块棱长2.1分米的正主体石块这时水会溢出吗? 一个蓄水池,用去存水的70%后,注入100立方米水,这时池内的水正好是原来的一半.这个蓄水池原来有水多少立方米 一个圆柱形蓄水池,底面周长是25.12米,深2.4米,水面离地面0.9米.蓄水池蓄水池蓄水多少吨?一个长120厘米的圆柱,把它截成9个小圆柱所得的表面积比总和比截成6个小圆柱所得的表面积总和多180 某化工厂挖了一个蓄水池,能蓄水1080吨.这个蓄水池长24米,宽8米,深是多少米(每立方米的水重1吨 一个蓄水池用去存水的70%后,注入100m3水,这是池内的水正好是原来的一半,这个蓄水池有水多少立方米? 一个圆柱形蓄水池,底面周长是25.12米,深2.4米,水面离地面0.9米.蓄水池蓄水多 一个长18米的长方体蓄水池,现蓄水720吨,池内水深4米,这个水池宽多少米?(1立方米的水重1吨) 一个长方体的蓄水池,长20m,宽18m,深2.5m.池里的水离池口0.5m,池里的水是多少立方米? 一个圆柱形蓄水池,底面周长是9.42米,4米.已知1立方米的水重1吨,这个蓄水池可蓄水多少吨? 一个长方体的蓄水池从里面量长7.6米,宽5米如果池中以蓄水22.8吨池中水深多少米每立方米水重1吨列方程解答一个长方体的蓄水池从里面量长7.6米,宽5米。如果池中以蓄水22.8吨池中水深多少 挖个长10m.宽8米,深5m的长方体蓄水池. 水池能蓄水多少立方米? 一个圆柱形蓄水池,底面周长是18.84,深是2米.这个蓄水池能蓄水多少吨?(1立方米水重1吨)需要公式和计算的过程快快快 一个圆柱形蓄水池,底面半径4米,深5米(1)这个水池能蓄水多少吨?(每立方米水重一吨)若在这个水池的侧面和池底抹上一层水泥,抹水泥的面积多大? 长方体蓄水池长40米,宽15米.深2米,池内现有900立方米的水,水面距池口多少米?很急! 一个圆柱形蓄水池,底面周长31.4米.水面离池口50厘米.再注入多少立方米的水可灌满水池? 一个圆柱形水池,底面半径3米.5米.这个水池最多可盛水多少吨?(1立方米的水重1吨) 一个长方体蓄水池长8.5m,宽4m,深1.5m.这个蓄水池占地面积是多少? 长方形蓄水池占地12平方米,池深1.3米,池内最多能蓄水( )立方米.哪位高人可以快点解答啊?我真的很很很急急急啊啊啊啊! 某动物园有一个圆柱形状的水池内直径10米深0.6米.如果放水后水面离池口0.1米,有水多少吨(1立方米水重1 有一个圆柱形蓄水池,底面半径为2米,池深20分米,先往池内注入15分米深的水,注入了多少立方米的水? 一个长方体蓄水池,内底面积是13.5平方米,池中已蓄水10.8立方米,已知水的深度是池深的一半,这个蓄水池深多少米?【先用体积除底面积求出水深,再乘2求出池的深度>O 4/5 x4+2/5x2+1/5x16 简便计算 一个蓄水池的容积是240立方米,它的池深3米,这个蓄水池的占地面积至少是( )平方分米? 请问:一个长方体蓄水池,内底面积是13.5平方米,池中已蓄水1o.8立方米.已知水的深度是池深的一半,这...请问:一个长方体蓄水池,内底面积是13.5平方米,池中已蓄水1o.8立方米.已知水的深度是 六年级4/5x4+2/5x2+5/1x16怎么算啊? 有一个蓄水池如果蓄盛水,可盛600立方米水,已知这个水池长是15米宽是8米,池深应是多少米? 一个长方体蓄水池,占15平方米,池深1.5米,池内最多能蓄水多少立方米?合是多少升 (4.4x7.5x4.8)除以91.5x2.5x2.4)简便运算 一块红布长30米,宽1.5米,用它做两条直角边分别是5分米、6分米的直角三角形小旗,可以做多少面? 一个圆柱形的蓄水池,底面半径是4m,深2米,这个蓄水池最多能蓄水多少吨?(1立方米重1吨) 一个底面半径10米的圆柱形蓄水池能蓄水1570立方米如果在挖2.5米可以蓄水多少立方米 一块红布长40米,宽20米.用它做两条直角边都是4分米的等腰直角三角形小旗,可以做多少面?请帮请我弄上答案,再告诉我怎样求出的, 一个蓄水池长6m,宽4m,深3m.他的占地面积是多少平方米?最多容纳水多少升?如果在他的四周和底部抹上水泥抹水泥的面积是多少? 挖一个圆柱形蓄水池底面半径是5米,深是4米,这个蓄水池可蓄水多少立方米?(用综合式计算)
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn