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

Dieser Artikel teilt den spezifischen Code des ersten Artikels des Minesweeper-Spiels mit dem JQuery-Plug-In zu Ihrer Information. Der spezifische Inhalt ist wie folgt

Baue ein Minensuchboot

Teil 1 : Vervollständigen Sie die Zeichen- und Klickaktionen

Die Wirkung ist wie folgt

Codeabschnitt

* {
 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::vor{
 Position: absolut;
 Inhalt: '';
 oben: 0,5px;
 links: 0,5px;
 unten: 0,5px;
 rechts: 0,5px;
 Hintergrundfarbe: grau;
}
.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ß;
}
.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;
}

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Bauen Sie ein Minensuchboot</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/yqlsl.js"></script>
  <link href="css/yqlsl.css" rel="externes Nofollow" rel="stylesheet" type="text/css" />
 </Kopf>
 <Text>
  <div id="div">
   <div id="box">
    
   </div>
   <div id="Menü">
    <div Klasse="mitem">
     <Klasse auswählen="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>
      <optionswert="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
     </Auswählen>
    </div>
    <div Klasse="mitem">
     <Klasse auswählen="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>
      <optionswert="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
     </Auswählen>
    </div>
    <div Klasse="mitem">
     <Klasse auswählen="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>
     </Auswählen>
    </div>
    <div Klasse="mitem">
     <button type="button" class="btn" id="pro">Generieren</button>
    </div>
   </div>
  </div>
 </body>
</html>

$(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();
 })
 ziehen();
 function draw() { //Bild zeichnen $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'></div>");
    $item.appendTo($row);
   }
   $row.anhängenAn($box);
  }
 }
})

Erklärung der Ideen

Das erste ist die Generierung von Parametern und das Zeichnen von Inhalten, was einfach durchzuführen ist.
Dann müssen Sie die Koordinaten jedes Blocks markieren, um nachfolgende Berechnungen und den direkten Betrieb zu erleichtern.
Dann wird der Klickeffekt durch die Pseudoklasse erreicht. Wenn kein Klick erfolgt, generiert die Pseudoklasse eine Overlay-Maske, die nach dem Klick entfernt werden kann.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: