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
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:
|
<<: Install three or more tomcats under Linux system (detailed steps)
>>: MySQL Community Server compressed package installation and configuration method
Preface In the previous article Detailed Explanat...
Table of contents origin status quo Cancel reques...
Table of contents Select Structure Loop Structure...
The main configuration file of Nginx is nginx.con...
The pitfalls 1. Many tutorials on the Internet wr...
Today I found a problem in HTML. There are many d...
First, you need to determine which fields or fiel...
Preface During the development process, we someti...
1. Introduction I recently worked on a project an...
Today I will share with you how to write a player...
Table of contents background Technical Solution S...
difficulty Two mask creation of svg graphics Firs...
I am happy that some bloggers marked my article. ...
The use of computed in vue3. Since vue3 is compat...
MySQL master-slave replication allows data from o...