jquery插件實(shí)現(xiàn)掃雷游戲(3)

更新時(shí)間：2021年04月26日 17:04:45 作者：阿飛超努力

這篇文章主要介紹了jquery插件實(shí)現(xiàn)掃雷游戲的第三篇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery插件實(shí)現(xiàn)掃雷游戲的第3篇，供大家參考，具體內(nèi)容如下

完成，效果感覺(jué)還不錯(cuò)，就是臉黑第一下容易掛

效果如下

代碼部分

* {
 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>做一個(gè)掃雷</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; //雷數(shù)
 var boom = []; //產(chǎn)生炸彈的坐標(biāo)
 var $menu = $("#menu");
 var $box = $("#box");




 //同步參數(shù)
 $("#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();//產(chǎn)生炸彈參數(shù)
  drawbooms();//繪制炸彈
  drawnum();//遍歷所有塊，生成提示
 })
 draw();//繪制
 booms();//產(chǎn)生炸彈參數(shù)
 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};
    //遍歷這個(gè)坐標(biāo)四周的情況，看看有多少個(gè)炸彈
    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(){//隨機(jī)產(chǎn)生炸彈參數(shù)
  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>");
  }
 }
})

思路解釋

反正做起來(lái)沒(méi)啥難度，關(guān)鍵還是對(duì)自己要做的東西的邏輯要有個(gè)大概的了解
掃雷就是一個(gè)x*y的坐標(biāo)系上隨機(jī)放上雷，然后遍歷每一個(gè)坐標(biāo)點(diǎn)判斷它四周炸彈的總數(shù)，可以得知數(shù)字是0-8以內(nèi)的可能，這樣子就生成了
游戲性就是點(diǎn)擊和一個(gè)額外的動(dòng)作而已，就是那個(gè)假如點(diǎn)擊到空白的地方，那么它附近的空白要自行點(diǎn)亮，這個(gè)效果我也做出來(lái)了，起始就是繁瑣的判斷而已
具體看js部分的代碼，反正都上傳了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: