去年的圣诞节怎么过的已经忘了,不知道是不是和海底捞有关,反正是和“圣诞捞”(FlipScript在2012年圣诞节的活动网站)有关。

先简单地介绍一下“圣诞捞”的玩法:网站分为PC端(Flash开发)和手机端(HTML5开发)两个部分,用户先要通过PC端打开网站获取手机端URL(或者直接发送URL短信到手机),在手机端输入并打开此URL,就可开启与桌面端网站的互动。用户在看到PC端上的圣诞老人抛出礼物后及时地用一个“捞”的动作甩动手机就有机会捞到礼物。就算没捞到,细心你的也会发现在屏幕里的雪花会顺着你捞的方向飘动。而捞到的礼物则会用gif动画在手机端展示出来,并可以分享到社交网站。主要难点是通过对重力感应数据的采样来检测“捞”的动作和“捞”的方向。

经过一翻尝试之后,统计出“捞”这个动作的一些临界值,并得出相应的检测方法。代码如下所示:

// Author: David.Lee@FlipScript.com.cn
var FS = {}; //声明命名空间
FS.Christmas =(function(){
    //全局常量
    this._SwingThreshold = 780;     //甩动速度临界点
    this._SimpleInterval = 100;     //采样间隔时间

    //全局变量
    this._isIOS = $.os.ios;     //safari on iOS
    this._isAndroid  = $.os.android;    //browsers on Android
    this._lastTime = 0;     //上次采样时间点
    this._lastX = 0;        //上次采样X方向值
    this._lastY = 0;        //上次采样Y方向值
    this._lastZ = 0;        //上次采样Z方向值
    //构造函数
    return function(){
        //监听页面load事件
        window.addEventListener("load",this.windowLoadHandler,false);
    }
})();

FS.Christmas.prototype ={
    /* 此处省略n行代码 。。。 */
    devicemotionHandler : function(evt) {   //事件处理
        if(evt.accelerationIncludingGravity){   //获取重力加速度坐标
            var x = event.accelerationIncludingGravity.x,
                y = event.accelerationIncludingGravity.y,
                z = event.accelerationIncludingGravity.z;
            if(_isAndroid){ //处理Android平台
                x = -x;
                y = -y;
                z = -z;
            }
        }
        //判断是否达到采样间隔
        var curTime = (new Date()).getTime();
        if(curTime - _lastTime > _SimpleInterval){
            var timeGap = curTime - _lastTime;
            _lastTime = curTime;
            //判断是否达到甩动速度
            var speed = Math.abs(x + y + z - _lastX - _lastY - _lastZ) / timeGap * 10000;
            if(speed > _SwingThreshold && z < -9){
                var absGap = Math.abs(x) - Math.abs(_lastX);
                var direction = "R";
                if(x < -1){ //R2L,从右甩向左
                    direction = "R";
                }
                if(x > 1){  //L2R,从左甩向右
                    direction = "L";
                }
                //把direction等信息通知服务器,此处代码省略
                /*
                    。。。。。。
                */
            }
            //记录本次采样的坐标
            _lastX = x;
            _lastY = y;
            _lastZ = z;
        }
    },
    windowLoadHandler : function(evt) {
        //监听运动传感器事件
        window.addEventListener('devicemotion',fsChr.devicemotionHandler, false);
    }
    /* 。。。此处省略n行代码 */
};

//声明并初始化对象
var fsChr = new FS.Christmas();

感兴趣的朋友可以亲自尝试一下:http://fs1225.com 。鉴于短信接口可能已经关闭,建议还是用“屌丝法”吧~