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

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

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

史上最全!57个Web框架4轮横向对比 回顾银行数据的可用性和一致性历史 Qubole:托管在AWS平台上的Hive服务 自由操作系统 Debian 正式发布7.0版本 4月份浏览器份额:IE 8仍居第一,IE 10翻番 亚马逊正式在华推Android应用商店 收入3:7分账 不要男孩,只允许女生参加的四所编程学校 下一波App机会在哪里? JS1K 2013优胜作品公布 3D蜜蜂仅获亚军 专访:前新浪网架构师徐佳转行卖水果背后的故事 FBI密码挑战,你能解开吗? 从0到1只需一天:Twitter后PC时代物联网“敏捷”开发之路的探索 机械生物已经面世 只少个“大脑”而已 百度正式宣布3.7亿美元收购PPS视频业务 比尔&#183;盖茨:iPad让人失望 用户需要Surface Dropbox将于今年夏天举办有史以来的第一场开发者大会 Clustrix Sierra分布式数据库系统:云计算时代的MySQL 英特尔出杀手锏 发布低功耗、高性能Silvermont微架构 10大最实用的Raspberry Pi扩展设备推荐 主流浏览器性能测试,IE10百分百完胜! TortoiseSVN的基本操作 再见,Fireworks! 投资者告诉诺基亚CEO:他们快没耐心了 直接拿来用!最火的Android开源项目(二) 营收奇迹:三消游戏Candy Crush Saga成功启示录 马化腾对话李连杰:移动互联网的能量有多大? UC与趋势科技携手,移动浏览器加固安全 乐视发布超级电视X60 售价6999元 巨头们抢滩或已结束?EMC掀起首场SDN登录战 CloudStack创始人梁胜:让中国软件走向世界 ArduinoDroid:让你在Android设备上开发Arduino 关于wsad的使用上哪个论坛比较好,请大家推荐 关于Windows CE下面的密码验证 关于Visio2002版的安装问题 搞不定了:为啥我的EnumWindowsProc会引起outlook提示?附源码 给中国足球的一点建议,如果照着这条路走,20年后中国队还可以闯进世界杯 急急急!!关于打印问题!!!!!!!! 有谁在WIN2000P+ORACLE805安装了PROC? 寻找北京地区的兼职项目. 谁知道VB MSDN在哪里有下载,我给分! 关于Visual C++的编译器手册。 在一个程序中如何控制Ftp的执行??(急,用windows API实现,不是MFC) vb.net安装和vb6冲突么? 关于JDialog的问题! 各位帮帮忙,怎样读写一个二进制文件?急!!!!!!!(答对了给高分) 有些什么好的中程书籍??? 如何动态的切换数据窗口呢? 各位任兄,谁知道如何对jsp文件加密,就像php那样 为什么自定义过程,出错。说[Error] Unit2.pas(29): Undeclared identifier: 'NMFTP1'unit Unit2; 浏览器插件讨论 问一个Linux下安装软件的问题,太弱了别笑!!!! 急急急:如何让dbgrid控件实现排序功能,,100分 新手问题~~帮帮我啊~~ 我做共享软件的一点经验,希望能抛砖引玉 在iis的服务器上需要安装什么客户端软件才能使asp联接到oracle数据库服务器上? 怎样在vb中控制EXCEL打印报表 如何判断多选框是否选中? 关于 SQL2K 和 XML(在线等待) KingSunSha(弱水三千),能不能再帮小弟一个忙?这个触发器好奇怪??? 正在开发一工资软件,有经验者能否提供参考。 急!!!我的VB中的部件对话框显示不出部件了,还有一个系统错误消息。请问是什么原因,如何解决? SQL SERVER权限管理问题 若你有系统分析经验,请留意... 在access中如何写按照日期查询的语句?急! 调用Excel的问题 关于CDONTS 哪里能找到关于细胞自动机的书阿!(找到后一定给分) 自考失利,恋女无意,唯有CB,本贴无忌。痛苦之人,挥泪大出血。。。。 什么函数可以判断,我的机器当前是不是可以上网? 请问有谁用过interbase数据库?它的默认管理员名和密码是什么? 在线等待:sybase中字符长度用哪个函数?用len/length不行。 紧急求救,关于CAsyncSocket的阻塞问题在线等待 将CHAR(6):200205转换成SMALLDATETIME 的问题! 我要在2000下写采集卡的中断程序,可否帮帮忙?在线等待!急啊! vb.net支持像vc++里的工作区吗? 这是为什么 角色-About PrincipalPermissionAttribute Study(在线等待中。。。) 在线等待:sybase中字符长度用哪个函数?用len/length不行。 请教字符串搜索问题??? 怎样删除一个视? 如何给命令行程序加入图标? 属于二次污染的是SO2.NO.NO2CL2. 写真机接地线的接地位置,直接放地上?求详解 调查动植物与人类的关系生物课题调查:动植物与人类的关系 二氧化硫通过脱硫剂进行脱硫处理后,会产生二次污染吗 没太读懂题两只小船质量均为120kg,停在静止的水面上,一个渔民质量60kg,站在一只小船上,用轻杆撑另一只船,不记水的阻力,若渔民以1m每 二次方s的加速度运动,则另一只船的加速度是多少 呼吸时肋间内肌是如何运动的?它位于身体的什么位置? 怎样去除尼龙再生颗粒里面的二氧化硫气体,而不再产生二次污染?这样会造成一次污染 1.在一次汽车拉力赛中,汽车要经过某半径为R的圆弧形水平轨道,地面对汽车的最大静摩擦力为车重的0.1倍,汽车想要通过该弯道时不发生侧滑,那么汽车的行驶速度不应该大于( )2、质量为m的 与呼吸有关的肌肉是什么? 静电流失用英语怎么表达呀? 动植物给人类的生存和发展提供了什么帮助 人体肌肉由三种类型,胃肠蠕动、呼吸、循环等活动都依靠: 英语翻译静电吸尘埃剂 Electrostatic Precipitator本品为一种专业地面保养品,能增强尘推吸尘去污能力,吸尘后的地拖极易抖去尘土.适合于现代高档家居地面,打蜡地面,要求高清洁度地面等的使用. 哪些动植物给人类的生存和发展提供了帮助 通电导线在磁场中受力会发生( ) 通电线圈在磁场中受力会发生( ),快撒~假若人们没有发现磁场对电流有力的作用则人们就不会利用电动机,这样将令我们的生活带来很多的不便,情根据你的 为什么少的那个力只会是斜面对B的压力而不会是别的? 动植物为人类的生活提供了哪些帮助 通电导线、通电线圈都具有().在通电线圈内放一铁芯就做成().铁芯的作用是()通电线圈的磁性 1.质量为m的物体置于水平面上,用水平拉力F可使物体做匀速运动,若不改变拉力F的大小,使力F与水平面夹角为30°斜向上拉物体,也可使物体沿水平面做匀速直线运动,求物体与水平面间的动摩擦 写真机低地线怎么接才能排除静电机器总是在覆膜的时候打印停滞.机器上的星星还在闪,据判断应该是地线没有接好,覆膜引起的静电原因.尤其是打海报的时候,图也不可以拼,打到快结束的时 通电的线圈比通电直导线的磁性更强, 受力分析 2+3题 750写真机静电过高该怎样消除 如何知道摩托车是两冲程的还是四冲程的? 太阳能电池板的结构,组成物品,工作原理,是什么? 泡泡的英文是什么 摩托车四冲程和两冲程哪个好点 太阳能电池的原理及结构是什么 泡泡英文怎么说 自行车和三轮车一共20辆,总共有49个轮子.自行车和三轮车各有多少辆? 头发要蓬松用什么梳子 太阳能电池的工作原理是怎样的?好急 自行车和三轮车共20辆,共44个轮子,自行车和咱轮车各有多少量?大哥哥大姐姐,帮忙算下吧!我不会~! 尿液里,汗液里,有活细胞吗?活细胞会跑到人体外吗? 泡泡英语怎么写 自行车和三轮车共19辆,49个轮子,自行车和三轮车各有多少辆? 一氧化氮和二氧化氮会造成富营养化污染和臭氧空洞吗? 这首英文歌叫什么?POP的 有自行车和三轮车20辆,一共有50个轮子,自行车和三轮车各买了多少辆? 导致下列现象的主要原因与排放二氧化氮有关的是A酸雨B光化学烟雾C臭氧空洞D温室效应关于硅的下列叙述中,正确的是[ ]A晶体硅与石墨结构相类似 B硅酸盐都不溶于水C硅与酸 碱都不能发生反 动植物的奇异现象有哪些? 抗静电手环英语怎么说 冬天到了,我想用静电电人,整蛊一下同学,怎么放静电电人啊啊啊,急 什么动植物能产生奇妙的现象 防静电洁净服用英语怎么说 静电驻极 用英语怎么说呀 请告诉我一些关于动植物的奇妙现象要多,要详细 如果把两冲程的机油加入四冲程的摩托车内,会有什么后果?见上 化学问题:图中虚线一样的 和实心三角形一样的各是什么化学键 有何含义 判断对错:人体的骨骼肌细胞能合成多糖,但不能通过无氧呼吸产生二氧化碳!刚才看了一下书 好像葡萄糖分解成乳酸时不生成二氧化碳 两冲程的摩托车加四冲程的机油有影响吗 说出有什么影响? 自行车和三轮车共有轮子28个,如果自行车和三轮车的辆数交换,则共有轮子27个.自行车和三轮车原来各有多最后一字没打,是: 学物质结构图的时候 看到有些键是一个粗实心三角 有些是虚线三角 这些代表了什么 和单一连线有什么区别 泡沫用英文怎么说?最常用哪个?我指的是很虚无飘渺、一切为幻影的泡沫、如果答案不同、请告诉我、 自行车和三轮车共有轮子28个,如果自行车和三轮车的辆数交换,则共有轮子27个.自行车和三轮车原来各有多少辆? 画分子立体图时,长长的三角和虚线各代表什么? “泡沫”用英语怎么写? 自行车和三轮车共有轮子28个如果自行车和三轮车的辆数交换则共有轮子27个自行车和三轮车原来各有多少辆 有机物分子结构式上的用虚线画的键是什么意思啊?用实心三角形箭头画的键又是什么意思? 高一物理中这题的两步不理解一列一字形队伍长120m匀速前进,通讯员C以恒定的速率由队尾走到对首A,又立刻返回这过程中队伍前进了288m,求通讯员在这过程中所走的路程?1:6v2*v2-5v1*v2-6v1*v1=02
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘