jquery外掛實現掃雷遊戲(3)

本文例項為大家分享了jquery外掛實現掃雷遊戲的第3篇，供大家參考，具體內容如下

完成，效果感覺還不錯，就是臉黑第一下容易掛

效果如下

jquery外掛實現掃雷遊戲(3)

程式碼部分

* {
 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</hpryQejWk 
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('w程式設計客棧arn');
  }
  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)},y:(p.y+1)},{x:(p.x+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(www.cppcns.comn=>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外掛實現掃雷遊戲(3)

程式碼部分

思路解釋

jquery外掛實現掃雷遊戲(3)

jquery外掛實現掃雷遊戲

jquery外掛實現掃雷遊戲(2)

C語言實現掃雷遊戲

通過javascript實現掃雷遊戲程式碼例項

C語言程式碼實現掃雷遊戲

python實現掃雷遊戲

C++實現掃雷遊戲

C++實現掃雷遊戲（控制檯版）

C++實現掃雷遊戲（控制檯不閃屏版）

java實現掃雷遊戲

java實現掃雷遊戲控制檯版

C語言實現掃雷遊戲（初級版）

網頁引導：jQuery外掛實現的頁面功能介紹引導頁效果

jquery外掛實現輪播圖效果

jQuery外掛實現圖片輪播效果

python實現掃雷遊戲的示例

基於C語言實現掃雷遊戲

C語言實現掃雷遊戲（可以自動展開）

基於C語言程式碼實現掃雷遊戲

jquery外掛實現掃雷遊戲(3)

程式碼部分

思路解釋

相關推薦