jQuery plugin to implement minesweeper game (3)

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:
  • jQuery plugin to implement minesweeper game (2)
  • jQuery plugin to implement minesweeper game (1)
  • jQuery implements the minesweeper game

<<:  Install three or more tomcats under Linux system (detailed steps)

>>:  MySQL Community Server compressed package installation and configuration method

Recommend

jQuery plugin to achieve image comparison

This article example shares the specific code of ...

Detailed explanation of the function and usage of keepAlive component in Vue

Preface During the interview, many interviewers m...

MySQL 8.0.15 installation and configuration tutorial under Win10

What I have been learning recently involves knowl...

CSS achieves the effect of aligning multiple elements at both ends in a box

The arrangement layout of aligning the two ends o...

Jenkins Docker static agent node build process

A static node is fixed on a machine and is starte...

How to dynamically add a volume to a running Docker container

Someone asked me before whether it is possible to...

MySql index detailed introduction and correct use method

MySql index detailed introduction and correct use...

React's method of realizing secondary linkage

This article shares the specific code of React to...

Two ways to specify the character set of the html page

1. Two ways to specify the character set of the h...

The process of building and configuring the Git environment in Docker

Configure Git environment in Docker At work, I en...

New usage of watch and watchEffect in Vue 3

Table of contents 1. New usage of watch 1.1. Watc...

Application of Beautiful Style Sheets in XHTML+CSS Web Page Creation

This is an article written a long time ago. Now it...