HTML5摇一摇

方式一

(function(){
    /**
     * 摇一摇
     * @author rubekid 
     */
    
    function Shake(options){
        this.init(options);
    }
    
    Shake.prototype = {
        init:function(options){
            this.options = options || {};
            if(!window.DeviceMotionEvent || !window.addEventListener){
                alert("该浏览器不支持摇一摇，请换个浏览器试试！");
                this.uninit = true;
                return false;
            }
            
            var threshold = options.threshold || 2000;
            var afterShake = options.afterShake;
            if(typeof afterShake != "function"){
                afterShake = function(speed, acceleration){};
            }
            var _this = this;
            var x=null, y=null, z=null,_x=null,_y=null,_z=null;
            var t=_t=(new Date()).getTime();
            
            this.deviceMotionHandler = function(event){
                t = (new Date()).getTime();
                var diffTime = t - _t;
                if(diffTime < 100){//取时间大于0.1秒的变化
                    return false;
                }
                                
                var acceleration = event.accelerationIncludingGravity; 
                x = acceleration.x;   
                y = acceleration.y;     
                z = acceleration.z;
                if(_x!==null && _y!==null && _z!==null){
                    var speed = Math.ceil( Math.abs(( x - _x) + ( y - _y) + ( z - _z )) / diffTime * 100 * 100 );
                    if(speed > threshold){
                        afterShake(speed, acceleration);
                    }
                }
                
                //保存上一次记录
                _x = x;
                _y = y;
                _z = z;
                _t = t;
            }
        },
        start:function(){
            if(this.uninit){
                return false;
            }
            window.addEventListener("devicemotion", this.deviceMotionHandler, false);
            
        },
        stop:function(){
            if(this.uninit){
                return false;
            }
            window.removeEventListener("devicemotion", this.deviceMotionHandler, false);
        }
    };
    window.Shake = Shake;
    
})();

 

准确计数

    //摇动
    var minY = 10000, maxY = 0;
    var lastY = 0;
    var maxSpeed = 0;
    var counter = 0;
    var shakeFlag = 0;
    var shake = new Shake({
        afterShake:function(speed, acc){
            if(speed > maxSpeed){
                maxSpeed = speed;
            }
            if(lastY > acc.y){
                minY = acc.y;
                shakeFlag = 1;
            }
            else{
                if(shakeFlag){
                    shakeFlag = 0;
                    if(maxY - minY > 2 && maxSpeed > 2000){
                        submitFlag = true;
                        maxSpeed = 0; 
                        counter ++;
                        submitCount();

                        try{
                            shakeSound.pause();
                            shakeSound.currentTime = 0;
                            shakeSound.play();
                        }
                        catch(e){}
                    }
                }
                maxY = acc.y;
            }
            lastY = acc.y;
        }
    });

 

 

方式二

(function(){
    /**
     * 摇一摇
     * @author rubekid 
     */
    
    function Shake(options){
        this.init(options);
    }
    
    Shake.prototype = {
        init:function(options){
            this.options = options || {};
            if(!window.DeviceMotionEvent || !window.addEventListener){
                alert("该浏览器不支持摇一摇，请换个浏览器试试！");
                this.uninit = true;
                return false;
            }
            
            var afterShake = options.afterShake;
            if(typeof afterShake != "function"){
                afterShake = function(){};
            }
            
            var threshold = options.threshold || 0;
            var _this = this;
            var x=null, y=null, z=null,_x=null,_z=null,_y=null;
            var duration = 100;
            var t=_t=(new Date()).getTime();
            this.deviceMotionHandler = function(event){
                t = (new Date()).getTime();
                var diffTime = t - _t;
                if(diffTime < duration){//取时间大于0.1秒的变化
                    return false;
                }

                var acceleration = event.accelerationIncludingGravity; 
                x = acceleration.x;   
                y = acceleration.y;     
                z = acceleration.z;
                if(_x!==null && _y!==null && _z!==null){
                    var xv = Math.abs( x - _x ) / diffTime * duration * duration, 
                    yv = Math.abs( y - _y ) / diffTime * duration * duration, 
                    zv = Math.abs( z - _z ) / diffTime * duration * duration;
                    if(xv > threshold && yv > threshold || yv > threshold && zv >threshold || xv > threshold && zv >threshold){
                        afterShake();
                    }
                }
                
                //保存上一次记录
                _x = x;
                _y = y;
                _z = z;
                _t = t;
            }
        },
        start:function(){
            if(this.uninit){
                return false;
            }
            window.addEventListener("devicemotion", this.deviceMotionHandler, false);
            
        },
        stop:function(){
            if(this.uninit){
                return false;
            }
            window.removeEventListener("devicemotion", this.deviceMotionHandler, false);
        }
    };
    window.Shake = Shake;
    
})();