jquery插件实现扫雷游戏(1)

* {
 margin: 0px;
 padding: 0px;
 font-size: 12px;
}

#div {
 position: fixed;
 top: 10px;
 bottom: 10px;
 left: 10px;
 right: 10px;
 border: 1px solid lightgray;
 border-radius: 5px;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
}

#box {
 border: 1px solid lightgray;
 border-radius: 5px;
}

.row {
 white-space: nowrap;
 height: 30px;
}

.item {
 display: inline-flex;
 justify-content: center;
 align-items: center;
 height: 30px;
 width: 30px;
 border-right: 1px solid lightgray;
 border-bottom: 1px solid lightgray;
 cursor: pointer;
 position: relative;
}
.item::before{
 position: absolute;
 content: '';
 top: 0.5px;
 left:0.5px;
 bottom: 0.5px;
 right: 0.5px;
 background-color: gray;
}
.item.click::before{
 content: none;
}
.item:hover{
 outline: 1px solid #2c3e50;
}

#menu {
 border-bottom: 1px solid lightgray;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 30px;
 display: flex;
 background-color: white;
}
.mitem{
 flex: 1;
 display: flex;
 justify-content: center;
 align-items: center;
}
.sl{
 border: none;
 border-bottom: 1px solid lightgray;
 outline: none;
 width: 60%;
 height: 80%;
}
.btn{
 border: none;
 border: 1px solid lightgray;
 outline: none;
 width: 60%;
 height: 80%;
 background-color: transparent;
 cursor: pointer;
}
.mitem *:hover{
 background-color: lightgray;
}

 
  
  
  
  
  
 
 
  

   

    
   
   

    

     
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
     
    
    

     
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
     
    
    

     
      10
      20
      30
      40
      50
      60
      70
      80
      90
      99
     
    
    

     生成
    
   
  
 

$(document).ready(function() {
 var x = 10; //x轴
 var y = 10; //y轴
 var c = 10; //雷数
 var boom = []; //产生炸弹的坐标
 var $menu = $("#menu");
 var $box = $("#box");



 //同步参数
 $("#x").change(function() {
  x = parseInt($(this).val());
  console.log(x);
 })
 $("#y").change(function() {
  y = parseInt($(this).val());
 })
 $("#c").change(function() {
  c = parseInt($(this).val());
 })
 $(document).on('click', '#box .item', function() {
  $(this).addClass("click");
 })
 $("#pro").click(function() {
  console.log(x,y,c)
  draw();
 })
 draw();
 function draw() { //绘制图片
  $box.html('');
  for (var a = 0; a