jquery插件实现扫雷游戏(1)-偶像资源网

本文实例为大家分享了jquery插件实现扫雷游戏第一篇的具体代码，供大家参考，具体内容如下

做一个扫雷

第一部分，完成绘制和点击动作

效果如下

代码部分

* {
 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;
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset=\"utf-8\">
  <title>做一个扫雷</title>
  <script src=\"js/jquery-3.4.1.min.js\"></script>
  <script src=\"js/yqlsl.js\"></script>
  <link href=\"css/yqlsl.css\" rel=\"external nofollow\" rel=\"stylesheet\" type=\"text/css\" />
 </head>
 <body>
  <div id=\"div\">
   <div id=\"box\">
    
   </div>
   <div id=\"menu\">
    <div class=\"mitem\">
     <select class=\"sl\" id=\"x\">
      <option value=\"10\">10</option>
      <option value=\"11\">11</option>
      <option value=\"12\">12</option>
      <option value=\"13\">13</option>
      <option value=\"14\">14</option>
      <option value=\"15\">15</option>
      <option value=\"16\">16</option>
      <option value=\"17\">17</option>
      <option value=\"18\">18</option>
      <option value=\"19\">19</option>
      <option value=\"20\">20</option>
     </select>
    </div>
    <div class=\"mitem\">
     <select class=\"sl\" id=\"y\">
      <option value=\"10\">10</option>
      <option value=\"11\">11</option>
      <option value=\"12\">12</option>
      <option value=\"13\">13</option>
      <option value=\"14\">14</option>
      <option value=\"15\">15</option>
      <option value=\"16\">16</option>
      <option value=\"17\">17</option>
      <option value=\"18\">18</option>
      <option value=\"19\">19</option>
      <option value=\"20\">20</option>
     </select>
    </div>
    <div class=\"mitem\">
     <select class=\"sl\" id=\"c\">
      <option value=\"10\">10</option>
      <option value=\"20\">20</option>
      <option value=\"30\">30</option>
      <option value=\"40\">40</option>
      <option value=\"50\">50</option>
      <option value=\"60\">60</option>
      <option value=\"70\">70</option>
      <option value=\"80\">80</option>
      <option value=\"90\">90</option>
      <option value=\"99\">99</option>
     </select>
    </div>
    <div class=\"mitem\">
     <button type=\"button\" class=\"btn\" id=\"pro\">生成</button>
    </div>
   </div>
  </div>
 </body>
</html>

$(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 < x; a++) {
   var $row = $(\"<div class=\'row\'></div>\");
   for (var b = 0; b < y; b++) {
    var $item = $(\"<div class=\'item\'></div>\");
    $item.appendTo($row);
   }
   $row.appendTo($box);
  }
 }
})

思路解释

首先就是参数的产生和内容的绘制，这些很容易做到
然后要做好准备的就是给每一个块状标记上坐标，方便后续的计算，直接操作
然后点击的效果通过伪类来实现，没点的时候伪类生成覆盖的遮罩，点完之后去掉就行了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持免费资源网。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

代码部分

思路解释

请登录后发表评论