HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 用iOS设备控制的HTML5“小蜜蜂”游戏

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

近日,英国伦敦一家专注于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';}
用户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'''});  });    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;【用iOS设备控制的HTML5“小蜜蜂”游戏】相关文章

1. 用iOS设备控制的HTML5“小蜜蜂”游戏

2. HTML5 企业安全访问控制的七种武器

3. HTML5 企业安全访问控制的七种武器

4. 微软HTML5版“割绳子”游戏:专为IE9设计

5. 14个最佳的HTML/CSS设计和开发框架

6. SlimerJS – Web开发人员可编写 JS 控制的浏览器

7. 1KB JavaScript代码编写的3D蜜蜂

8. 微软和福克斯小组建立HTML5“普罗米修斯”网站

9. 开发者对HTML5“黄金时代”或加速到来表示乐观

10. CSS设置DIV背景色渐变显示

本文来源:https://www.51html5.com/a3228.html

点击展开全部

﹝用iOS设备控制的HTML5“小蜜蜂”游戏﹞相关内容

「用iOS设备控制的HTML5“小蜜蜂”游戏」相关专题