打地鼠遊戲電腦版

 Html5也學了一個階段了，剛把離線緩存學了一下，就想寫個遊戲，挑了一個簡單的來練練手，打地鼠。

這款遊戲用到了一些html5的東西算是一點小亮點吧，比如說開場動畫了，升級失敗的字，還有離線緩存了，主要算法一般般，對JS的面向對象不是很熟悉，JS不支持繼承要通過構造函數來實現繼承偷懶就沒仔細去研究，所以js代碼自認爲寫的不是很好。寫遊戲嘛用面向對象寫起來應該爽吧！下邊給大家看一下開場動畫的畫面吧！

 

用的是蒙版的原理實現了燈光的效果，用了離線緩存實現的進度條

。再看一下里面的東西吧

 

一些字體什麼的都是用了CSS3的東西看起來很炫啊……地鼠的動作也是用到了CSS3。

主要的JS算法流程是：通過一個創建的地鼠的方法來不停的創建地鼠：

 

/*
        *創建地鼠方法
        *計數器t是管創建的，計時器ts[i]管地鼠逃生
        *t2是創建地鼠需要的時間
        *t1是地鼠逃生在地面待的時間
        */
        function createmouse(){
            var hidemouse=document.querySelectorAll('.mouse[data-show^="0"]');
            var randomNum = Math.round(Math.random()*(hidemouse.length-1));
            if(hidemouse.length==0){
                t = setTimeout(createmouse,t2);
                return;
            }
            hidemouse[randomNum].setAttribute('data-show','1');

            for(var i=0;i<mouses.length;i++){
                if(hidemouse[randomNum]==mouses[i]){
                    tsnum[i]=i;
                    break;
                }
            }
            mouseboolean[i]=true;
            (function(i){ts[i]=setTimeout(function(){shibai(i)},t1);})(i);
            t = setTimeout(createmouse,t2);
        }
通過一個打到地鼠的方法來判斷是否打中地鼠：
/*
        *地鼠被揍的方法
        *
        */
        function disappear(e){
            if(!suspendnum){
                if(!shengjiboolean){
                    if(e.target.className=='mouse'){
                        for(var i=0;i<mouses.length;i++){
                            if(e.target==mouses[i]){
                            tsnum[i]=undefined;
                                break;
                            }
                        }

                        if(mouseboolean[i]){
                            clearTimeout(ts[i]);
                            e.target.setAttribute('data-show','1_1');
                            shengjinumall++;
                            scores+=score;
                            mouseboolean[i]=false;
                            scoreall.innerHTML='分數:'+scores+'&nbsp;&nbsp;&nbsp;&nbsp;級別:'+jibie+'&nbsp;&nbsp;&nbsp;&nbsp;機會:'+hp;
                            tall[i]=setTimeout(function(){e.target.setAttribute('data-show','0_1');},220);
                            if(shengjinumall==shengjinum){t1=1500;t2=3000;score=2000;jibie=2;shengji1();}
                            else if(shengjinumall==2*shengjinum){t1=1000;t2=2000;score=3000;jibie=3;shengji1();}
                            else if(shengjinumall==3*shengjinum){t1=900;t2=1500;score=4000;jibie=4;shengji1();}
                            else if(shengjinumall==4*shengjinum){t1=800;t2=1000;score=5000;jibie=5;shengji1();}
                            else if(shengjinumall==5*shengjinum){t1=1200;t2=700;score=6000;jibie=6;shengji1();}
                        }
                    }
                }
            }
        }
        mousediv.addEventListener('click',function(e){disappear(e);},false);
還有一個是沒有打中地鼠的方法：
/*
        *地鼠逃生方法
        *hp地鼠逃生次數
        */
        function shibai(num){
            if(hp==1){
                suspendnum=true;
                startnum=false;
                hp=0;
                mouses[num].setAttribute('data-show','1_2');
                tall[num]=setTimeout(function(){
                    mouses[num].setAttribute('data-show','0_2');
                    if(musicboolean){jianxiao.play();}
                    },220);
                scoreall.innerHTML='分數:'+scores+'&nbsp;&nbsp;&nbsp;&nbsp;級別:'+jibie+'&nbsp;&nbsp;&nbsp;&nbsp;機會:'+hp;
                cleart();
                tfail=setTimeout(function(){
                    if(musicboolean){shibai_bg.play();}
                    fail.style.display='block';
                    setTimeout(function(){fail.style.top='300px';},17);
                    fail.innerHTML='你輸了！！！分數:'+scores+'  級別:'+jibie+'打死的地鼠:'+shengjinumall;
                    for(var i=0;i<mouses.length;i++){
                        mouses[i].setAttribute('data-show','2');
                    }
                },1000);

            }
            else if(hp<=3&&hp>1){
                hp--;
                mouses[num].setAttribute('data-show','1_2');
                tall[num]=setTimeout(function(){
                    mouses[num].setAttribute('data-show','0_2');
                    if(musicboolean){jianxiao.play();}
                },220);
                scoreall.innerHTML='分數:'+scores+'&nbsp;&nbsp;&nbsp;&nbsp;級別:'+jibie+'&nbsp;&nbsp;&nbsp;&nbsp;機會:'+hp;
                tsnum[num]=undefined;
            }
        }