jQuery plugin to implement minesweeper game (3)

This article shares the third article on how to use jquery plugins to implement the minesweeper game for your reference. The specific content is as follows

Finished, the effect feels good, but it is easy to die if you are unlucky

The effect is as follows

Code section

* {
 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>Make a Minesweeper</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">Generate</button>
    </div>
   </div>
  </div>
 </body>
</html>

js:

$(document).ready(function() {
 var x = 10; //x axisvar y = 10; //y axisvar c = 10; //number of bombsvar boom = []; //coordinates for generating bombsvar $menu = $("#menu");
 var $box = $("#box");




 //Synchronous parameters $("#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(); //Draw booms(); //Generate bomb parameters drawbooms(); //Draw bomb drawnum(); //Traverse all blocks and generate prompts })
 draw();//Draw booms();//Generate bomb parameters drawbooms();//Draw bomb drawnum();//Traverse all blocks and generate prompts function draw() { //Draw picture $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){//Liberate all blank blocks and display all blank adjacent prompts on the first layer var arr = [
   {x:(px-1),y:(py-1)},
   {x:(px-1),y:(py)} ,
   {x:(px-1),y:(p.y+1)},
   {x:(p.x+1),y:(py-1)},
   {x:(p.x+1),y:(py)} ,
   {x:(p.x+1),y:(p.y+1)},
   {x:(px),y:(p.y+1)} ,
   {x:(px),y:(py-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};
    //Traverse the situation around this coordinate to see how many bombs there are 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=>nx==(px-1)&&n.y==(py-1))
  var s2 = boom.find(n=>nx==(px)&&n.y==(py-1))
  var s3 = boom.find(n=>nx==(p.x+1)&&n.y==(py-1))
  var s4 = boom.find(n=>nx==(px-1)&&n.y==(p.y+1))
  var s5 = boom.find(n=>nx==(px)&&n.y==(p.y+1))
  var s6 = boom.find(n=>nx==(p.x+1)&&n.y==(p.y+1))
  var s7 = boom.find(n=>nx==(px-1)&&n.y==(py))
  var s8 = boom.find(n=>nx==(p.x+1)&&n.y==(py))
  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(){//Randomly generate bomb parameters 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=>nx==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>");
  }
 }
})

Explanation of ideas

Anyway, it is not difficult to do. The key is to have a general understanding of the logic of what you want to do.
Minesweeper is to randomly place mines on an x*y coordinate system, and then traverse each coordinate point to determine the total number of bombs around it. You can know that the number is within 0-8. In this way, the
The gameplay is just clicking and an additional action. If you click on a blank space, the blank space around it will light up automatically. I have also made this effect. The beginning is just a tedious judgment.
Look at the js code specifically, it's all uploaded anyway.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: