小蜜蜂游戏

<p>小蜜蜂</p>
<script type="mce-text/javascript" src="http://www.cnblogs.com/miaov.js"></script>
<script type="mce-text/javascript" src="http://www.cnblogs.com/bee.js"></script>
<!-- Date: 2015-04-10 -->
<style><!--
*{ margin:0; padding:0;}
li{ list-style:none;}
#div1{ width:800px; height:600px; overflow:hidden; background:black; margin:0px auto; position:relative;}
#gameBtn{ color:white; font-size:20px; cursor:pointer; border:1px #FFFFFF solid; width:100px; height:30px; line-height:30px; text-align:center; position:absolute; top:285px; left:350px;}

#score{ color:#FFFFFF; font-size:20px;}
#bee{ position:relative;}
.enemy1{ width:40px; height:28px; background:url(images/mf1.png) no-repeat; float:left;}
.enemy2{ width:40px; height:28px; background:url(images/mf2.png) no-repeat; float:left;}
.enemy3{ width:40px; height:28px; background:url(images/mf3.png) no-repeat; float:left;}

.air1{ width:46px; height:60px; background:url(images/fj.png) no-repeat; position:absolute;}
.bullet{ width:1px; overflow:hidden; height:10px; background:white; position:absolute;}
--></style>
<div id="div1">
<div id="gameBtn">开始游戏</div>
</div>

/**用命名空间的写法来写 也叫单体**/
/**  功能：
 元素的生成( createElement )
敌人的移动( setInterval )
碰撞检测( 方法 ) 小蜜蜂和子弹
敌人跟随( 运动算法 )  小蜜蜂掉下的时候 会根据飞机往左还是往右 来走
关卡( 实现多关 )
其他的功能 ( 积分 ，血量 )
**/

window.onload=function(){
    
    var oBtn = getById(‘gameBtn‘);
    
     
    
    oBtn.onclick = function(){
        this.style.display = ‘none‘;
        Game.init(‘div1‘);
    }     
}

var Game={
    
    // 创建数据 start
    
    oEnemy:{//敌人数据的创建 小蜜蜂的数据
        e1:{ style:‘enemy1‘, blood:1, speed:5 , score:1   },//打中了绿色的加一个积分
        e2:{ style:‘enemy2‘, blood:2, speed:7 , score:2   }, //打中了紫色的加两个积分
        e3:{ style:‘enemy3‘, blood:3, speed:10 , score:3   } //打中了红色的加三个积分
    },
    
    guanka:[ //关卡数据创建  设置 每行几个 colNum 小蜜蜂掉下来X轴 和Y轴的速度, 每隔 times时间掉下来一个
    //第一关数据 ul的数据
        {
            eMap:[  //6 行 每行 10 个
                    ‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,
                    ‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,
                    ‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,‘e2‘,
                    ‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,
                    ‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,
                    ‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘
                 ],
                  
            colNum:10 , //每行几个
            iSpeedX:10, //小蜜蜂掉下时X轴速度
            iSpeedY:10, //小蜜蜂掉下时Y轴速度
            times: 2000    //每隔2s钟掉下一个小蜜蜂
        },
    //第二关数据   ul的数据
      { 
            eMap:[  
                    ‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,
                    ‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,
                    ‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,‘e3‘,
                    ‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,
                    ‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,
                    ‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘,‘e1‘
                 ],
                  
            colNum:10 , 
            iSpeedX:10,  //ul的X轴速度
            iSpeedY:10,  //ul的y轴速度
            times: 2000     
        }
    
    ],
    
    airPlain:{
        style:‘air1‘,
        bulletStyle:‘bullet‘
    },
    
    // 创建数据 end
    
    
    
    init:function(id){  //初始化
        this.oParent = document.getElementById(id);
        
        this.iGrade = 0;
        
        this.createScore();
        
        this.createEnemy( this.iGrade  );
        
        this.createAirplain();
        
    },
    
    createScore:function(){ //创建score
        var oS = document.createElement(‘div‘);
        oS.id = ‘score‘;
        oS.innerHTML = ‘积分:<span>0</span>‘;
        this.oParent.appendChild(oS);
        
        this.oSNum = oS.getElementsByTagName(‘span‘)[0];
    },
    
    createEnemy:function(iNow){
        
        if( this.oUl ){//进入第二关 或者后面的关的时候 如果有ul 先清掉ul 并清掉ul的定时器
            clearInterval( this.oUl.timer );
            this.oParent.removeChild( this.oUl );
            
        }
        
        document.title = ‘第‘+ (iNow+1) +‘关‘;
        
        var gk = this.guanka[iNow]; 
         
        var oUl = document.createElement(‘ul‘);
        
        
        var arr=[];
        
        
        
        oUl.id=‘bee‘;
        this.oParent.appendChild(oUl);
        oUl.style.width = this.guanka[iNow].colNum * 40 +‘px‘;
        oUl.style.left = (this.oParent.offsetWidth - oUl.offsetWidth)/2 +‘px‘;
        
        this.oUl = oUl;
        
        
        for( var i=0; i < gk.eMap.length ; i++ ){
             var oLi = document.createElement(‘li‘);
              oLi.className = this.oEnemy[gk.eMap[i]].style;
              
              //每个小蜜蜂身上都有很多数据 血 速度 积分
              oLi.blood = this.oEnemy[gk.eMap[i]].blood;
              oLi.speed = this.oEnemy[gk.eMap[i]].speed;
              oLi.score = this.oEnemy[gk.eMap[i]].score;
              
              oUl.appendChild(oLi); 
    
        }
        this.aLi = oUl.getElementsByTagName(‘li‘);
        
        //li 定位转换为absolute
        
        for( var i = 0; i < this.aLi.length ; i++ ){
            arr.push( [this.aLi[i].offsetLeft , this.aLi[i].offsetTop] )
        }
        
        for(  var i = 0; i < this.aLi.length ; i++ ){
            
            this.aLi[i].style.position = ‘absolute‘;
            this.aLi[i].style.left = arr[i][0] +‘px‘;
            this.aLi[i].style.top = arr[i][1] +‘px‘;
        }
        
        //ul 移动
        this.runEnemy(gk); //把当前关卡传进来
        
    },
    
    //敌人移动
    runEnemy:function(gk){
        
        var This = this;
        
        var L = 0;
        var R = this.oParent.offsetWidth - this.oUl.offsetWidth;
        
        this.oUl.timer = setInterval( function(){
             //临界点 
            if( This.oUl.offsetLeft > R ){
                
                gk.iSpeedX *=-1;
                This.oUl.style.top = This.oUl.offsetTop + gk.iSpeedY +‘px‘;
                
            }else if( This.oUl.offsetLeft < L ){
                
                gk.iSpeedX *=-1;
                This.oUl.style.top = This.oUl.offsetTop + gk.iSpeedY +‘px‘;
            }
            
            This.oUl.style.left = This.oUl.offsetLeft + gk.iSpeedX +‘px‘;

        },200)
        
        setInterval(function(){
            This.oneMove()//单兵作战 当整体蜜蜂移动的时候开始
        },gk.times)  //每隔多长时间掉下一个蜜蜂
        
    },
    
    oneMove:function(){
        var This = this;
        var nowLi = this.aLi[ Math.floor(Math.random()*this.aLi.length) ]
        
        //开一个定时器让它 小蜜蜂 来攻击我改变left 和top值
        //并跟随飞机  利用的是 勾股定理 计算蜜蜂的x轴和y轴的速度
        nowLi.timer=setInterval(function(){
            var a = (This.oAir.offsetLeft + This.oAir.offsetWidth/2) - (nowLi.offsetLeft + nowLi.offsetWidth/2 + nowLi.parentNode.offsetLeft );
        
            var b = (This.oAir.offsetTop + This.oAir.offsetHeight/2) - (nowLi.offsetTop + nowLi.offsetHeight/2 + nowLi.parentNode.offsetTop );
        
            var c = Math.sqrt( a*a +b*b );
            
            var iSX = nowLi.speed * a/c ; //速度会根据飞机来决定是正还是负  小蜜蜂往右 速度大于0 小蜜蜂往左 速度小于0
            
            var iSY = nowLi.speed * b/c;
            
            nowLi.style.left = nowLi.offsetLeft + iSX +‘px‘;
            nowLi.style.top = nowLi.offsetTop + iSY +‘px‘;
            
            if( This.pz( This.oAir , nowLi ) ){
                
                alert(‘游戏结束‘);
                window.location.reload()  //页面重新从加载
            }

        },30)

    },
    
    
    createAirplain:function(){//创建飞机
        var oAir = document.createElement(‘div‘);
        this.oAir = oAir;
        oAir.className = this.airPlain.style;
        this.oParent.appendChild( oAir );
        oAir.style.left = (this.oParent.offsetWidth - oAir.offsetWidth)/2 +‘px‘;
        oAir.style.top =  this.oParent.offsetHeight - oAir.offsetHeight +‘px‘;
        
        this.bindAir();
    },
    
    
    bindAir:function(){  //左右键控制飞机移动
        
        var iNum = 0;
        
        var timer = null;
        
        var This = this;
        
        document.onkeydown = function(ev){
            
            var ev = ev || event;
            
            if(!timer){ //如果timer为空的时候 不存在的时候 开定时器 为了保证只有一个定时器  开定时器是为了解决键盘时间 卡的情况
                
                timer = setInterval( show , 30 );
                
            }

            if( ev.keyCode == 37 ){    
                
                iNum = 1
                    
            }else if( ev.keyCode == 39 ){
                
                iNum = 2    
            }
        };
        
        
        document.onkeyup = function(ev){
            var ev = ev || event;
            
            clearInterval(timer);
            timer=null;
            iNum = 0;
            
            if( ev.keyCode == 32 ){  //当空格键 抬起的时候 创建子弹
                
                This.createBullet()
                
            }    
        };
        
        function show(){
                
                if( iNum == 1 ){
                    This.oAir.style.left = This.oAir.offsetLeft - 10 +‘px‘
                }else if( iNum == 2 ){
                    This.oAir.style.left = This.oAir.offsetLeft + 10 +‘px‘
                }    
        }
    },
    
    createBullet:function(){
        
        var oBullet = document.createElement(‘div‘);
        oBullet.className = ‘bullet‘;
        this.oParent.appendChild( oBullet );
        oBullet.style.left = this.oAir.offsetLeft + this.oAir.offsetWidth/2 +‘px‘;
        oBullet.style.top = this.oAir.offsetTop - 10 +‘px‘;
        
        this.runBullet(oBullet); //把创建的子弹传进来 运动的就是这个子弹
    },
    
    runBullet:function(oB){
        
        var This = this;
        
        //每一个子弹都有一个定时器 当子弹飞出屏幕的时候应该关掉定时器 并删掉子弹 避免占内存
        oB.timer = setInterval(function(){
            
            if( oB.offsetTop < -10 ){  //子弹飞出屏幕
                
                clearInterval( oB.timer );
                
                This.oParent.removeChild( oB );
                
            }else{
                oB.style.top = oB.offsetTop - 10 +‘px‘;
            }
            
            for( var i = 0 ; i < This.aLi.length ;i++ ){
                    if( This.pz( oB , This.aLi[i] ) ){
                        
                        if( This.aLi[i].blood ==1 ){//如果只剩一滴血的话 消除  紫色的需要打两下 绿色的打一下消除
                            clearInterval( This.aLi[i].timer ); //删掉小蜜蜂之前 先关掉小蜜蜂的定时器(改left值top值的定时器)
                            This.oSNum.innerHTML = parseInt(This.oSNum.innerHTML) + This.aLi[i].score;
                            This.oUl.removeChild( This.aLi[i] );//这一句要在下面 不然会报错
                            
                            //打中了加积分  积分 和血是在创建 小蜜蜂敌人数据的时候 加上的
                            
                        }else{
                            This.aLi[i].blood--
                        }

                        clearInterval( oB.timer );
                        This.oParent.removeChild(oB) 
                        
                    }
                }
            //子弹打蜜蜂的过程中  如果蜜蜂全都打完了就进入第二关
                
            if( !This.aLi.length ){
                This.iGrade++;
                
                if( This.iGrade < This.guanka.length ){
                    This.createEnemy(This.iGrade);
                }else{
                    
                    This.iGrade = This.guanka.length;
                    alert(‘通关‘)
                }
            }
        },30)
    },
    
    pz : function(obj1,obj2){  //碰撞检测
        
        var L1 = obj1.offsetLeft;
        var R1 = obj1.offsetLeft + obj1.offsetWidth;
        var T1 = obj1.offsetTop;
        var B1 = obj1.offsetTop + obj1.offsetHeight;
        
        var L2 = obj2.offsetLeft + obj2.parentNode.offsetLeft;
        var R2 = obj2.offsetLeft + obj2.offsetWidth + obj2.parentNode.offsetLeft;
        var T2 = obj2.offsetTop + obj2.parentNode.offsetTop;
        var B2 = obj2.offsetTop + obj2.offsetHeight + obj2.parentNode.offsetTop;
        
        if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
            return false;
        }
        else{
            return true;
        }
        
    }
    
};

/*getStyle()*/
 
function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

/*getById()**/
function getById(id){
    return document.getElementById(id)
}

/*$**/
function $(v){
    if(typeof v===‘function‘){
                     return window.onload=v
    }else if(typeof v===‘string‘){
                     return document.getElementById(v)
    }else if(typeof v===‘object‘){
                     return v
    }
}



/*leo运动框架doMove()*速度是匀速的，自己设置的*/
function doMove(obj,attr,dir,target,endFn){
    
    //var presentPos=parseInt(getStyle(obj,attr)); //obj的当前位置 left 或者 top 值
    dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;  //判断 dir是正还是负，根据 当前值 是否小于 目标值
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var speed=parseInt(getStyle(obj,attr))+dir; //步长
        if( speed < target && dir <0  || speed > target && dir>0 ){ //判断方向
            speed = target  //speed赋值给obj.style[attr] 前先对speed进行判断,超过了目标点 就 回到目标点
        }
        obj.style[attr]=speed+‘px‘; //赋值
        if(speed==target){
            clearInterval(obj.timer);
            endFn && endFn()
        }
    },30)
}


/**运动框架startMove(),速度是计算出来 缓冲，跟距离成正比**/
function startMove(obj,attr,target,endFn){
    clearInterval(obj.timer)
    obj.timer=setInterval(function(){
            var speed=(target-parseInt(getStyle(obj,attr)))/10;
            speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
            var speedL=parseInt(getStyle(obj,attr))+speed;
             
            obj.style[attr]=parseInt(getStyle(obj,attr))+speed+‘px‘;
            //document.title=getStyle(obj,attr)+"-"+speed;

            if(speedL==target){
                clearInterval(obj.timer);
                endFn && endFn()
            }
            
    },30)    
}

 

//运动结合透明度
function Move(obj,attr,dir,target,endFn){
                var iCur=0;
                clearInterval( obj.timer ); 
                if( attr == ‘opacity‘ ){
                    dir = target - parseInt(getStyle( obj,attr )*100) > 0 ? dir : -dir;    
                }else{
                    dir = target - parseInt(getStyle( obj,attr )) > 0 ? dir : -dir;    
                }
 
                obj.timer =setInterval(function(){    
                     if( attr == ‘opacity‘ ){
                         iCur = parseInt(getStyle( obj,attr )*100);
                     }else{
                         iCur = parseInt(getStyle( obj,attr ));
                     }
 
                    var speed = iCur + dir;
                    if( speed > target && dir >0 || speed <target && dir <0 ){
                        speed = target;
                    }
                      
                      if( attr ==‘opacity‘ ){
                          obj.style[attr] = speed/100;
                          obj.style.filter=‘alpha(opacity=‘+speed+‘)‘
                      }else{
                          obj.style[attr] = speed +‘px‘;
                      }
                         
                    if( speed == target ){
                        clearInterval( obj.timer );
                        endFn && endFn.call(obj)
                    }
                    
                },30)
            }
            
            
/**MovePerfect 完美版运动框架**/
function Moves(obj,json,fn){
        clearInterval(obj.tms);
        obj.tms=setInterval(function(){
                var bStop=true;
                for(var attr in json){
                        var iCur=attr===‘opacity‘?parseInt(parseFloat(getStyle(obj,attr))*100):parseInt(getStyle(obj,attr));
                        var iSpeed=(json[attr]-iCur)/6;
                        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                        if(iCur!==json[attr]){
                                bStop=false;        
                        }
                        if(attr===‘opacity‘){
                                obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
                                obj.style.opacity=(iCur+iSpeed)/100;
                        }else{
                                obj.style[attr]=(iCur+iSpeed)+‘px‘;        
                        }
                }
                if(bStop){
                        clearInterval(obj.tms);
                         fn && fn.call(obj)  // 这里用call把对象从window 指向了当前运动的对象,那么在函数调用的时候可以直接用this了  Moves(obj,json,function(){this})
                }
        },10);
}

/**完美 缓冲运动 带opacity 速度版**/
function hcMove(obj,json,fn){
                clearInterval( obj.timer );
                 
                obj.timer=setInterval(function(){
                    var iBtn=true;  
                    
                    for(var attr in json){
                        var target=json[attr];
                        
                        if( attr == ‘opacity‘ ){
                            var iSpeed = (target-Math.round(getStyle(obj,attr))*100)/6;
                        }else{
                            var iSpeed = (target-parseInt(getStyle(obj,attr)))/6;
                        }
                        
                         
                         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed)  : Math.floor(iSpeed);//速度取整,因为js中的小数是经过计算的,默认四舍五入,但是不够0.5的就不会动了
                         
                         if( parseInt(getStyle(obj,attr)) != target ){
                              iBtn=false;//如果有运动没到达目标点,iBtn为false
                              
                              if( attr == ‘opacity‘ ){
                                  var sNow=Math.round(getStyle(obj,attr)*100) + iSpeed;
                                  
                                  //先做处理 再赋值
                                  if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){
                                      sNow = target
                                  }
                                  
                                  obj.style[attr] = sNow/100;
                                  obj.style.filter = ‘alpha(opacity=‘+sNow+‘)‘;
                              }else{
                                  
                                  var sNow = parseInt(getStyle(obj,attr)) + iSpeed;
                                  
                                  //先做处理 再赋值
                                  if( sNow > target && iSpeed >0 || sNow < target && iSpeed <0 ){
                                      sNow = target
                                  }
                                  obj.style[attr] = sNow +‘px‘;
                              }
 
                         }

                        }
                        
                        if(iBtn){ //如果运动全部完成,iBtn为true
                            clearInterval(obj.timer);
                            fn && fn()
                        }
 
                },30)
            }

/**时间版运动框架  结合Tweens()函数  可实现各种运动  匀速,加速,减速等 **/
function starMove3(obj,json,times,fx,fn){
                 var iCur={}; //获取初始值 b
                 iCur[attr] = 0; //初始化 所有值为0
                 
                 for(var attr in json) //区分透明度和其他属性的初始值的区别
                 {
                     if(attr == ‘opacity‘){
                          iCur[attr] = Math.round(getStyle( obj,attr )*100) 
                         
                     }else{
                         iCur[attr] = parseInt(getStyle(obj,attr))
                     }
                 }
                 
                 clearInterval( obj.timer );
                 
                 var oldTime=nowTime();
                 
                 obj.timer=setInterval(function(){
                         var newTime=nowTime();
                         
                         // oldTime < newTime;
                         // oldTime - newTime //负数 到负无穷
                         
                         var t1=oldTime - newTime + 2000;  //从2000开始减小 一直到负无穷
                         
                         Math.max( 0, t1) //t1先 大于 0  后小于0
                         var t=2000-Math.max( 0, t1); //0 2000 //当前时间  ,所有属性的当前时间都一样
                         
                         for(var attr in json)
                         {    
                              var value=Tween[fx](t,iCur[attr],json[attr]-iCur[attr],times); //当前位置,变化值
                              if( attr == ‘opacity‘ ){
                                  obj.style[attr] = value/100;
                                  obj.style.filter = ‘alpha(opacity=‘+value+‘)‘
                              }else{
                                  obj.style[attr] = value +‘px‘;
                              }
                         }
                         
                         if( t==times ){
                             clearInterval( obj.timer );
                             fn && fn.call(obj)
                         }
                         
                 },13)
            }
            
function nowTime(){ return (new Date).getTime() }
/**时间版运动框架  结合Tweens()函数  可实现各种运动  匀速,加速,减速等 **/
function startMove4(obj,json,times,fx,fn){
        
        var iCur = {};
        var startTime = nowTime();
        
        if( typeof times == ‘undefined‘ ){
            times = 400;
            fx = ‘linear‘;
        }
        
        if( typeof times == ‘string‘ ){
            if(typeof fx == ‘function‘){
                fn = fx;
            }
            fx = times;
            times = 400;
        }
        else if(typeof times == ‘function‘){
            fn = times;
            times = 400;
            fx = ‘linear‘;
        }
        else if(typeof times == ‘number‘){
            if(typeof fx == ‘function‘){
                fn = fx;
                fx = ‘linear‘;
            }
            else if(typeof fx == ‘undefined‘){
                fx = ‘linear‘;
            }
        }
        
        for(var attr in json){
            iCur[attr] = 0;
            if( attr == ‘opacity‘ ){
                iCur[attr] = Math.round(getStyle(obj,attr)*100);
            }
            else{
                iCur[attr] = parseInt(getStyle(obj,attr));
            }
        }
        
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            
            var changeTime = nowTime();
            
            //startTime changeTime
            
            var scale = 1-Math.max(0,startTime + times - changeTime)/times; //2000 - 0 -> 1-0 -> 0-1
            
            for(var attr in json){
                
                var value = Tween[fx](scale*times,iCur[attr],json[attr] - iCur[attr],times);
                
                if(attr == ‘opacity‘){
                    obj.style.filter = ‘alpha(opacity=‘+ value +‘)‘;
                    obj.style.opacity = value/100;
                }
                else{
                    obj.style[attr] = value + ‘px‘;
                }
                
            }
            
            if(scale == 1){
                clearInterval(obj.timer);
                if(fn){
                    fn.call(obj);
                }
            }
            
            
        },30);
     
    }

/**抖动 shake 封装**/
 function shake(obj,attr,endFn){  //如果愿意 也可以将抖动的初始频率传进来 20 
     if(obj.onOff){return;}
     obj.onOff=true;
     
     var num=0;
     var pos=parseInt(getStyle(obj,attr));
     
     var arr=[];//20,-20,18,-18...0;//抖动的频率
    
    for(var i=20;i>0;i-=2){
        arr.push(i,-i);
    }
    arr.push(0);
    
    clearInterval(obj.shake);//这里用shake是为了防止与库里其他的timer冲突
    obj.shake=setInterval(function(){
        obj.style[attr]=pos+arr[num]+‘px‘;
        num++;
        if(num===arr.length){
            clearInterval(obj.shake);
            endFn && endFn();
            num=0;
            obj.onOff=false 
            //如果不加这一行，点击 只抖动一次， 以后点击都无效
        }
    },50)
}

/**数字转化为字符串，不足9补零**/
function toDouble(n){
    if(n<10){
        return ‘0‘+n
    }else{
        return ‘‘+n
    }
}

/**通过class来获取元素**/
function getByClassName(oParent,tagName,className){
        var arr=[];
        var als=oParent.getElementsByTagName(tagName);
        for(var i=0;i<als.length;i++){
            var a1=als[i].className.split(‘ ‘);
            for(var j=0;j<a1.length;j++){
                if(a1[j]==className){
                    arr.push(als[i]);
                    break;
                } 
            }    
        }
        return arr
}    
/**正则 选取class**/
function getByClass(oParent,className){
     var aS=oParent.getElementsByTagName(‘*‘);
     var arr=[];
     for(var i=0;i<aS.length;i++){
           var s=aS[i].className;
          // /\b+className+\b/
           var re=new RegExp(‘\\b‘+className+‘\\b‘ ); //  \b代表独立部分,用\\ 是为了浏览器能输出  变量的 只能用正则的全称
           if(re.test(s))  arr.push( aS[i] );
            break
     }
 return arr
}

//去掉空格
function trim(str){
          var re=/^\s+|\s+|\s+$/g;
          return  str.replace(re,‘‘)
}


/**添加class,并 排除添加重复的class,结合下面的indexofArr使用**/
function addClass(obj,className){
        var arrClass=obj.className.split(‘ ‘);
        //如果要添加的class不存在
        var _index=indexofArr(arrClass,className);//查看所添加的className在 原有的class中是否存在
        
        if(obj.className==‘‘){
                obj.className=className;
        }else if(_index==-1){ //当所添加的class不存在时,执行下一句
                obj.className+=‘ ‘+className;
        }        
}

/**删除class**/
function removeClass(obj,className){
        var arrClass=obj.className.split(‘ ‘);
        
        var _index=indexofArr(arrClass,className);//查看所添加的className在 原有的class中是否存在
        if(_index==1){
                arrClass.splice(_index,1);//这一步是对数组进行操作,删除数组中的class,返回的是被删掉的那一个元素
                obj.className=arrClass.join(‘ ‘);//className需要重新join数组中的元素,class是字符串
                
        }
}

        
/**检查 某个元素v 在数组中是否存在,存在返回1  不存在返回-1**/
function indexofArr(arr,v){
         for(var i=0;i<arr.length;i++){
                 if(arr[i]==v){
                         return i  //存在
                 }
         }
         
         return -1  //不存在
}

function onFade(obj,time,endFn){        //渐隐
    var maxNum = 100;
    var num = 0;
    var timer = null;
    clearInterval(timer);
    timer = setInterval(function(){
        num+=10;
        if(obj.currentStyle){
            obj.style.filter = ‘alpha(opacity=‘ + maxNum-num + ‘)‘;
        }else{
            obj.style.opacity = (maxNum-num)/100;
        }
        if(num>100) {
            clearInterval(timer);
            endFn && endFn();
        }
    },time);
}

/**获取某个元素到页面的距离,不管父级有没有定位,不管是什么元素,到左侧同理
 *使用方法：getPos(obj).left  或者  getPos(obj).top **/
function getPos(obj){
    var pos={‘left‘:0,‘top‘:0};
    while(obj){
        pos.left+=obj.offsetLeft;
        pos.top+=obj.offsetTop;
        obj=obj.offsetParent;
    }
    return pos
}

/**获取鼠标距离页面顶部 和 页面左侧的距离  但凡用到client的就要用到scroll。
 *跟随鼠标移动案例： 鼠标到哪 div跟到哪

 *用法 var oEvent=ev || event;
 *   obj.style.left=getPos1(oEvent).x+‘px‘ **/
function getPos1(ev){
    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
    return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}
    
}

/**绑定函数**/
function bind(obj,evName,fn){
    if(obj.attachEvent){
        obj.attachEvent(‘on‘+evName,function(){
            fn.call(obj)
        });
    }else{
        obj.addEventListener(evName,fn,false)
    }
    
}

//判断一个cookie存不存在 if(getCookie(key))
function getCookie(key){
    var arr1=document.cookie.split(‘; ‘);
    for(var i=0;i<arr1.length;i++){
        var arr2=arr1[i].split(‘=‘);
        if(arr2[0]==key){
            //encodeURI(arr2[1]);
            return  decodeURI(encodeURI(arr2[1]));
        }
    }
}

//设置cookie,注意key 和value 都是字符串,t是数字 过几天后过期
function setCookie(key,value,t){
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+t);
    document.cookie=‘‘+key+‘=‘+value+‘;expires=‘+oDate.toGMTString();
}

//删除cookie
function removeCookie(key){
     setCookie(key,‘‘,-1)
}


/**面向对象Tab**/
/*
用法：
1.在页面创建html,id自定义
<div id="tab1" class=‘tab‘>
                <input type="button" value="时事" class=‘select‘/>
                <input type="button" value="政治" />
                <input type="button" value="新闻" />
                <div class="active">时事时事时事</div>
                <div>政治政治政治</div>
                <div>新闻新闻新闻</div>
        </div>
2.在window.onload中调用：
var tab1=new Tab(‘tab1‘);
tab1.init();
tab1.autoplay()
扩展：还可以自己添加自定义方法,例如自动播放,可以自主决定要不要调用这个方法,比普通函数的优点是扩展性强
*/
function Tab(id){//this指向对象 tab1
                    this.oTab=document.getElementById(id)
                    this.aInput=this.oTab.getElementsByTagName(‘input‘);
                    this.aDiv=this.oTab.getElementsByTagName(‘div‘);
        }
        
        Tab.prototype.init=function(){//this指向对象 tab1 
                    var This=this;//把对象存进This中
                    for(var i=0;i<this.aInput.length;i++){
                        this.aInput[i].index=i;
                        this.aInput[i].onclick=function(){
                            This.change(this);  //这里括号中的this指的是按钮
                             
                        }
                    }
        }
        
        Tab.prototype.change=function(obj){//this指的是按钮,就不对了,应该指的是对象,可以根据change()的调用来修正指向,然后利用把对象this存进This,obj指的是当前按钮
                    for(var i=0;i<this.aInput.length;i++){
                            this.aInput[i].className=‘‘;
                             this.aDiv[i].style.display=‘none‘;
                    }
                    obj.className=‘select‘;
                    this.aDiv[obj.index].style.display=‘block‘;
        }
        
        Tab.prototype.autoplay=function(){//this指的是按钮,就不对了,应该指的是对象,可以根据change()的调用来修正指向,然后利用把对象this存进This,obj指的是当前按钮
                    var This=this;
                    setInterval(function(){
                            for(var i=0;i<This.aInput.length;i++){
                                    This.aInput[i].className=‘‘;
                                     This.aDiv[i].style.display=‘none‘;
                            }
                             if(This.iNow==This.aInput.length-1){
                                      This.iNow=0
                             }else{
                                      This.iNow++
                             }
                            This.aInput[This.iNow].className=‘select‘;
                            This.aDiv[This.iNow].style.display=‘block‘;    
                             
                    },1000)        
        }
/**面向对象tab结束**/


/**绑定事件和主动触发 **/
function bindEv(obj,evName,fn){
                 
    //obj,楼层
    //evName:楼层下的书架
    //fn:一本书
    
    obj.Listeners = obj.Listeners || {}; //楼层的建立,第一次没有楼层,走{}
    obj.Listeners[evName] = obj.Listeners[evName] || [];//书架的建立,第一次没有书架,走 []
    obj.Listeners[evName].push( fn ); // 书
    
    
    if(obj.addEventListener){
        obj.addEventListener(evName,fn,false)
    }else{
        obj.attachEvent(‘on‘+evName,function(){
            fn.call(this)
        })
    }
}

//主动触发自定义事件
//bindEv 和 fireEvent 需要找到一种关系,通过obj和evName能够找到fn
function fireEvent(obj,evName){
    for(var i=0;i<obj.Listeners[evName].length;i++){
        obj.Listeners[evName][i]()  //书架下的每本书,就是该事件下的所有函数
    }
}


 
/**多物体弹性运动框架
 * bb(oDiv1,{‘left‘:500,‘top‘:200})
 * **/
/**
 * 
if(!obj.oSpeed)obj.oSpeed={};
如果obj对象上没有oSpeed这个自定义属性，就定义一个。值是一个空对象，可以理解为是一个空json。


if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;

上面已经定义自定义oSpeed属性了，所以这里是判断这个自定义属性里有没有attr这个属性，没有的话就定义一个，并设置初始值为0。
**/
  function bb(obj,json){
         
       clearInterval(obj.timer);
       
       obj.timer=setInterval(function(){
           
           var iBtn = true;
           
           for( var attr in json ){
               /**代码块**/  
                if( !obj.iSpeed ) obj.iSpeed={};
                if( !obj.iSpeed[attr] ) obj.iSpeed[attr]=0;
                
                var  iTarget = json[attr];
                var  iCur = parseInt( getStyle( obj,attr ) );

                    obj.iSpeed[attr] += (iTarget - iCur)/6;
                    obj.iSpeed[attr] *= 0.75;
                    
                    if( Math.abs(obj.iSpeed[attr]) <=1 && Math.abs( iTarget - iCur )<=1 ){
                         obj.iSpeed[attr]=0;
                     obj.style[attr] = iTarget +‘px‘
                    }else{
                        iBtn = false;
                        var sNow= iCur + obj.iSpeed[attr];
                        if( attr ==‘width‘ || attr ==‘height‘ ){
                            if( sNow < 0 ) sNow =0;
                        }
                        obj.style[attr] = sNow +‘px‘;
                    } 
                   document.title = iCur +‘-‘+obj.iSpeed[attr];
/**代码块**/    
           }
           
           if( iBtn ){
               clearInterval( obj.timer );
               
           }
           
           
       },30)
 }

/**找出数组中最小值**/
function minimum(arr){
       var v=arr[0];
       var im_pos=0;
     
      for(var i=1;i<arr.length;i++){
              if( arr[i] < v ){
                  v = arr[i];
                  im_pos=i
            }
      }
     
    return v //找出最小值 也可以找出最小值所在的位置 return im_pos
  }


/**找出字符串中的所有数字**/
function findNum(str){
    return str.match(/\d+/g);
}

 function getTop (obj)
    {
            var iTop=0;
            var scrollTop=document.documentElement.scrollTop || document.documentElement.scrollTop;
            var clientHeight=document.documentElement.clientHeight;
            iTop= scrollTop + (clientHeight - obj.offsetHeight)/2;
            return iTop
    }

function extend (obj1,obj2)
    {
        for(var attr in obj2){
            obj1[attr]=obj2[attr]
        }
    }
/**取消冒泡**/
function stopPro (e) {
        if (e && e.stopPropagation) {
          //W3C取消冒泡事件
          e.stopPropagation();
        } else {
          //IE取消冒泡事件
          window.event.cancelBubble = true;
        }
      }

//css3 过渡完成事件
function addEnd(obj,fn){
                 obj.addEventListener(‘webkitTransitionEnd‘,fn,false);//webkit内核
                 obj.addEventListener(‘transitionend‘,fn,false);//firefox 
            }
            
function removeEnd(obj,fn){
    obj.removeEventListener(‘webkitTransitionEnd‘,fn,false);//webkit内核
    obj.removeEventListener(‘transitionend‘,fn,false);//firefox 
}

//css3 animation end
function addEndAnimation(obj,fn){
        obj.addEventListener(‘webkitAnimationEnd‘,fn, false); 
        obj.addEventListener(‘animationEnd‘,fn, false);
}
//随机背景色
function randomColor(){
        var str= Math.ceil(Math.random()*16777215).toString(16);
        while(str.length<6){
            str=‘0‘+str;//不足6位补0
        }
        return str
    }
//获取几天之后的日期

function GetDateStr(AddDayCount) 
            { 
                var dd = new Date(); 
                dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 
                var y = dd.getYear(); 
                var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0
                var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate(); //获取当前几号，不足10补0
                return m+"/"+d
                return (1900+ y)+"-"+m+"-"+d; 
            };
//获取随机数组1   randomArr(iAll,iNow)  在iAll个数中随机获取iNow个数
function randomArr(){
    function randomArr(iAll,iNow){
                    var arr=[];
                    var newArr=[];
                    for(var i=0;i<iAll;i++){
                        arr.push(i)
                    }
                    
                    for(var i=0;i<iNow;i++){
                        newArr.push( arr.splice(  Math.floor(Math.random(0,1)*arr.length) , 1 ) )
                    }
                    
                    return newArr
                }
}

//获取随机数组1   randomArr(iAll,iNow)  在iAll个数中随机分批获取iNow个数  把每批的数组放到一个新的arr中  就是分批   批数iAll/iNow
// 类似于这样的 randomArr(10,2)    arr1=[1,2,3,4,5,6,7,8,9,10]   arrResult=[ [1,2] ,[3,4], [5,6], [7,8],[9,10] ]

function randomArr1(iAll,iNow){
                    var arr=[];
                    var arrAll=[];
                    for(var i=0;i<iAll;i++){
                        arr.push(i)
                    }
                    
                    //  iNow是iAll的1/10  iAll/iNow ---> 10
                    for(var j=0;j < iAll/iNow; j++ ){  
                          var newArr=[];
                          for(var i=0;i<iNow;i++){
                                newArr.push( arr.splice(  Math.floor(Math.random(0,1)*arr.length) , 1 ) )
                            }
                        arrAll.push(newArr)
                    }
                    //把arr的内容分批放到arrAll中,各批放到newSrr中
                    
                    
                    return arrAll 
                }


// h5 获取某个点的像素的color
            function getXY(obj,x,y){
                var w=obj.width;
                var h=obj.height;
                var d=obj.data;
                
                var color=[];
                color[0]= d[ (w*y+x)*4 ];
                color[1]= d[ (w*y+x)*4+1 ];
                color[2]= d[ (w*y+x)*4+2 ];
                color[3]= d[ (w*y+x)*4+3 ];
      
                return color;
            }
            
//h5 设置某个点的像素的color
function setXY(obj,x,y,color){
    var w=obj.width;
    var h=obj.height;
    var d=obj.data;
    
    d[ (w*y+x)*4 ] = color[0] ;
    d[ (w*y+x)*4+1 ] = color[1]  ;
    d[ (w*y+x)*4+2 ] = color[2] ;
    d[ (w*y+x)*4+3 ] = color[3] ;
    
}

//碰撞检测
function pz(obj1,obj2){
        var L1 = obj1.offsetLeft;
        var R1 = obj1.offsetLeft + obj1.offsetWidth;
        var T1 = obj1.offsetTop;
        var B1 = obj1.offsetTop + obj1.offsetHeight;
        
        var L2 = obj2.offsetLeft;
        var R2 = obj2.offsetLeft + obj2.offsetWidth;
        var T2 = obj2.offsetTop;
        var B2 = obj2.offsetTop + obj2.offsetHeight;
        
        if( R1<L2 || L1>R2 || B1<T2 || T1>B2 ){
            return false;
        }
        else{
            return true;
        }
}