jQuery实现别踩白块小游戏

html代码如下

<div class="contain">
    <div class="gray">
        <p> 游戏结束 <br> 您一共消灭了<span></span>个小黑块</p>
    </div>
    <div id="content">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<select name="cur" id="">
    <option value="10">10秒</option>
    <option value="20">20秒</option>
    <option value="30">30秒</option>
    <option value="40">40秒</option>
    <option value="40">50秒</option>
    <option value="40">60秒</option>
</select>
<button>开始</button>
<button><a href="">重新开始</a></button>

css代码如下

<style>
        *{
            margin: 0;
            padding:0;
            list-style: none;
            text-decoration: none;
        }
        .contain{
            width: 200px;
            height: 300px;
            margin:0 auto;
            overflow: hidden;
            position: relative;
        }
        ul{
            width: 100%;
            height: 50px;
        }
        ul li{
            float: left;
            width: 48px;
            height: 48px;
            border:1px solid black;
        }
        #content{
            position: absolute;
            bottom: 0;
        }
        .gray{
            width: 200px;
            height: 300px;
            position: absolute;
            top:0;
            z-index: 2;
        }
        p{
            display: none;
            text-align: center;
            color: red;
            font-size: 30px;
            margin-top: 100px;
        }
        button,select{
            display: block;
            width: 100px;
            height: 40px;
            margin: 0 auto;
            margin-top: 4px;
            line-height: 40px;
        }
        .active{
            background-color: black;
        }
        a{
            color: #000000;
        }
    </style>

jQurey代码如下(引入的jQurey3.4.1版本)

<script src="jquery-3.4.1.js"></script>
<script>
    //初始化黑白块
    $("ul").each(function (index,item) {
        var n = parseInt(Math.random()*4);
        $(item).children().eq(n).css("background","black").addClass("active");
        $(item).children().eq(n).siblings("li").addClass("white")
    });
    //点击小白块删除该父元素ul并且在content头添加m
    function go() {
        var sum = 0;
        $("p span").html(sum);
            $("#content").on("click",".active",function () {
            sum ++;
            $("p span").html(sum);
            var x = parseInt(Math.random()*4);
            $(this).parent("ul").remove();
            var m = $("<ul> <li></li> <li></li> <li></li> <li></li> </ul>");
            m.prependTo("#content");
            m.children().eq(x).addClass("active");
            $("li").not(".active").addClass("white");
            });
    }
//点击开始按钮调用函数go
    $("button").eq(0).click(function () {
        go();
        //选定时间修改定时器定时
        var time = $("select option:selected").val()*1000;
        console.log(time);
        clearInterval(timer);
        //遮盖层底部露出50px高度的可触摸区域
        $("p").css("display","none");
        $(".gray").css("height",250);
        var timer = setInterval(function () {
            //定时器结束后全部遮盖并且显示游戏结束
            $("p").css("display","block");
            $(".gray").css("height",300);
            clearInterval(timer)
        },time);
        $("#content").on("click",".white",function () {
            //点击白块结束定时器 游戏结束
            console.log("!");
            clearInterval(timer);
            $("p").css("display","block");
            $(".gray").css("height",300)
        })
    })

</script>

bug

多次点击开始按钮时会多次调用go()函数
会重复在concent内添加ul标签
我不会改。。。。。。。。学会了再更