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

In diesem Artikel wird der dritte Artikel zur Verwendung von JQuery-Plugins zur Implementierung des Minesweeper-Spiels zu Ihrer Information veröffentlicht. Der spezifische Inhalt ist wie folgt

Fertig, der Effekt fühlt sich gut an, aber es ist leicht zu sterben, wenn man Pech hat

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.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%;
}
.item.warnen{
 Rand: 1px durchgehend rot;
}
.btn{
 Rand: keiner;
 Rand: 1px durchgehend hellgrau;
 Gliederung: keine;
 Breite: 60%;
 Höhe: 80%;
 Hintergrundfarbe: transparent;
 Cursor: Zeiger;
}
.mitem *:hover{
 Hintergrundfarbe: hellgrau;
}

html:

<!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="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>
      <optionswert="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>
     </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>

javascript - Argumente:

$(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");
  var pos = {
   x:parseInt($(this).attr("data-x")),
   y:parseInt($(diese).attr("data-y"))
  }
  wenn($(this).hasClass('boom')){
   $(".item").addClass('klicken')
   $(this).addClass('warnen');
  }
  nach Klick(pos);
 })
 $("#pro").klick(function() {
  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);
  }
 }
 function afterclick(p){//Gibt alle leeren Blöcke frei und zeigt alle leeren angrenzenden Eingabeaufforderungen auf der ersten Ebene an 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.fürJeden(item=>{
   wenn($dom(item).hasClass('nonum')&&!$dom(item).hasClass('click')&&!$dom(item).hasClass('boom')){
    $dom(Element).click();
   }
  })
 }
 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);
     $dom(pos).addClass('num');
    }anders{
     $dom(pos).addClass('nonum');
    }
   }
  }
 }
 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){
  var dom = $("[data-x='"+pos.x+"'][data-y='"+pos.y+"']");
  wenn(dom.length!=0){
   Rückkehrdom
  }anders{
   zurückgeben $("<div></div>");
  }
 }
})

Erklärung der Ideen

Es ist jedenfalls nicht schwer. Entscheidend ist, dass Sie ein allgemeines Verständnis für die Logik dessen haben, was Sie tun möchten.
Minesweeper besteht darin, Minen zufällig auf einem x*y-Koordinatensystem zu platzieren und dann jeden Koordinatenpunkt zu durchlaufen, um die Gesamtzahl der Bomben um ihn herum zu bestimmen. Sie können wissen, dass die Zahl zwischen 0 und 8 liegt. Auf diese Weise wird die
Das Gameplay besteht nur aus Klicken und einer zusätzlichen Aktion. Wenn Sie auf ein leeres Feld klicken, leuchtet das leere Feld darum herum automatisch auf. Ich habe diesen Effekt auch gemacht. Der Anfang ist nur ein mühsames Urteil.
Schauen Sie sich den JS-Code genau an, er wird sowieso vollständig hochgeladen.

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: