打地鼠 

    ><!DOCTYPE html>//打地鼠的Html
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <body>
        <div class="beijing">
            <div class="defen">0</div>
            <div class="tiao"></div>
            <div class="ting">暂停</div>
            <div class="kai">继续</div>
            <div class="chonglai">重新开始</div>
            <div class="open"><a href="#">开始</a></div>
            <div class="zailai"><a href="#"></a></div>
            <img src="img/h0.png" alt="huitai"/>
        </div>
        <script type="text/javascript" src= "wode.js"></script>
        <!-- <script type="text/javascript" src= "index.js"></script> -->
    </body>
    </html>
    //打地鼠的js
    var defen = document.querySelector('.defen');
    var tiao = document.querySelector('.tiao');
    var open = document.querySelector('.open a');
    var yi = document.querySelector('.open');
    var zailai = document.querySelector('.zailai');
    var img = document.querySelector('img');
    var ting = document.querySelector('.ting');
    var kai = document.querySelector('.kai');
    var chonglai = document.querySelector('.chonglai');
    var width = tiao.offsetWidth;
    (function(){
        open.onclick = function(){//点击开始
            open.style.display = "none";
            function hello(){
            test = setInterval(function(){
                width = width - 0.18;
                if(width <=0){
                    width = 0;
                    clearInterval(test);
                    open.style.display = "block";
                    yi.style.left = "68px";
                    zailai.innerHTML = '<a href="index.html">再来一局</a>';
                    zailai.style.left = "90px";
                    open.innerHTML = 'gime over';
                    clearInterval(test1);
                }
                tiao.style.width = width +'px';
            },30)
        }
        hello();
            var pos = [{t:157,l:11},//灰太狼位置
                {t:217,l:11},
                {t:291,l:19},
                {t:292,l:200},
                {t:209,l:190},
                {t:139,l:181},
                {t:112,l:90},
                {t:188,l:97},
                {t:270,l:110}];
        function kaishi(){
            test1 = setInterval(function(){
                var log = random(0,8);//随机出现位置
                name = random(0,100)< 80 ? "h":"x";//灰太狼小灰灰出现的几率
                img.style.left = pos[log].l+'px';
                img.style.top = pos[log].t+'px';
                img.style.display = 'block';
                img.index = 0;
                test2 = setInterval(function(){//灰太狼出现
                    img.index++;
                    if(img.index>=5){
                        img.index = 5;
                        clearInterval(test2)
                    }
                    img.src = 'img/'+name+img.index +'.png';
                },30)
                test3 = setTimeout(function(){//灰太狼下去
                    test4 = setInterval(function(){
                        img.index--;
                        if(img.index <=0){
                            img.index = 0;
                            img.style.display = "none";
                            clearInterval(test4);
                        }
                            img.src = 'img/'+name + img.index +'.png';
                    },30)
                },700)
            },1000)
        }
        kaishi();
            var num = 0;
            var first =true;                
        if(name =="h"){//加分
            img.src = 'img/h6'+'.png';
            num +=10;
        }
        if(name =="x"){//减分
            img.src = 'img/x6'+'.png';
            num -=10;
        }
        if(num <=0){//没有分的时候
            num = 0;
        }
        defen.innerHTML = num +'分';
    }
    ting.onclick = function(){//暂停
        clearInterval(test);
        clearInterval(test1);
        ting.style.display = 'none';
        kai.style.display = 'block';
        img.src = 'img/'+name+img.index +'.png';
        // chonglai.style.display ＝ 'block';
    }
    kai.onclick = function(){//继续
        ting.style.display = 'block';
        kai.style.display = 'none';
        hello();
        kaishi();
    }
}
})();
function random(x,y){
    return Math.round(Math.random()*(y-x)+x);
}

希望大家帮忙改一下

Share