jQuery-Plugin zur Implementierung des Minesweeper-Spiels (2)

* {
 Rand: 0px;
 Polsterung: 0px;
 Schriftgröße: 12px;
}

#div {
 Position: fest;
 oben: 10px;
 unten: 10px;
 links: 10px;
 rechts: 10px;
 Rand: 1px durchgehend hellgrau;
 Rahmenradius: 5px;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Überlauf: versteckt;
}

#Kasten {
 Rand: 1px durchgehend hellgrau;
 Rahmenradius: 5px;
}

.Reihe {
 Leerzeichen: Nowrap;
 Höhe: 30px;
}

.Artikel {
 Anzeige: Inline-Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Höhe: 30px;
 Breite: 30px;
 Rahmen rechts: 1px durchgehend hellgrau;
 Rahmen unten: 1px durchgehend hellgrau;
 Cursor: Zeiger;
 Position: relativ;
}
.item.num1::nach{
 Inhalt: '1';
 Farbe: #1abc9c;
 Position: absolut;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Z-Index: 2;
}
.item.num2::nach{
 Inhalt: „2“;
 Farbe: #2ecc71;
 Position: absolut;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Z-Index: 2;
}
.item.num3::nach{
 Inhalt: „3“;
 Farbe: #3498db;
 Position: absolut;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Z-Index: 2;
}
.item.num4::nach{
 Inhalt: '4';
 Farbe: #9b59b6;
 Position: absolut;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Z-Index: 2;
}
.item.num5::nach{
 Inhalt: '5';
 Farbe: #f1c40f;
 Position: absolut;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Z-Index: 2;
}
.item.num6::nach{
 Inhalt: '6';
 Farbe: #e67e22;
 Position: absolut;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Z-Index: 2;
}
.item.num7::nach{
 Inhalt: '7';
 Farbe: #e74c3c;
 Position: absolut;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Z-Index: 2;
}
.item.num8::nach{
 Inhalt: '8';
 Farbe: #34495e;
 Position: absolut;
 oben: 0;
 unten: 0;
 links: 0;
 rechts:0;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
 Z-Index: 2;
}
.item.boom{
 Hintergrundbild: URL(../img/boom.png);
 Hintergrundgröße: 60 % 60 %;
 Hintergrundwiederholung: keine Wiederholung;
 Hintergrundposition: Mitte Mitte;
}
.item::vor{
 Position: absolut;
 Inhalt: '';
 oben: 0,5px;
 links: 0,5px;
 unten: 0,5px;
 rechts: 0,5px;
 Hintergrundfarbe: grau;
 Z-Index: 3;
}
.item.click::before{
 Inhalt: keiner;
}
.item:hover{
 Umriss: 1px durchgezogen #2c3e50;
}

#Speisekarte {
 Rahmen unten: 1px durchgehend hellgrau;
 Position: absolut;
 oben: 0;
 links: 0;
 rechts: 0;
 Höhe: 30px;
 Anzeige: Flex;
 Hintergrundfarbe: weiß;
 Z-Index: 10;
}
.mitem{
 biegen: 1;
 Anzeige: Flex;
 Inhalt ausrichten: zentriert;
 Elemente ausrichten: zentrieren;
}
.sl{
 Rand: keiner;
 Rahmen unten: 1px durchgehend hellgrau;
 Gliederung: keine;
 Breite: 60%;
 Höhe: 80%;
}
.btn{
 Rand: keiner;
 Rand: 1px durchgehend hellgrau;
 Gliederung: keine;
 Breite: 60%;
 Höhe: 80%;
 Hintergrundfarbe: transparent;
 Cursor: Zeiger;
}
.mitem *:hover{
 Hintergrundfarbe: hellgrau;
}

```Javascript
$(Dokument).bereit(Funktion() {
 var x = 10; //x-Achsevar y = 10; //y-Achsevar c = 10; //Anzahl der Bombenvar boom = []; //Koordinaten für die Bombenerzeugungvar $menu = $("#menu");
 var $box = $("#box");




 //Synchronisierte Parameter $("#x").change(function() {
  x = parseInt($(this).val());
  console.log(x);
 })
 $("#y").ändern(Funktion() {
  y = parseInt($(this).val());
 })
 $("#c").ändern(Funktion() {
  c = parseInt($(this).val());
 })
 $(document).on('klicken', '#box .item', function() {
  $(this).addClass("klicken");
 })
 $("#pro").klick(function() {
  konsole.log(x,y,c)
  ziehen();
  draw(); //Booms zeichnen(); //Bombenparameter generieren drawbooms(); //Bombe zeichnen drewum(); //Alle Blöcke durchlaufen und Eingabeaufforderungen generieren })
 draw();//Zeichne booms();//Generiere Bombenparameter drawbooms();//Zeichne Bombe drewum();//Durchlaufe alle Blöcke und generiere Eingabeaufforderungen function draw() { //Zeichne Bild $box.html('');
  für (var a = 0; a < x; a++) {
   var $row = $("<div class='row'></div>");
   für (var b = 0; b < y; b++) {
    var $item = $("<div class='item' data-x='"+a+"' data-y='"+b+"'></div>");
    $item.appendTo($row);
   }
   $row.anhängenAn($box);
  }
 }
 Funktion drewum(){
  für(var a = 0;a<x;a++){
   für(var b = 0;b<y;b++){
    var pos = {x:a,y:b};
    //Durchsuchen Sie die Situation um diese Koordinate, um zu sehen, wie viele Bomben es gibt. var s = getscore(pos);
    wenn(s!=0&&!$dom(pos).hasClass('boom')){
     $dom(pos).addClass('num'+s);
    }
   }
  }
 }
 Funktion 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))
  wenn(s1){index++;}
  wenn(s2){index++;}
  wenn(s3){index++;}
  wenn(s4){index++;}
  wenn(s5){index++;}
  wenn(s6){index++;}
  wenn(s7){index++;}
  wenn(s8){index++;}
  Rückgabeindex;
 }
 Funktion drawbooms(){
  boom.fürJeden(item=>{
   $dom(item).addClass('boom');
  })
 }
 function booms(){//Bombenparameter zufällig generieren var arr = [];
  während(arr.Länge<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);
   wenn(!temp){
    arr.push(pos);
   }
  }
  Ausleger = arr;
 }
 Funktion $dom(pos){
  zurückgeben $("[data-x='"+pos.x+"'][data-y='"+pos.y+"']");
 }
})