摘要：红白机上的经典“小蜜蜂”游戏在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 DeviceMotionEvent
if (window.DeviceMotionEvent != undefined) {
//ondevicemotion is fired when iOS device detects motionwindow.ondevicemotion = function(e) {
//ax is the movement on the x axis.
//This motion is used to move the ship in the gameax = event.accelerationIncludingGravity.x * 5;ay = event.accelerationIncludingGravity.y * 5;//Status 0 is start, 1 is left, 2 is right, 3 is stay
if(status == 0){ //initial conditionstatus = 3; //staysocket.emit('spaceChange', {'ax': 3});statusmsg = 'Waiting for movement';
}
if(ax > 14 && status != 2){ //move right on devicestatus = 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 steadystatus = 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 connection
io.sockets.on('connection', function (socket) {//Set room for user when connection is madesocket.on('setChannel', function (data) {socket.join(data.channelName);});//When iOS device moves send data to browser//Multiple browsers can be listening to same devicesocket.on('spaceChange', function (data) {socket.broadcast.to(data.channelName).emit("spaceChanges",data);});});

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

//iOS detection and corresponding action
var lastkey = 37;
var dataStart=0;socket.on('connect', function() {//if sockets gets disconnected then mention room againsocket.emit('setChannel', {'channelName': '<?php echo $randRoom; ?>'});});socket.on('spaceChanges', function (data) {if(dataStart == 0){//First movement data arriveddocument.getElementById('status').innerHTML = 'Receiving data from your iOS device';dataStart = 1;}ax = data.ax;var posob=new Object();if(ax == 2){//move rightlastkey = 39;posob.keyCode = lastkey;posob.type = 'keydown';document.getElementById('status').innerHTML = 'iOS device tilted right';}if(ax == 1){//move leftlastkey = 37;posob.keyCode = lastkey;posob.type = 'keydown';document.getElementById('status').innerHTML = 'iOS device tilted left';}if(ax == 3){//hold ship in placeposob.keyCode = lastkey;posob.type = 'keyup';document.getElementById('status').innerHTML = 'iOS device held steady';}//Send action received abovekeypressaction(posob);});   //Fire automatically once first data starts
window.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);