Natives JS implementiert ein Minesweeper-Spiel mit benutzerdefiniertem Schwierigkeitsgrad

In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung des Minesweeper-Spiels als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Spielfunktionen:

1. Es gibt vier Schwierigkeitsstufen
2. Sie können Ihren eigenen Schwierigkeitsgrad festlegen

1. HTML-bezogener Code

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <Titel>Minensuchboot</Titel>
 <script src="js/mine.js"></script>
 <link rel="stylesheet" href="./css/mine.css" >
</Kopf>
<!-- 
Bedarfsanalyse:
 1. Spielbereich:
  9*9-Bereich 2. Felder können geöffnet und markiert werden. Linksklick zum Öffnen, Zahlen werden angezeigt, das sind die Anzahl der Minen in den umliegenden Feldern. Rechtsklick zum Markieren 3. Minen werden zufällig verteilt 4. Wenn Sie auf eine Mine treten, endet das Spiel und alle Minen werden angezeigt 5. Kette zum Öffnen großer leerer Felder 6. Anzahl der verbleibenden Minen und Timer 7. Siegbedingungen des Spiels. Alle Felder außer den Minen werden geöffnet, dann ist das Spiel gewonnen. Informationen, die in einem Feld enthalten sind:
  Koordinate xy
  Ist das eine Mine? Anzahl der Minen in der Umgebung = 9
  Das zweidimensionale Array speichert die Anzahl der umliegenden Minen -->
 
<Text>
 <div Klasse="Ebene">
 <button type="button" name="button" class="choice-level">Benutzerdefiniert</button>
 <button type="button" name="button" class="choice-level">Grundstufe</button>
 <button type="button" name="button" class="choice-level">Mittelstufe</button>
 <button type="button" name="button" class="choice-level">Erweitert</button>
 <button type="button" name="button" class="choice-level">Teufelslevel</button>
 <button type="button" name="button" class="restart">Neustart</button>
 </div>
 <div Klasse="gameBox"></div>
 <div Klasse="info">
 <p>Anzahl der verbleibenden Minen:
  <span class="Rückstand"></span>
 </p>
 <p>
  ZEIT:
  <span class="tick"></span>S
 </p>
 
 </div>
</body>
 
 
</html>

2. CSS-Stil

*{
 Rand: 0;
 Polsterung: 0;
}
.gameBox{
 Rand oben: 30px;
}
Körper{
 Schriftgröße: 0;
}
ul{
 Listenstil: keiner;
 Textausrichtung: zentriert;
 Überlauf: versteckt;
}
.col{
 Anzeige: Inline-Block;
 Breite: 22px;
 Höhe: 22px;
 Zeilenhöhe: 22px;
 Hintergrundfarbe: rgba(32, 226, 255, 0,4);
 Rand: 1px durchgezogenes RGB (129, 129, 129);
 Schriftgröße: 16px;
 Rand: 1,5px;
 vertikale Ausrichtung: oben;
 Position: relativ;
}
.col:hover{
 Hintergrundfarbe: #0af;
}
.col span{
 Cursor: Standard;
}
.verstecken{
 Anzeige: keine;
}
.Boom{
 Hintergrund: URL("../img/boom.svg") keine Wiederholung 2,5px 2px;
 Hintergrundgröße: 18px 18px;
}
.num-1{
 Farbe: RGB (8, 153, 235);
}
.num-2{
 Farbe: RGB (255, 45, 178);
}
.num-3{
 Farbe: #16a085;
}
.num-4{
 Farbe: #8e44ad;
}
.num-5{
 Farbe: RGB (255, 167, 45);
}
.num-6{
 Farbe: RGB (8, 126, 176);
}
.num-7{
 Farbe: #e67e22;
}
.num-8{
 Farbe: #c0392b;
}
.img-flag{
 Breite: 18px;
 Höhe: 18px;
 Position: absolut;
 oben: 3px;
 links: 3px;
}
.Ebene{
 Rand oben: 30px;
 Schriftgröße: 20px;
 Textausrichtung: zentriert;
}
.level-Schaltfläche{
 Polsterung: 5px 8px;
 Hintergrundfarbe: RGB (67, 183, 189);
 Rand: keiner;
 Gliederung: keine;
 Rahmenradius: 3px;
 Cursor: Zeiger;
 Farbe: #fff;
}
.level-Schaltfläche:hover{
 Hintergrundfarbe: rgb(23, 132, 138);
}
.Info{
 Rand oben: 30px;
 Schriftgröße: 16px;
 Textausrichtung: zentriert;
}
.info p{
 Anzeige: Inline-Block;
 Breite: 130px;
 Rand: 0 automatisch;
}
.info p span{
 Farbe: RGB (67, 183, 189);
}

3.js-Code

fenster.onload = funktion() {
 var Zeile = 4;
 var Spalte = 4;
 varnum = 1;
 // Stellen Sie fest, dass Sie nicht gewinnen können, wenn Sie auf eine Landmine getreten sind. var gg = false;
 // Kartenfunktion generieren mineMap(r, c, num) {
 //Definitionszeile var map = [];
 //Gebe die Anzahl der Zeilen an und erzeuge ein zweidimensionales Array für (var i = 0; i < r; i++) {
  map[i] = neues Array()
 }
 // Zuweisung für (var i = 0; i < map.length; i++) {
  für (var j = 0; j < c; j++) {
  // //Anzahl der Minen um map[i][j] = 0;
  }
 }
 var plus = Funktion(Array, x, y) {
  wenn (x >= 0 && x < r && y >= 0 && y < c) {
  wenn (Array[x][y] !== 9) {
   array[x][y]++
  }
  }
 }
 für (var i = 0; i < num; i++) {
  var x = Math.floor(Math.random() * r)
  var y = Math.floor(Math.random() * c)
  wenn (map[x][y] != 9) {
  Karte[x][y] = 9
   //6 hoch und runter + 1
  für (var j = -1; j < 2; j++) {
   //Drei plus (Map, x – 1, y + j)
   //Die nächsten drei plus (map, x + 1, y + j)
  }
  //2 links und rechts +1
  plus(Karte, x, y - 1)
  plus(Karte, x, y + 1)
  } anders {
  //Num++ neu randomisieren
  }
 }
 Rückfahrkarte;
 }
 //Schreibe zuerst die Menge der x-Achse in ul, dann schreibe die Attribute der y-Achse in li
 Funktion writeHtml(map) {
 //Box abrufen var gameBox = document.querySelector(".gameBox");
 //Deklarieren Sie eine leere Zeichenfolge, um die generierten ul und li zu speichern
 var gridHTML = "";
 für (var i = 0; i < map.length; i++) {
  gridHTML += '<ul Klasse = "Zeile" data-x="' + i + '">';
  //Li generieren
  für (var j = 0; j < map[0].length; j++) {
  var m = Karte[i][j]
  wenn (m == 0) {
   m = "";
  }
  gridHTML += "<li class='col' data-y=" + j + ">" +
   "<span class='hide num-" + m + "'>" + m + "</span>" +
   "<img src='img/flag.svg' class='img-flag hide'>" +
   "</li>"
  }
  gridHTML += '</ul>'
  gameBox.innerHTML = gridHTML;
 }
 }
 
 //Ereignisse an das Raster binden, Rechtsklick auf die Digitalmine-Funktion show() {
 // Holen Sie sich die Zeile ul
 var Zeilen = document.querySelectorAll(".row");
 // Alle ul durchlaufen
 für (var i = 0; i < Zeilen.Länge; i++) {
  var Element = Zeilen[i];
  // Klickereignis hinzufügen element.onclick = function(event) {
   //Aktuell angeklicktes Element var el = event.target;
   // Bestimmen Sie, ob es li ist
   wenn (el.nodeName != "LI") {
   zurückkehren;
   }
   //todo bestimmt, ob es geöffnet und markiert ist if (el.style.background == "white" || !el.children[1].classList.contains("hide")) {
   zurückkehren;
   }
   // Inhalt des Span-Tags abrufen var mineNum = el.children[0].innerHTML;
   wenn (mineNum !== "9" und el.style.background !== "weiß") {
   // Leere Kette öffnen if (mineNum == "") {
    var x = parseInt(el.parentNode.dataset.x);
    var y = parseInt(el.dataset.y);
    zeigeKeineMine(x, y);
   }
   // li-Hintergrund wird weiß; span zeigt el.style.background = "weiß" an;
   el.children[0].style.display = "inline";
   //Anzahl der offenen Minen bestimmen clearMineNum++;
   // Siegfunktion judgeVictory()
 
   } sonst wenn (mineNum == "9") {
   // Lösche den Siegestimer clearInterval(stopTime);
   // li fügt Klassennamen hinzu el.classList.add("boom");
   alert("Du bist so ein Dreckskerl!")
   gg = wahr;
   // Alle Minen anzeigen, alle Li abrufen
   var all = document.querySelectorAll(".col");
   // Alle Minen platzieren var ff = [];
   var allnum = 0;
   // Durchquere alle li
   für (var i = 0; i < all.length; i++) {
    wenn (alle[i].kinder[0].innerHTML == "9") {
    // Lei weist dem Array Werte zu ff[allnum] = all[i];
    allenum++;
    }
   }
   // Stellen Sie einen Timer ein, um die Minen nacheinander zu öffnen. allnum = 0;
   var stop = Intervall setzen(Funktion() {
    ff[allnum].classList.add("boom")
    allenum++;
    //Bestimmen Sie die Endbedingung, wenn (allnum == ff.length) {
    // Den Timer löschen clearInterval(stop);
    }
   }, 30)
 
   }
  }
  // Rechtsklick um eine Mine zu markieren element.oncontextmenu = function(event) {
  // Rechtsklickmenü verhindern event.preventDefault();
  // Den aktuell angeklickten Knoten abrufen var el = event.target;
  // Bestimmen Sie, ob (el.parentNode.nodeName == "LI") {
   el = el.übergeordneter Knoten;
  }
  wenn (el.nodeName != "LI") {
   zurückkehren;
  }
  // Bild abrufen
  var classList = el.children[1].classList;
  // Verbleibende Minennummer var remainder = document.querySelector(".residue");
  var mineNum = parseInt(residue.innerHTML);
  // Wenn keine Flagge vorhanden ist und nicht darauf geklickt wurde, können Sie eine Flagge einfügen if (classList.contains("hide") && el.style.background != "white") {
   // Verstecktes entfernen classList.remove("hide");
   // Holen Sie sich die Minennummer mineNum--;
  } sonst wenn (el.style.background != "weiß") {
   classList.add("ausblenden");
   // Bestimme die Anzahl der Minen if (mineNum < num) {
   meineNum++;
   }
  }
  // Verbleibende Minennummer remainder.innerHTML = mineNum;
  }
 }
 }
 
 Funktion RichterSieg() {
 //Spielsieg if (clearMineNum === (row * col - num)) {
  //Erstellen Sie eine kleine Animationvar all = document.querySelectorAll(".col");
  var alleNum = 0;
  var stop = Intervall setzen(Funktion() {
  var r = Math.floor(Math.random() * 256)
  var g = Math.floor(Math.random() * 256)
  var b = Math.floor(Math.random() * 256)
  alle[alleNummer].style.background = "rgba(" + r + "," + g + "," + b + ",0.6)";
  //Verstecke sowohl die Flagge als auch den Bereich all[allNum].children[0].style.display = "none"
  alle[alleAnzahl].Kinder[1].Stil.Anzeige = "keine"
  alleNum++
  wenn (alleNum === alle.Länge) {
   Intervall löschen(Stopp)
   wenn (!gg) {
   alert("Viel Glück, lass uns heute Abend Hühnchen essen")
   init(Zeile, Spalte, Zahl)
   }
  }
  }, 20)
 }
 }
 //Leerzeichen automatisch öffnen function showNoMine(x, y) {
 für (var i = -1; i <= 1; i++) {
  wenn (x + i >= 0 und x + i < Zeile) {
  // Aktuelle Zeile abrufen var rowElement = document.querySelectorAll(".row")[x + i];
  für (var j = -1; j <= 1; j++) {
   wenn (y + j >= 0 und y + j < Spalte) {
   // Aktuelle Zelle abrufen var el = rowElement.children[y + j]
    //Automatisch öffnen Das Raster muss ungeöffnet sein if (el.style.background != "white") {
    el.style.background = "weiß"
    el.children[0].style.display = "inline"
    //Öffnen Sie die Anzahl der Quadrate + 1
    clearMineNum++
    //Beurteilen, ob das Spiel gewonnen ist judgeVictory(clearMineNum)
 
    wenn (el.children[0].innerText === "") {
    zeigeKeineMine(x + i, y + j)
    }
   }
   }
  }
  }
  // wenn (x + i >= 0 und x + i < Zeile) {
  // // Aktuelle Zeile abrufen // var rowElement = document.querySelectorAll(".row")[x + i];
  // für (var j = -1; j <= 1; j++ und y + j < col) {
  // // Aktuelle Zelle abrufen // var el = rowElement.children[y + j];
  // wenn (el.style.background !== "weiß") {
  // el.style.background = "weiß";
  // el.children[0].style.display = "inline";
  // // Die Anzahl der geöffneten Gitter erhöht sich um 1
  // MineNum löschen++;
  // //Beurteilen, ob das Spiel gewonnen ist// judgeVictory(clearMineNum);
  // // Bestimme, ob das umgebende Gitter leer ist// if (el.children[0].innerHTML === "") {
  // zeigeKeineMine(x + i, y + j)
  // }
  // }
  // }
  // }
 }
 
 }
 //Initialisierungsmethode var stopTime;
 
 Funktion init(Zeile, Spalte, Num) {
 //Dateninitialisierung clearMineNum = 0
 gg = falsch;
 // Originalkarte löschen und neue Karte generieren var box = document.querySelector(".gameBox")
 box.innerHTML = "";
 var map = mineMap(Zeile, Spalte, Nummer);
 //Eine neue Karte erstellen writeHtml(map);
 zeigen()
  //Schreibe die Anzahl der Minen in HTML var remainder = document.querySelector(".residue")
 Rückstand.innerHTML = Nummer
  // Zeitpunkt abrufen var tick = document.querySelector(".tick");
 var i = 0;
 // Initialisieren tick.innerHTML = i;
 // Zeit löschen clearInterval(stopTime);
 // Timer Stoppzeit = Intervall setzen(Funktion() {
  tick.innerHTML = ++i
 }, 1000)
 }
 // Zurücksetzen var restart = document.querySelector(".restart");
 Neustart.onclick = Funktion(Ereignis) {
  //Stoppen Sie das Sprudeln event.stopPropagation()
  init(Zeile, Spalte, Zahl)
 }
 // Benutzerdefinierte Variable level = document.querySelector(".level")
 level.onclick = Funktion(Ereignis) {
 var el = Ereignis.Ziel;
 Schalter (el.innerHTML) {
  Fall "Primär":
  Reihe = 9;
  Spalte = 9;
  Zahl = 10;
  init(Zeile, Spalte, Zahl)
  brechen;
  Fall "Mittelstufe":
  Reihe = 16;
  Spalte = 16;
  Zahl = 40;
  init(Zeile, Spalte, Zahl)
  brechen;
  Fall „Erweitert“:
  Reihe = 16;
  Spalte = 30;
  Zahl = 479;
  init(Zeile, Spalte, Zahl)
  brechen;
  Fall "Teufelsebene":
  Reihe = 40;
  Spalte = 50;
  Zahl = 300;
  init(Zeile, Spalte, Zahl)
  brechen;
  Fall "benutzerdefiniert":
  row = prompt("Bitte geben Sie die Anzahl der Spalten ein!");
  col = prompt("Bitte geben Sie die Anzahl der Zeilen ein!");
  num = prompt("Bitte geben Sie die gewünschte Anzahl Minen ein (bitte sorgfältig auswählen)");
  init(Zeile, Spalte, Zahl);
  brechen;
  Standard:
  Reihe = 9;
  Spalte = 9;
  Zahl = 10;
  init(Zeile, Spalte, Zahl)
  brechen;
 }
 }
 init(Zeile, Spalte, Zahl)
}

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:

Implementierung eines einfachen Minesweeper-Spiels basierend auf JavaScript
js+canvas implementiert ein einfaches Minesweeper-Spiel
Implementierung eines Minesweeper-Spielcodebeispiels mit Javascript
HTML+JavaScript zur Implementierung des Minesweeper-Spiels
JavaScript-Version des klassischen Spiels Minesweeper, vollständiges Beispiel [mit Demo-Quellcode-Download]
Teilen Sie Ihr eigenes Minesweeper-Spiel, das mit JS erstellt wurde
Implementierung des klassischen Minesweeper-Spiels mit reinem Javascript
JavaScript macht Windows zum klassischen Minesweeper-Spiel
Javascript Minesweeper Spiel
js implementiert das klassische Minesweeper-Spiel

<<: Das Shellskript zählt regelmäßig den PV von access.log unter Nginx und sendet ihn an die API und speichert ihn in der Datenbank

>>: 64-Bit-CentOs7-Quellcodeinstallation MySQL-5.6.35 Prozessfreigabe