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

更新时间：2021年04月26日 17:05:32 作者：阿飞超努力

这篇文章主要为大家详细介绍了jquery插件实现扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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);
  }
 }
})

思路解释

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

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

您可能感兴趣的文章:

jQuery中getJSON跨域原理的深入讲解
这篇文章主要给大家介绍了关于jQuery中getJSON跨域原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
jquery自定义右键菜单、全选、不连续选择
这篇文章主要为大家详细介绍了jquery自定义右键菜单、全选、不连续选择的相关资料,需要的朋友可以参考下
2016-03-03
jQuery轮播图功能制作方法详解
这篇文章主要介绍了jQuery轮播图功能制作方法,结合实例形式详细分析了jQuery轮播图实现原理、步骤与相关操作技巧,需要的朋友可以参考下
2019-12-12
jQuery截取指定长度字符串的实现原理及代码
截取指定长度字符串操作在新闻列表这种类型的操作中大量应用，下面有个示例，大家可以参考下
2014-07-07
jQuery实现消息滚动播放效果
这篇文章主要为大家详细介绍了jQuery实现消息滚动播放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jQuery处理图片加载失败的常用方法
这篇文章主要介绍了jQuery处理图片加载失败的常用方法,实例演示了jQuery处理图片加载失败时提示加载失败及隐藏加载失败信息的方法,需要的朋友可以参考下
2015-06-06
基于jQuery实现左右div自适应高度完全相同的代码
最近做前端设计时需要使左右两个DIV高度自适应。这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别
2012-08-08
jQuery中iframe的操作(点击按钮新增窗口)
<iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口)，需要的朋友参考下吧
2016-04-04
jQuery对象与DOM对象之间的相互转换
本文主要给大家介绍的是jQuery对象与DOM对象之间的相互转换的方法和示例，非常实用，这里推荐给有需要的小伙伴参考下。
2015-03-03
jQuery.ajax实现根据不同的Content-Type做出不同的响应
使用H5+ASP.NET General Handler开发项目，使用ajax进行前后端的通讯。有一个场景需求是根据服务器返回的不同数据类型，前端进行不同的响应，这里记录下如何使用$.ajax实现该需求,需要的朋友可以参考下
2016-11-11