暴强：用iOS设备控制的HTML5“小蜜蜂”游戏

摘要：红白机上的经典“小蜜蜂”游戏在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 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 stay
if(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 connection
io.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 action
var 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 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);