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

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

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

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘