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

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:
  • jQuery-Plugin zur Implementierung des Minesweeper-Spiels (3)
  • jQuery-Plugin zur Implementierung des Minesweeper-Spiels (2)
  • jQuery implementiert das Minesweeper-Spiel

<<:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.6.22

>>:  So installieren Sie PostgreSQL11 auf CentOS7

Artikel empfehlen

Beispielcode zum Implementieren mehrerer Zeilenauslassungen mithilfe von drei erweiterten CSS-Methoden

Vorwort Dies ist eine alte Forderung, aber es gib...

Sollte ich zum Entfernen von Duplikaten in MySQL „distinct“ oder „group by“ verwenden?

Vorwort Zum Leistungsvergleich zwischen „group by...

So richten Sie Windows Server 2019 ein (mit Bildern und Text)

1. Installation von Windows Server 2019 Installie...

Tipps zum Importieren von CSV-, Excel- oder SQL-Dateien in MySQL

1. CSV-Datei importieren Verwenden Sie den folgen...

So verwenden Sie gdb zum Debuggen von Kerndateien in Linux

1.core-Datei Wenn während der Programmausführung ...

Ein praktischer Bericht über den Umgang mit den in Linux-Servern implantierten Mining-Viren ddgs und qW3xT.2

Vorwort Angesichts der verrückten Spekulationen u...

Lösung für das Problem „/bin/sh: pip: Befehl nicht gefunden“ beim Erstellen der Docker-Datei

Der Inhalt des geschriebenen Dockerfiles ist: VON...

Analysieren Sie mehrere gängige Lösungen für MySQL-Ausnahmen

Inhaltsverzeichnis Vorwort 1. Der vom Code konfig...

Verwenden Sie die mail()-Funktion von PHP zum Senden von E-Mails

Senden von E-Mails mit der Mail-Funktion von PHP ...

MySQLs Methode zum Umgang mit doppelten Daten (Verhindern und Löschen)

Einige MySQL-Tabellen können doppelte Datensätze ...

So vergessen Sie das Root-Passwort in Mysql8.0.13 unter Windows 10

1. Stoppen Sie zuerst den MySQL-Dienst Öffnen Sie...

Vue - benutzerdefinierte gekapselte Schaltflächenkomponente

Der benutzerdefinierte Kapselungscode der Vue-But...

Implementierung der Docker-Batch-Container-Orchestrierung

Einführung Der Dockerfile-Build-Ausführungsvorgan...

Eine detaillierte Einführung in die Tomcat-Verzeichnisstruktur

Öffnen Sie das dekomprimierte Verzeichnis von Tom...

MySQL-Gruppierungsmethode für die Gruppierungssequenz einzelner Wörter und die Gruppierung mehrerer Felder

Ich habe hier eine Warentabelle erstellt. Schauen...