JavaScript+html+css实现别踩白块游戏

游戏思路

1. 先创建一个正方形，将其分成16块
   部分代码如下：

        div{
            margin: 0 auto;
            width: 100px;
            height: 100px;
        }
        #main {
   
            width: 400px;
            height: 400px;
            background: white;
            border: 2px solid gray;
            margin: 0 auto;
            position: relative;

        }

        #container{
   
            width: 100%;
            height: 400px;
            border-collapse:collapse;
        }

        .row{
            height: 100px;
            width: 100%;
        }
        .cell{
            height: 100px;
            width: 100px;
            float: left;
        }
        .black {
            background: black;
        }
    <div id="main">
        <div id="container">
            <div class="row">
                <div class="cell"></div>
                <div class="cell black"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell"></div>
                <div class="cell black"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell black"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell black"></div>
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
        </div>
    </div>

效果：

2. 将最上面一行上移并隐藏(黑块要不断地从上面掉落下来)

给container添加：    
top: -100px; 
position: rela