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

Detailliertes Tutorial zum Kompilieren und Installieren von mysql8.0.29 in der LNMP-Umgebung von CentOS8

1. Voraussetzungen Da ich es schon mehrmals insta...

Lösungen für MySQL-Batch-Insert- und eindeutige Indexprobleme

MySQL-Batch-Einfügeproblem Da bei der Entwicklung...

Detaillierte Erläuterung des automatischen Formatierungszeilenumbruchs von Vue Save

Ich habe online nach vielen Möglichkeiten gesucht...

So verpacken Sie das Docker-Image, übertragen es auf den Remote-Server und stellen es auf k8s bereit

Inhaltsverzeichnis 1. Docker-Datei 2. POM-Konfigu...

Aufbau einer Zookeeper-Standalone-Umgebung und einer Clusterumgebung

1. Aufbau einer Einzelmaschinenumgebung# 1.1 Heru...

In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)

Mit dem obigen Artikel habe ich meine Einführung i...

HTML verwendet Laufschrift, um Text nach links und rechts scrollen zu lassen

Code kopieren Der Code lautet wie folgt: <KÖRP...

Verwenden Sie personalisierte Suchmaschinen, um die personalisierten Informationen zu finden, die Sie benötigen

Viele Menschen leben heute im Internet und die Suc...

Ubuntu 20.04 setzt eine statische IP-Adresse (einschließlich verschiedener Versionen)

Da Ubuntu 20.04 das Netzwerk über Netplan verwalt...

HTML/CSS-Grundlagen - Einige Vorsichtsmaßnahmen beim Schreiben von HTML-Code (unbedingt lesen)

Die Warnhinweise in diesem Artikel haben nichts m...

Detaillierte Erklärung der Unterschiede zwischen px-, em-, rem-, %, vw- und vh-Einheiten in CSS

1. px px ist die Abkürzung für Pixel, eine relati...

HTML-Tipps, um Ihren Code semantisch zu gestalten

HTML-Semantik scheint ein alltägliches Problem zu...

Ein Artikel zum Verständnis von Operatoren in ECMAScript

Inhaltsverzeichnis Unäre Operatoren Boolesche Ope...

Tutorial: Nginx-Reverse-Proxy-Konfiguration zum Entfernen von Präfixen

Wenn Sie nginx als Reverse-Proxy verwenden, könne...

MySQL 8.0-Installationstutorial unter Linux

Dieser Artikel beschreibt Ihnen, wie Sie MySQL 8....