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

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

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

用Delphi创建Internet快捷方式 用Delphi实现NetBIOS广播收发 用Delphi实现网络驱动器的映射和断开 用Delphi实现远程屏幕抓取 用DELPHI制作留言板 再谈用Delphi程序获取拨号连接的动态IP地址 在DELPHI程序中拨号上网 在DELPHI程序中获取网络资源信息 在Delphi程序中应用IE浏览器控件 在Delphi中调用NetscapeNavigator 在Delphi中使用flash控件 在Delphi中使用IP控件 在程序中动态取得Win95/98网络邻居中工作组及计算机名-Delphi资料 在程序中获取网络资源信息-Delphi资料 自制THyperLink组件-Delphi资料 报表制作技巧(三)-Delphi资料 Delphi数据库开发及统计表格设计 Delphi文本和图形的打印方法 Delphi应用程序中中国式报表的制作 Windows环境下实时列表输出的实现方法-Delphi资料 报表制作技巧(二)-Delphi资料 Delphi编制的程序运行中动态制作报表 报表制作技巧(一)-Delphi资料 如何在WINDOWS中控制打印字体的长宽,而不受限于SIZE 的限制-Delphi资料 也谈为Delphi中数据库报表加网格 用Delphi4的QReport部件生成报表 用Delphi编写打印程序的窍门 用Word做Delphi报表输出工具 在DELPHI 文 本 和 图 形 的 打 印 在Delphi中运用QuickReport实现多栏列印 在打印或打印预览前如何获取报表页数-Delphi资料 java字符转换问题!!! 请教一个Struts标记问题! 一个cab下载的错误信息解读,请教高人。 OutLook?怎么用它发邮件,经常提示错误? 帮看这段删除纪录代码有什么问题?三层结构oracle 本人要做一个WEB合同管理平台,由于以前没做过,请大家指示? Web Application 中怎么来调用 Web Server?谢谢! DataGrid中模板列嵌套的DataGrid怎样相应其事件 [调查]程序员证在你们公司里到底有多大的作用?有多少人有证?希望有没有证的都进来说一下。 怎样把字符串"C;\aaa\bbb"变成字符串"C:\aaa\ccc\dd"?用什么函数,操作? 我的SQL Server 装好后,出现下面的错误 这个文件查找真是怪!......msdn源代码居然有问题, 进来看看... 请问在TreeView控件中如何通过光标的上下移动获得光标所在项在数据库中的ID值 對掌上電腦Sony Peg-TG50和ACER N10怎麼看??? 使用SOAP协议传递服务器端查询结果容量问题? 菜鸟问题:数据窗口怎么设置检索参数?急!!在线等 ****入门提出的问题****,请各位高手指教! 很简单的一个问题。 这个问题怎么处理? vb如何调用一个组件?? 一个小问题,可不简单哦! 应聘CMM时,会被问到什么有关CMM的问题? 调用servlet出现这个错误HTTP method POST is not supported by this URL 在公网上如何连接远程数据库啊。。 这算不算bcb的bug?关于Image控件的使用。 使用 GDI 函数画直线时,如何同时在该直线的两端画出箭头来? 怎样改变网卡的工作模式???~~ 疑难杂症--关于共享adsl专线的网络问题--疑难杂症 小弟有一事请教??? 我的IE WEB 控件---TREEVIEW控件,怎么没有treeView.AfterSelect()事件? 新手接触midas的若干典型问题!小的头都搞大了!还是不行!望各位大虾赏个脸解答一下! 一个静态页面中的困惑!心急如焚.................. 请问这句话什么意思? 如何判断一个用户的会话已经失效?-解决立马给分 急:如何改变datagrid的背景色 string sqlstr=DataGrid1.Items[1].Cells[1].Text有错吗? 帮忙,请教一个问题! 请教高手:以下情况如何写sql语句和填写datagrid? 如何对dbf的数据库进行操作 请教大虾 写一个画流程图软件的需求分析(用VB做)(简单步骤也行) 关于权限问题。 如何让客户端在1024*768的状态下,显示800*600的效果 include和header有什么区别? 如何把从数据库中读到的值赋给变量 如何在owc做的饼图上写上 名称,数量,百分比 ?急,用过的请帮忙,先谢了 如何使对话框的菜单项无效? 兄弟姐妹们,帮帮忙给兄弟投票 如何访问Web.config文件中的属性? 请帮我写段程序!很简单的,谢谢! 模式对话框问题 应用程序出错? 材料作文怎么审题 一道高中生物题,从图中怎样看出亲和蛋白进入细胞,既需要载体也需要能量的? 上联:事越烦,越要耐烦 求下联…… 材料作文审题阅读下面的材料,根据要求作文.3月11日,最新的《福布斯》富人榜出炉,墨西哥的电信大鳄卡洛斯•斯利姆成为世界新首富.《福布斯》杂志说:盖茨和巴菲特在富翁榜上的位次 植物六大器官是哪些? 好烦啊,好无聊啊,谁能介绍点有意义的事情做啊本人16岁 材料作文审题立意材料:猴子出名会模仿人,一个老人看到一个猴子,便扔一个草帽过去,然后猴子拿着帽子高兴的走了.数年后,老人的孙子重复他爷爷的事情,猴子不再捡帽子,猴王出来便说:“ don't work on it The sign on grass says,“Don't walk on it.__ __"A:Look at B,Look out C,Keep out D,Keep on 何食少而事烦是什么意思 加湿器里面可不可以加空气清洗剂 人体内的六大营养物质是什么? 五类哇,阿里嘎到,是什么意思? 船做好后,下没下水呢?他还战胜了哪些困难?阅读 鲁滨逊漂流记 初中生日记;读后感;有重赏日记300字10篇;《钢铁是怎样炼成的》《名人传》《朝花夕拾》600字读后感 请高手这列数有什么规律?5,20,13,52,3,12,15,60 有什么物质溶于水显碱性,不溶于水不显碱性呢?如题.顺便问下怎么判断这种溶液显碱性? 用碘酒的方法检测() 中国的国土面积占世界总面积的多少? You should get up e______to catch the bus谁会了帮忙填一下, 为什么是work on it而不是work it on?也有cup them up啊!这些怎么区分? 超五类线什么意思 电熨斗高温挡那个55欧怎么算的 work on it 能不能写成work it on.如果不能,为什么? 高二哲学所讲的联系有哪些具体的内容(关系),如因果,矛盾等, 细胞之间的信息交流图二中①表示什么,②表示细胞膜上的什么,其化学本质是什么. 碳片与碳-12、碳-13一样都属于碳的同位素原子(这句话为什么错?)附:科学家利用精密的仪器把石墨折成只有一个或几个原子层厚的“碳片”,碳片为世界上最薄的材料. 哲学辨析“社会的发展受地理环境的决定”(在线等)简单移动就可以~150字左右 鲁滨逊用了几年时间造了一艘木船不要答非所问 还要是在荒岛上做的船 work on it had begun 为啥不用被动? 二战对文化的负面影响英文稿,急!RT英文稿,不用太高深,简单浅显些就好,300-400词左右,谢~~好的话会追加的,急!请注意是一段完整的表达,不用将二战背景什么的,只要讲对文化的负面影响就行 鲁滨逊造木船的经过 什么叫做离子 正n边形定义? 鲁滨逊在海岛上造独木船的过程请看好题目在答 行么. 什么叫做“等离子”商埸里有卖一种“等离子”电扇这是什么原理的电扇呢 请问“好学宝点读笔”的品牌含义是什么? 自上高二后,语文竟成拉分项 每次90多(150)原来语文一直是长项的啊,现在却.作文较弱 尤其材料作文平时有看书 有做题 听讲啊,看着平时睡觉不下功夫的人都轻松的拿高分 更心里不平衡了 书本知识一定要通过实践才能真正变成自己的学问.举出一个例子说说《冬夜读书示子聿》告诉我们:书本知识一定要通过实践才能真正变成自己的学问.你也有这样的体会吗?能举出一个例子 山东建设厅具体在哪个位置? Don't worry.You shall get the book you want this Friday ,____according to the record,(————接上)Mr..Clark is to come to return it.A afterB whileC whenD while脑抽了 D 是when 举一个例子说曾经从以上哪种传,获得了说嘛知识汽车排放污染物百分之90来着什么,因此许多国家制定了控制什么的标准 我国外流区面积占我国陆地总面积的多少?如题 吴王准备攻打楚国,大臣为什么要反对? He got his book this Sunday.(改为否定句)I _____ _____ his book this Sunday. 什么叫等离子?如题 you could help—— the desk a repairing b repair c repairs drepaired 与蛋白质有关的氨基酸在人体其他部位的细胞内是否存在,简要说明理由?重赏. 什么叫离子 …… There is a c___ on the desk .you can get onlionC是单词开头的字母! 神经细胞存在身体的哪个部位呢?最好有图片 甲烷和氧气能不能生成碳和水为什么 what's the matter?my desk is broken it's requires_________ A repair B repaired C to repairD repairing,Q1036592830,还有题 肝细胞蛋白质代谢图,那里错了?有图 work on I work on a farm .1.work 是谓语,on a farm 是状语;2work on是谓语,on farm是宾语.那个分析对? 鲁滨逊的船造好了,他一定会设法离开荒无人烟的孤岛.那么,他是怎么样离开孤岛的?他经历了怎样不可思议的航行?请你充分发挥自己的想象,把故事接着写下去.不少于400字. The bottle---------milk,so you can drink some 碳+氧气点燃能不能生成水 鲁宾逊在第几次什么时,船在途中遇到袭击,鲁宾逊来到荒岛 人的六大器官有哪些? 事越烦、越要耐烦. 杭州中小学秋游“扎堆”博物馆 学生抱浙江一超载货车轮胎脱落飞出 电动车主外交部:美澄清日媒有关美日涉钓鱼岛共中国已在南极洲命名359个中文地名美国务卿将于3日访埃及 穆尔西被罢黜印度一鞭炮厂1日发生火灾 至少6人死澳使馆为美搜集亚太情报 中国是监听目美国务卿将于3日访埃及 穆尔西被罢黜俄男子在法庭引爆手榴弹 导致2人死亡外交部:美方澄清钓鱼岛共同防卫计划的俄男子在法庭引爆手榴弹 导致2人死亡中国驻日使馆表彰见义勇为留学生印将建高达182米世界最大雕像 高约印度古吉拉特邦建世界最大雕像 暗贬尼俄专家称俄罗斯人无法仅凭工资购买一套外交部:望澳方重视对华关系 视中国发律师称斯诺登可在俄境内就德国遭美监听中方对目前阶段销毁叙化武相关决定执行嫦娥三号月球探测器完成总装 正进行飞卜拉希米称日内瓦会议有望于数周内召开外交部:中方将与上合组织各方一道进一民航局批准台州机场复航甘肃千年“宕羌傩舞”“复活”江西纪委通报7起案例 一干部收500福建一垃圾清运车疑爆胎失控侧翻 司机【1984年阅兵】朱军:那些乐谱 有全锦赛孙杨1500自轻松夺冠 男10抗战老兵于淑海的“医”缘即将开学 济南大学生校园晒被忙关东大地震被害中国劳工追悼会在日举行中巴空军在中国境内举行“雄鹰-Ⅳ”联海外遇险多烦忧 领保热线来解愁《二十四道拐》央视首播 续写荧屏抗战\"互联网+\"界内羽毛球排位赛在宁浙江横店推爱国活动:高喊勿忘国耻可享杭州城北煤气爆炸轰塌一堵墙 租户浑身我的诗篇:当代工人诗典2015全球杰出青年峰会:聚焦中日韩MIT化学家12年不冲澡 每天喷细菌阿根廷男子家暴令人发指:患病妻儿住铁甘肃书记:从抗战纪念汲取力量打好扶贫新疆二季度因自然灾害致6人死亡150
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘