锅打灰太狼

* {padding: 0;margin: 0;}
#outer {background: url(img/game_bg.jpg);width: 320px;height: 480px;position: relative;margin: 0 auto;}
#scoring {position: absolute;top: 13px;left: 65px; font-weight: bold;font-size: 20px; color: white; }
#countDown {position: absolute; background: url(img/progress.png) no-repeat; width: 180px; height: 16px; left: 63px; top: 66px;}
#countDown img {position: absolute; }
#menu { position: absolute; width: 320px; text-align: center; top: 220px; left: 0;}
#start { line-height: 50px; font-size: 30px;font-weight: bold;color: green;text-decoration: none; text-shadow: 0 0 5px red;display: block;}

0

        </div>

        <div id="menu">
            <a href="javascript:void(0)" id="start">开始</a>
        </div>
    </div>

    <script type="text/javascript">
        //随机函数(坑、狼的种类)
        function rand(min, max) {
            return parseInt(Math.random() * (max - min + 1) + min);
        }
        //分数
        var scoring = document.getElementById('scoring');
        //倒计时
        var countDown = document.getElementById('countDown');
        //狼窝
        var wolfs = document.getElementById('wolfs');
        var menu = document.getElementById('menu');
        var start = document.getElementById('start');
        var arrPos = [{l: "98px",t: "115px"}, 
                    {l: "17px",t: "160px"}, 
                    {l: "15px",t: "220px"}, 
                    {l: "30px",t: "293px"},
                    {l: "122px",t: "273px"},
                    {l: "207px",t: "295px"},
                    {l: "200px",t: "211px"}, 
                    {l: "187px",t: "141px"}, 
                    {l: "100px",t: "185px"}];
        //计分
        function scoringFn(obj){
            var scoringNum = parseInt(scoring.innerHTML);
            if (obj.type == "h") {
                scoring.innerHTML = scoringNum + 10;
            } else{
                scoring.innerHTML = scoringNum - 10;
            }
        }
        //倒计时
        var countDownTimer = null;
        var countDownWidth = countDown.offsetWidth;
        var countDownBol = false;
        countDownTimer = setInterval(function(){
            if (countDownBol) {
                countDownWidth--;
                if (countDownWidth<=0) {
                    clearInterval(createWolfsTimer);
                    clearInterval(countDownTimer);
                    var score = scoring.innerHTML;
                    alert("您的分数为"+score);
                    window.location.reload();
                }
                countDown.style.width = countDownWidth+"px";
            }
        },150);
        var createWolfsTimer = null;
        start.onclick = function(){
            menu.style.display = "none";
            countDownBol = true;
            createWolfsTimer = setInterval(function(){
                //创建狼��
                var wolf = new Image();
                //��的类型
                wolf.type = rand(0,100)>80 ? "x" : "h";
                wolf.index = 0;
                wolf.src = "img/"+wolf.type+wolf.index+".png";
                //找坑
                //找到狼窝里的所有img标签
                var childs = wolfs.children;
                //下面的两个东西是循环内使用的
                var bol = true;
                var r = 0;  //装我们找到的没有狼的坐标
                while (bol){
                    r = rand(0,arrPos.length-1);
                    for (var i=0;i<childs.length;i++) {
                        if (childs[i].offsetLeft == parseInt(arrPos[r].l)) {
                            break;
                        }
                    }
                    if (i == childs.length) {
                        bol = false;
                    }
                }
                //交出循环后的坐标
                wolf.style.position = "absolute";
                wolf.style.left = arrPos[r].l;
                wolf.style.top = arrPos[r].t;
                wolfs.appendChild(wolf);
                //狼向上的动画
                wolf.timer = setInterval(function(){
                    wolf.index++;
                    if (wolf.index > 4) {
                        clearInterval(wolf.timer);
                        wolf.downfn();
                    }
                    wolf.src = "img/"+wolf.type+wolf.index+".png";
                },150);
                //狼向下
                wolf.downfn = function(){
                    wolf.downTimer = setInterval(function(){
                        wolf.index--;
                        if (wolf.index <= 0) {
                            clearInterval(wolf.downTimer);
                            //让狼滚
                            wolfs.removeChild(wolf);
                        }
                        wolf.src = "img/"+wolf.type+wolf.index+".png";
                    },150);
                }
                wolf.wolfClick = true;
                wolf.onclick = function(){
                    if (wolf.wolfClick == false) {
                        return;
                    }
                    wolf.wolfClick = false;
                    scoringFn(wolf);
                    wolf.index = 5;
                    //干掉两个出浪的动画
                    clearInterval(wolf.timer);
                    clearInterval(wolf.downTimer);
                    wolf.clickTimer = setInterval(function(){
                        wolf.index++;
                        wolf.src = "img/"+wolf.type+wolf.index+".png";
                        if(wolf.index>=9){
                            clearInterval(wolf.clickTimer);
                            wolfs.removeChild(wolf);
                        }
                    },150);
                }

            },800);
        }
    </script>
</body>