js版别踩白块

先上效果图

具体实现思路是：首先在每一行白块中渲染一个黑块，这个应该是随机的，用Math.random()函数，然后当用户点中一个黑块时，将黑块所在的那一列用jquery的slideDown先隐藏，后删除。并且每当用户正确点到一个黑块时，在append一列白块。
附代码：

    
    
    
    
    



    分数:0
    

        

            

                

                

                

                

            
        
        

            

                

                

                

                

            
        
        

            

                

                

                

                

            
        
        

            

                

                

                

                

            
        
    


    

        

            

            

            

            

        
    

sass

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.operate{
  max-width: 720px;
  min-width: 320px;
  width: 100%;
  margin: 0 auto;
}
li{
  list-style: none;
}
.score{
  position: absolute;
  left: 2%;
  top: 2%;
  font-size: 30px;
  color: green;
}
.operate{
  >ul{
    height: 100vh;
    overflow-y: auto;
    >li{
      width: 100%;
      >ul{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        >li{
          width: 25%;
          height: 25vh;
          background-color: #fff;
          border-top:1px solid #333;
          border-bottom:1px solid #333;
          border-right: 1px solid #333;
        }
        li:last-child{
          border-right: none;
        }
        .black{
          background-color: #000000;
        }
        .finshed{
          background-color: #cccccc;
        }
      }
    }
  }
}

最后附上demo的体验地址，点击查看

demo下载地址