打地鼠游戏电脑版

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+'    级别:'+jibie+'    机会:'+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+'    级别:'+jibie+'    机会:'+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+'    级别:'+jibie+'    机会:'+hp;
                tsnum[num]=undefined;
            }
        }

 

主要就是这三个方法，当然还有其他很多方法来实现一些边边角角，是游戏完整起来。通过这次游戏的编写发现JS真的跟那些专门的后台语言java,c++差远了啊。当然它也有它的优势哈！继续努力中，我也是菜鸟把具体代码放到附件中了供大家参考，一起努力啊！

 打地鼠服务器版.rar    打地鼠普通版.rar