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
This article example shares the specific code of ...
Preface During the interview, many interviewers m...
The scroll-view of WeChat applet has more bugs wh...
What I have been learning recently involves knowl...
The arrangement layout of aligning the two ends o...
Nginx supports three ways to configure virtual ho...
A static node is fixed on a machine and is starte...
After entering yum in linux, the prompt: -bash: /...
Someone asked me before whether it is possible to...
MySql index detailed introduction and correct use...
This article shares the specific code of React to...
1. Two ways to specify the character set of the h...
Configure Git environment in Docker At work, I en...
Table of contents 1. New usage of watch 1.1. Watc...
This is an article written a long time ago. Now it...