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

阿飞超努力 2021-04-26 我要评论

想了解jquery插件实现扫雷游戏(3)的相关内容吗，阿飞超努力在本文为您仔细讲解jquery扫雷游戏的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：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.num1::after{
 content: '1';
 color: #1abc9c;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right:0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.item.num2::after{
 content: '2';
 color: #2ecc71;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right:0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.item.num3::after{
 content: '3';
 color: #3498db;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right:0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.item.num4::after{
 content: '4';
 color: #9b59b6;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right:0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.item.num5::after{
 content: '5';
 color: #f1c40f;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right:0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.item.num6::after{
 content: '6';
 color: #e67e22;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right:0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.item.num7::after{
 content: '7';
 color: #e74c3c;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right:0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.item.num8::after{
 content: '8';
 color: #34495e;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right:0;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 2;
}
.item.boom{
 background-image: url(../img/boom.png);
 background-size: 60% 60%;
 background-repeat: no-repeat;
 background-position: center center;
}
.item::before{
 position: absolute;
 content: '';
 top: 0.5px;
 left:0.5px;
 bottom: 0.5px;
 right: 0.5px;
 background-color: gray;
 z-index: 3;
}
.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;
 z-index: 10;
}
.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%;
}
.item.warn{
 border: 1px solid red;
}
.btn{
 border: none;
 border: 1px solid lightgray;
 outline: none;
 width: 60%;
 height: 80%;
 background-color: transparent;
 cursor: pointer;
}
.mitem *:hover{
 background-color: lightgray;
}

html:

<!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="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>

js:

$(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");
  var pos = {
   x:parseInt($(this).attr("data-x")),
   y:parseInt($(this).attr("data-y"))
  }
  if($(this).hasClass('boom')){
   $(".item").addClass('click')
   $(this).addClass('warn');
  }
  afterclick(pos);
 })
 $("#pro").click(function() {
  draw();
  draw();//绘制
  booms();//产生炸弹参数
  drawbooms();//绘制炸弹
  drawnum();//遍历所有块，生成提示
 })
 draw();//绘制
 booms();//产生炸弹参数
 drawbooms();//绘制炸弹
 drawnum();//遍历所有块，生成提示
 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' data-x='"+a+"' data-y='"+b+"'></div>");
    $item.appendTo($row);
   }
   $row.appendTo($box);
  }
 }
 function afterclick(p){//解放所有空白块，并且把所有空白快挨着的提示展示出第第一层
  var arr = [
   {x:(p.x-1),y:(p.y-1)},
   {x:(p.x-1),y:(p.y)}  ,
   {x:(p.x-1),y:(p.y+1)},
   {x:(p.x+1),y:(p.y-1)},
   {x:(p.x+1),y:(p.y)}  ,
   {x:(p.x+1),y:(p.y+1)},
   {x:(p.x),y:(p.y+1)}  ,
   {x:(p.x),y:(p.y-1)}  
  ]
  arr.forEach(item=>{
   if($dom(item).hasClass('nonum')&&!$dom(item).hasClass('click')&&!$dom(item).hasClass('boom')){
    $dom(item).click();
   }
  })
 }
 function drawnum(){
  for(var a = 0;a<x;a++){
   for(var b = 0;b<y;b++){
    var pos = {x:a,y:b};
    //遍历这个坐标四周的情况，看看有多少个炸弹
    var s = getscore(pos);
    if(s!=0&&!$dom(pos).hasClass('boom')){
     $dom(pos).addClass('num'+s);
     $dom(pos).addClass('num');
    }else{
     $dom(pos).addClass('nonum');
    }
   }
  }
 }
 function getscore(p){
  var index = 0;
  var s1 = boom.find(n=>n.x==(p.x-1)&&n.y==(p.y-1))
  var s2 = boom.find(n=>n.x==(p.x)&&n.y==(p.y-1))
  var s3 = boom.find(n=>n.x==(p.x+1)&&n.y==(p.y-1))
  var s4 = boom.find(n=>n.x==(p.x-1)&&n.y==(p.y+1))
  var s5 = boom.find(n=>n.x==(p.x)&&n.y==(p.y+1))
  var s6 = boom.find(n=>n.x==(p.x+1)&&n.y==(p.y+1))
  var s7 = boom.find(n=>n.x==(p.x-1)&&n.y==(p.y))
  var s8 = boom.find(n=>n.x==(p.x+1)&&n.y==(p.y))
  if(s1){index++;}
  if(s2){index++;}
  if(s3){index++;}
  if(s4){index++;}
  if(s5){index++;}
  if(s6){index++;}
  if(s7){index++;}
  if(s8){index++;}
  return index;
 }
 function drawbooms(){
  boom.forEach(item=>{
   $dom(item).addClass('boom');
  })
 }
 function booms(){//随机产生炸弹参数
  var arr = [];
  while(arr.length<c){
   var pos = {x:Math.floor(Math.random()*x),y:Math.floor(Math.random()*y)};
   var temp = arr.find(n=>n.x==pos.x&&n.y==pos.y);
   if(!temp){
    arr.push(pos);
   }
  }
  boom = arr;
 }
 function $dom(pos){
  var dom = $("[data-x='"+pos.x+"'][data-y='"+pos.y+"']");
  if(dom.length!=0){
   return dom
  }else{
   return $("<div></div>");
  }
 }
})

思路解释

反正做起来没啥难度，关键还是对自己要做的东西的逻辑要有个大概的了解
扫雷就是一个x*y的坐标系上随机放上雷，然后遍历每一个坐标点判断它四周炸弹的总数，可以得知数字是0-8以内的可能，这样子就生成了
游戏性就是点击和一个额外的动作而已，就是那个假如点击到空白的地方，那么它附近的空白要自行点亮，这个效果我也做出来了，起始就是繁琐的判断而已
具体看js部分的代码，反正都上传了

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

代码部分

思路解释

相关文章

猜您喜欢

今日热门