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

暴强:用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

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

断开所有的数据连接 -VB资料 访问VB外来数据库 非access数据库在vb中的编程及应用 关闭程序中所有创建的数据库连接。 -VB资料 关闭所有的数据连接 -VB资料 关于数据报表的打印设置-VB资料 VB建立、改变及重构Access数据库-VB资料 结构化查询语言(SQL)详解之一-VB资料 利用VB使ACCESS数据库在网络使用中保持同步 返回 连接Data到多个表单-VB资料 列出 SQL Server 数据库中所有的存储过程-VB资料 列出MDB档当中所有table的名称-VB资料 您想知道有谁正在使用您的 Access 文件吗?(多人环境中)-VB资料 主题:浅谈Excel 的VB编程 巧用VB6的DataGrid实现通用电子表格 VB取得正确的 RecordCount 值 主題:如何动态新增、移除 ODBC DSN? -VB资料 VB如何将表中的数据导出到电子表格中 VB如何将文本文件转换为ACCESS数据库 VB如何將 Excel 的文件导入 Access文件? VB如何判断数据中是否存在某一表或查询 VB如何删除FoxPro数据库的数据? VB如何设置对VB数据库连接的动态路径 VB如何使用 ADO 來压缩或修复 Microsoft Access 文件 VB如何修改Foxpro数据库(不是用VB实现的,不过也可以看看) VB如何在 SQL 语句中使用日期? 返回 VB如何在表中保存单引号? VB如何抓出 Access 的 Table 欄位中的【敘述】部份呢? 实现Access数据库的Web查询-VB资料 使用Visual Basic访问数据库几个注意的问题 数据库查询-VB资料 关于临时表的共享问题? 是不是我的问题太难了,没有人回答? 请举例说明:接口是怎样实现多重继承的? 听说最近由于IT行业不景气,程序员的工资缩水了?是真的么? 这样写有什么不对?? delphi的dll库返回后调用程序出错!加了一行无关代码却正常!求教各位大狭! 塔尼包姆出了不1本计算机结构的书,还有1本MICROSOFT的 Microsoft Windows 用户界面开发 请问是否很好 Access初学者问一 再次请教一个sql排序问题,一定给分。 请问:程序中对WM_PAINT,WM_CTLCOLOR,WM_ERASEBKGND三个消息处理的顺序是怎样的? 这个月生意只有上个月的1/5,怎么回事? 我女朋友说最爱她的人不是我,这意味着什么? 工资里导入上月数据怎么实现 谁有复读王(fyfdw2001)的注册码? 经过一段时间的努力,我做出一套电话语音邮件系统,可以用电话和手机来收发EMAIL,有意者请与我联系 xuyaoliang@263.net 请救救我吧!有谁能告诉我中程的分数怎么查! 如何解决数据窗口显示照片(此照片在数据库的一个字段里)的问题? 请问如何获取硬盘和光驱的型号信息 谁有复读王(fyfdw2001)的注册码??????? n_up的问题。如何在另一列插入计算字段? 有没有深圳的mm,一起过圣诞好吗? far怎么用啊? 关于临时表的共享问题?? 请大家介绍一些学习C/C++的好网站,只要进者就给分。 "他妈的,又打歪了!" 我在作登录是出现了"runtime error"错误,详情见内 3台机子如何共享一个adsl上网?? 如何把一应用配置成一NT服务 出学的菜鸟提问 找回addin:资源编辑器 怎样开发阅读工具软件 acm文件格式 数据库安装程序的问题。 大家看看这道题怎么解 100M的网线怎么做?用的是双脚线!!! 大峡,我把一个Acess的 .mdb文件设置了密码,但是密码我忘了,哪里有软件下载,可以解决我打开的问题呢?谢谢 关于 请问怎么样实现象”金山毒霸“控制中心一样的界面? 请问如何在TCOMBOBOX中输入后自动查询到相似的ITEM上面去 文件对话框中怎么过滤文件 wang wei come on 一个ODBC数据源可以被多个应用程序共同使用吗? 经过一段时间本人修改了sendmail、POP3、IMAP4的源代码,把用户认证该为了数据库,数据库采用的MYSQL、并虚拟了整个系统用户来存放邮件内容,有意者请与我联系xuyaoliang@263.net java 板圣诞大餐 有人会吗?不重做系统:如何修改win98se的安装时的序列号? 如何在DELPHI中调用中断? 其实就是一个信仰的问题。想想我们建国的时候不是一样抛什么什么洒什么什么吗?大家也都是无怨无悔。听懂就瞎听。听不懂就当我放了个屁!我可是什么都不信!就信我自己。哈! sql语句问题!! 大虾请进! 目前我还在用JAVA MAIL+EJB开发企业邮件系统有兴趣的可以加盟,并提供好的意见。谢谢 [送分族]今天圣诞也! 请问怎样实现“金山毒霸”控制中心的界面效果? 汉译英:两个名词秦始皇陵遗址公园 Qin Shihuang'Mausoleum Site Park秦始皇陵博物院 Qin Shihuang'Mausoleum Museum 怎么求太阳直射的经度 帮忙汉译英:做自己喜欢做的事enjoy doing myself love to do这句话语法对么?谢谢指点!因为我们打算开发现代社群的个人爱好,现在只是一个初步的想法。以后我们的口号就可以说:do it!I enjoy do i 现值计算的问题 图里面的四个公式 分别应该在什么时候用啊== 夏至日 太阳直射点经度怎么根据图象计算夏至日的太阳直射点经度?请说明具体情况. 遇到已知一个地区的经度与当地时间,求另一地是该怎么算?本人在这方面经常丢分,明天就考了,麻烦帮帮忙. 股票价格计算公式怎么样? 如何判断太阳直射点经度如题 同一经度的时刻相同吗. 时间计算公式A1为开始时间10:00 B1为结束时间12:00在C1算出中间间隔几小时. 我喜欢你 你喜欢我吗?怎么办. 英语翻译审美的差异.审美作为普遍的社会文化现象,是人类文明长期发展的结果.文化背景的不同,决定了审美情趣的差异.审美的差异决定了译者要深入把握源语电影作品的思想美学内容,用目 翻译英语,不要有百度的,百度的我用过了,不对.翻译的英语内容:1.what are you going to do in the nature park?2.I‘m going to draw some pictures.What about you?3.I’m going to look for some beautiful leaves.4.Mike is going to b 我喜欢你你也喜欢我,为什么还要他只会盯着你看,有意无意老是盯着你看,在你面前会示好,可以没有提过和爱情有关的是他太胆小吗 英语翻译我们已经发货,在香港出了点问题,不过已经解决,大概需要5天就能到英国了,这是你快递单号,你可以在xxx进行查询,给你照成的困扰我们感到很抱歉 英语翻译清明节是我国汉族的传统节日之一,为中国二十四节气之一,时间约在每年的阳历4月5日前后。古有清明前一天为“寒食节”之说,相传起于春秋时期晋文公悼念介子推“割股充饥 英语翻译只要是我喜欢的,就是最好的. 由地球公转产生的地理现象是( )1四季变化2昼夜长短变化3日月落4不同经度的地方出现时间差异(可多选3是日月星辰东升西落 求解释 英语翻译India has a long tradition of government planning but the degree of government intervention in the economy has been reduced in the last two decades.Privatization started in 1991,with the creation and sale of a small number of shares in so 英语翻译1.工程部自销售部得到项目信息后,核实项目各方面情况.了解用户有无特殊功能要求:有:应该在公司搭建模拟环境,新开发功能的测试工作尽量在公司完成;无:也应当将所有涉及 英语翻译这个故事讲述了普通人的生活 英语翻译参加俱乐部和学生社团是件好事,不仅能与更多的人打交道,还能丰富学生们的社会生活.(Tranlation:Participating in clubs and students’ associations is a good thing,not noly communicating with more people,but 英语翻译In January,2000,I was diagnosed(诊断)with cancer.Life in hospital has been made a lot more bearable by the phone conversations I have with Dr.Kaplan.His first wife died of cancer,so he knows what I am going through .He always encouraged 英语翻译外来词是一种语言的词汇传入到另一种不同语言环境下形成的词汇,且被另一种语言接受并使用的词汇.它也可以被称为借词.总言之,抽象外来词指的是语言使用者适应从源语到他们的 汉译英:我不能保证每个人都喜欢我 英语翻译恋爱不是坚固的溜冰场.恋爱是一片结了冰的湖面.我们是可以在上面手牵着手,轻飘飘的嬉戏,绕着我们自己的圈圈,只是不会有人来警告我们,冰会在那一 秒溶化、裂开,恋爱中的我们 英语翻译人为因素是一门应用科学,以操作设备的人为研究中心.应用人为因素有和于优化人的行为表现并减少人为差错.人为因素体现了行为科学和社会科学、工程学和心理学的方法和原则.人 英语翻译由于托盘高度太高,不能装运,所以货代将一个托盘换成2个托盘在上海仓库.请参考附件照片. 【求高手】:道德经第一章英语翻译,不要复制粘贴党, 我想问一下同经度不同纬度的两个地方是不是两点时间同时,同时看到日出? 急!帮忙翻译吧.不要百度在线翻译的.在线等.condition of the injury.It was late, wandering in the choice of two individuals directly over.I cried, somehow, banging on the keyboard don't know stem what, listen to the 通过地球上的经度和纬度,人们可以确定一个地点在地球上的位置 判断 汉译英在线翻译 英语翻译Studies show that people are watching more TV today than they did twenty years ago 如何辨别经度纬度 四季更替现象是由于地球【 】所产生的,不同地方时间差异是由于地球【 】所产生的 英语翻译 在地图上如何来判断南北纬度?纬度范围?经度变化规律? 地球上时间差异的规律是什么? 数学几何题应该怎么添加辅助线?有些题目有辅助线一连答案就出来了``但是一不懂怎么连可就很麻烦了``应该怎么添加辅助线呢?有什么规律吗? 请帮忙用英语翻译以下这段话,请不要机器自译昨天我们在吊运主机排气阀时突然机舱行车不能进行升降控制,检查行车控制箱发现控制箱内电源开关3F1发生跳电,我们对其进行复位,但还是马上 地球的自转,产生了什么跟替,使地球上的不同地方出现了什么的差异. 求数学几何的辅助线做法遇到什么样的图形,一般做什么样的辅助线能解决问题? 知道太阳高度角怎么求经度? 地球上时间差异有什么规律 做数学几何题如何添加辅助线? 太阳高度与经度的关系已知东经90度的正午太阳高度.如何得到同一时刻东经75度的太阳高度?这个是不是还和纬度有关系?有现成公式么? 英语翻译1面对来袭色狼,大可气定神闲,面带微笑,以静制动.2待那禽兽近身后,弓腰,膝盖微曲,收紧肩颈肌肉.3然后双脚用力蹬起,身体伸直,用地球人最硬的头骨对那畜牲的下颚进行撞击,由于下 关于数学几何辅助线问题是不是不能直接作垂线,而是只能连接一条线段要自己证明出来是垂直的.有没有什么情况是例外的举个例子,在圆O中,做一条垂线垂直于弦AB。这样的说法可不可以 某地北京时间13时太阳高度达到最大,如何计算出此地经度? 若某地正午时,北京时间为12;40,那么该地经度应为多少?我的思路是:12:40-12:00=40分钟,因为经度相差1°,地方时相差4分钟,并且东早西迟,所以40除以4为10度,该地经度该为116°-10°=106°, 数学怎么出有辅助线的几何题? 太阳高度与经度差的问题为什么1度太阳高度对应的经度要大于1 打个比方:A、B位于同纬度,当A地直射时,B地的太阳高度是75度,问AB两地的经度差大于15还是小于15?当然,按照上面的那个公式来 某地正午时,北京时间为12点40分,这地的经度是多少 中译英:你们的发型杀死我了You guys hair kill me. 中文翻译成英文,不要机器的关于接下来开发的模具贵司是否有新的消息?期盼您的回复! 某日正午时,北京时间为12时16分,则该地经度为? 名词中译英两个中文名词英译.1)南方联合防御体系,2)水蜥部队,水蜥是一种动物,属蜥蜴类的.希望准点,另外第一个南方联合防御体系可不可以有简称,例如FBI,CIA一样..请高手准确指教没看明白 汉译英 英语值日报告 我的发型内容:今天我们来讨论我的头发.最近,我的头发被剪短了.对此我身边的人有不同的看法.我妈妈说我变精神了.我的同桌认为我的发型将会成为趋势.但是,我前面 同一时刻,不同( )的地方具有不同的( )时.经度相差( )度,时间相差1同一时刻,不同( )的地方具有不同的( )时.经度相差( )度,时间相差1小时.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn