Zusammenfassung des in JS implementierten Minesweeping-Projekts

Zusammenfassung des in JS implementierten Minesweeping-Projekts

Dieser Artikel enthält die Zusammenfassung des JS-Minesweeping-Projekts zu Ihrer Information. Der spezifische Inhalt ist wie folgt

Projektanzeigebild

Projektvorbereitung

In ähnlicher Weise bereiten wir zunächst drei Ordner und die Datei index.html im Stammverzeichnis vor

Dann gibt es zwei Bilder (Minen und Flaggen)

Dann die HTML-Struktur

html

Zunächst wird das äußerste Div des Spielinhaltsbereichs Mine genannt.

<div id="mein">
</div>

Als Nächstes kommen die oberen vier Schaltflächen im Inhaltsbereich des Spiels. Wir verwenden vier Schaltflächen-Tags, um sie darzustellen, und umschließen sie mit einem Div.

Und geben Sie der primären Schaltfläche einen anfänglich ausgewählten Stil

<div Klasse="Ebene">
    <button class="active">Primär</button>
    <button>Mittelstufe</button>
    <button>Erweitert</button>
    <button>Neustart</button>
</div>

Als nächstes kommt der Spielbereich, das Minenfeld.

<div Klasse="SpielBox">
</div>

Der letzte ist der Eingabeaufforderungsbereich

<div Klasse="info">
    Verbleibende Minen: <span class="mineNum"></span>
    <br>
    <span class="tips">Linksklick zum Minenräumen, Rechtsklick zum Aufstellen einer Flagge, erneuter Rechtsklick zum Entfernen der Flagge</span>
</div>

Dann integrieren wir schließlich den endgültigen Code wie folgt

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <Titel>JS Minesweeper</Titel>
    <link rel="stylesheet" href="CSS/index.css" >
    <link rel="Symbol" href="favicon.ico" >
</Kopf>

<Text>
    <div id="mein">
        <div Klasse="Ebene">
            <button class="active">Primär</button>
            <button>Mittelstufe</button>
            <button>Erweitert</button>
            <button>Neustart</button>
        </div>
        <div Klasse="SpielBox">
        </div>
        <div Klasse="info">
            Verbleibende Minen: <span class="mineNum"></span>
            <br>
            <span class="tips">Linksklick zum Minenräumen, Rechtsklick zum Aufstellen einer Flagge, erneuter Rechtsklick zum Entfernen der Flagge</span>
        </div>
    </div>
    <script src="JS/index.js"></script>
</body>

</html>

CSS

Zunächst zentrieren wir den Hauptinhalt im äußersten Bereich von Mine.

#meins {
    Rand: 50px automatisch;
}

Fügen Sie danach Stile zum Level-Div und dem darin enthaltenen Button hinzu

Und fügen Sie den standardmäßigen aktiven Stil hinzu

.Ebene {
    Textausrichtung: zentriert;
    Rand unten: 10px;
}

.level-Schaltfläche {
    Polsterung: 5px 15px;
    Hintergrundfarbe: #02a4ad;
    Rand: keiner;
    Farbe: #fff;
    Rahmenradius: 3px;
    Gliederung: keine;
    Cursor: Zeiger;
}

.level button.aktiv {
    Hintergrundfarbe: #00abff;
}

Danach haben wir das Table-Tag und das TD-Tag neu definiert. Der Hauptspielbereich unseres Minesweepers wird über das Table-Tag implementiert.

Tisch {
    Rahmenabstand: 1px;
    Hintergrundfarbe: #929196;
    Rand: 0 automatisch;
}

td {
    Polsterung: 0;
    Breite: 20px;
    Höhe: 20px;
    Hintergrundfarbe: #ccc;
    Rand: 2px durchgezogen;
    Rahmenfarbe: #fff #a1a1a1 #a1a1a1 #fff;
    Textausrichtung: zentriert;
    Zeilenhöhe: 20px;
    Schriftstärke: fett;

}

Als nächstes folgt der Stil des Eingabeaufforderungsbereichs

.die Info {
    Rand oben: 10px;
    Textausrichtung: zentriert;
}

.Tipps {
    Farbe: rot;
    Schriftgröße: 16px;
}

Schließlich definieren wir einige Stile vor

Zum Beispiel der Stil unserer Minen und der Stil unserer Schachfiguren

.meins {
    Hintergrund: #d9d9d9 URL (../images/mine.png) keine Wiederholung Mitte;
    Hintergrundgröße: Abdeckung;
}
.flagge {
    Hintergrund: #ccc url(../images/flag.png) keine Wiederholung Mitte;
    Hintergrundgröße: Abdeckung;
}

Schließlich werden im Spiel auf einigen Blöcken Zahlen angezeigt, die die Anzahl der Minen um die Blöcke herum darstellen.

td.null {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
}

td.eins {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #0332fe;
}

td.zwei {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #019f02;
}

td.drei {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #ff2600;
}

td.vier {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #93208f;
}

td.fünf {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #ff7f29;
}

td.sechs {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #ff3fff;
}

td.sieben {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #3fffbf;
}

td.acht {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #22ee0f;
}

Zusammenfassend lässt sich also sagen, dass unser vollständiger CSS-Code nach der Integration des CSS-Codes wie folgt aussieht:

#meins {
    Rand: 50px automatisch;

}

.Ebene {
    Textausrichtung: zentriert;
    Rand unten: 10px;
}

.level-Schaltfläche {
    Polsterung: 5px 15px;
    Hintergrundfarbe: #02a4ad;
    Rand: keiner;
    Farbe: #fff;
    Rahmenradius: 3px;
    Gliederung: keine;
    Cursor: Zeiger;
}

.level button.aktiv {
    Hintergrundfarbe: #00abff;
}

Tisch {
    Rahmenabstand: 1px;
    Hintergrundfarbe: #929196;
    Rand: 0 automatisch;
}

td {
    Polsterung: 0;
    Breite: 20px;
    Höhe: 20px;
    Hintergrundfarbe: #ccc;
    Rand: 2px durchgezogen;
    Rahmenfarbe: #fff #a1a1a1 #a1a1a1 #fff;
    Textausrichtung: zentriert;
    Zeilenhöhe: 20px;
    Schriftstärke: fett;

}

.Tipps {
    Farbe: rot;
    Schriftgröße: 16px;
}

.meins {
    Hintergrund: #d9d9d9 URL (../images/mine.png) keine Wiederholung Mitte;
    Hintergrundgröße: Abdeckung;
}

.flagge {
    Hintergrund: #ccc url(../images/flag.png) keine Wiederholung Mitte;
    Hintergrundgröße: Abdeckung;
}

.die Info {
    Rand oben: 10px;
    Textausrichtung: zentriert;
}


td.null {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
}

td.eins {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #0332fe;
}

td.zwei {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #019f02;
}

td.drei {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #ff2600;
}

td.vier {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #93208f;
}

td.fünf {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #ff7f29;
}

td.sechs {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #ff3fff;
}

td.sieben {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #3fffbf;
}

td.acht {
    Hintergrundfarbe: #d9d9d9;
    Rahmenfarbe: #d9d9d9;
    Farbe: #22ee0f;
}

JavaScript

Ideen

Dieses Mal werden wir auf der Prototypenkette programmieren

Schreiben wir zunächst den Konstruktor von mir

Minenbauer

Funktion Mine(tr, td, MineNum) {
    this.tr = tr; // tr gibt die Anzahl der Zeilen anthis.td = td; // td gibt die Anzahl der Spalten anthis.mineNum = mineNum; // mineNum gibt die Anzahl der Minen anthis.squares = []; // Speichert die Informationen aller Quadrate. Es ist ein zweidimensionales Array, das in der Reihenfolge von Zeilen und Spalten angeordnet ist, und der Zugriff erfolgt im Zeilen- und Spaltenmodusthis.tds = []; // Speichert den DOM aller Zellen
    this.surplusMine = mineNum; // Anzahl der verbleibenden Minenthis.allRight = false; // Klicken Sie mit der rechten Maustaste auf die markierten roten Flaggen, um zu sehen, ob es sich bei allen um Minen handelt und um festzustellen, ob der Benutzer das Spiel erfolgreich gespielt hatthis.parent = document.querySelector('.gameBox');
}

Generiert eine zufällige Minenplatzierung

Wir haben dem Konstruktor drei Parameter übergeben: die Anzahl der Zeilen, die Anzahl der Spalten und die Anzahl der benötigten Minen. Unsere Idee ist folgende: Unser Spiel wird in einer Tabelle gespielt und die Tabelle hat insgesamt tr*td Quadrate. Dann können wir ein Array der Länge tr*td erstellen und dann dem Array Werte zuweisen, wobei jeder Wert einem Quadrat entspricht, und schließlich das Array mischen und die erste MineNum (die Anzahl der benötigten Minen) herausnehmen. Diese MineNum-Quadrate entsprechen den Quadraten unserer Minen.

Dann schreiben wir unseren js-Code

Mine.prototype.randomNum = Funktion () {
    var square = new Array(this.tr * this.td); // Erzeuge ein leeres Array mit einer Länge gleich der Gesamtzahl der Zellen für (var i = 0; i < square.length; i++) {
        Quadrat[i] = i;
    }
    // Array mischen square.sort(function () {
        gibt 0,5 zurück – Math.random()
    });
    gibt Quadrat.Scheibe zurück (0, this.mineNum);
};

Erstellen einer Tabelle

Obwohl wir die Position der Mine oben entfernt haben, ist dies beim Erstellen des Spielbereichs nicht erforderlich. Wir können die Logik beim Erstellen schreiben. Wenn wir auf das kleine Quadrat klicken, können wir beurteilen, ob es sich um eine Mine handelt oder ob es leer ist.

Daher schreiben wir zuerst den js-Code, um eine Tabelle zu erstellen

Mine.prototype.createDom = Funktion () {
    var Dies = dies;
    var Tabelle = Dokument.createElement('Tabelle');
    für (var i = 0; i < this.tr; i++) { // rowvar domTr = document.createElement('tr');
        dies.tds[i] = [];
        für (var j = 0; j < this.td; j++) { // Spalte var domTd = document.createElement('td');
            this.tds[i][j] = domTd; // Alle erstellten tds zum Array hinzufügen domTd.pos = [i, j]; // Die dem Grid entsprechenden Zeilen und Spalten zum Grid hinzufügen, damit über diesen Wert die entsprechenden Daten aus dem Array abgerufen werden können domTd.onmousedown = function () {
                This.play(event, this); // Das große This bezieht sich auf das Instanzobjekt und das kleine This bezieht sich auf das angeklickte domTd 
            };

            // wenn (diese.Quadrate[i][j].Typ == 'meins') {
            // domTd.className = "meins";
            // }
            // wenn (this.squares[i][j].type == 'Zahl') {
            // domTd.innerHTML = diese.Quadrate[i][j].Wert;
            // }

            domTr.appendChild(domTd);
        }
        Tabelle.AnhängenKind(domTr);
    }
    this.parent.innerHTML = ''; // Vermeiden Sie mehrere Klicks, um mehrere this.parent.appendChild(table); zu erstellen.
};

This.play ist das Urteil, nachdem wir auf den Block geklickt haben, und beurteilt, ob es sich um eine Mine oder ein Feld handelt.

Bevor wir die Play-Funktion schreiben, müssen wir noch eine andere Logik schreiben

Initialisierungsfunktion

Mine.prototype.init = Funktion () {
    // diese.randomNum();
    var rn = this.randomNum(); // Die Position der Mine im Raster var n = -1; // Wird verwendet, um das entsprechende Indexraster zu finden für (var i = 0; i < this.tr; i++) {
        dies.Quadrate[i] = [];
        für (var j = 0; j < this.td; j++) {
            // Um ​​die Daten eines Blocks im Array abzurufen, verwenden Sie für den Zugriff das Zeilen- und Spaltenformat. // Um ​​die Blöcke um einen Block herum zu finden, verwenden Sie für den Zugriff das Koordinatenformat. // Das Zeilen- und Spaltenformat ist das Gegenteil des Koordinatenformats x und y. n++;
            wenn (rn.indexOf(n) != -1) {
                // Wenn diese Bedingung erfüllt ist, bedeutet dies, dass der Index, zu dem die aktuelle Schleife führt, im Minen-Array gefunden wurde, was bedeutet, dass dieser Index einer Mine entspricht this.squares[i][j] = {
                    Typ: 'meins',
                    x: j,
                    y: ich
                };

            } anders {
                diese.Quadrate[i][j] = {
                    Typ: "Zahl",
                    x: j,
                    y: ich,
                    Wert: 0
                };
            }
        }
    }

    dies.updateNum();
    dies.createDom();

    dieses.übergeordnetes.imKontextmenü = Funktion () {
        gibt false zurück;
        // Rechtsklick-Menüereignis verhindern}

    // Anzahl der verbleibenden Minen this.mineNumDom = document.querySelector('.mineNum');
    dies.mineNumDom.innerHTML = dies.surplusMine;
};

getAround()-Funktion

// Finde die acht Gitter um ein Quadrat Mine.prototype.getAround = function (square) {
    var x = Quadrat.x,
        y = Quadrat.y;
    var result = []; //Gibt die Koordinaten des gefundenen Gitters zurück (zweidimensionales Array)
    für (var i = x - 1; i <= x + 1; i++) {
        für (var j = y - 1; j <= y + 1; j++) {
            wenn (i < 0 ||
                j < 0 ||
                i > dies.td - 1 ||
                j > dies.tr - 1 ||
                // Der obige Ausdruck zeigt die Grenze (i == x && j == y) ||
                // Zeigt eine Selbstschleife an this.squares[j][i].type == 'mine'
                // Zeigt eine Schleife zu (umliegenden Gitter-)Minen an (beachten Sie, dass i und j Koordinaten darstellen, während Quadrate Zeilen und Spalten speichern)
            ) {
                weitermachen;
            }
            // Es muss in Form von Zeilen und Spalten zurückgegeben werden, da es zum Abrufen der Daten im Array result.push([j, i]); benötigt wird.
        }
    }
    Ergebnis zurückgeben;
}

Funktion updateNum()

// Alle Zahlen aktualisieren Mine.prototype.updateNum = function () {
    für (var i = 0; i < this.tr; i++) {
        für (var j = 0; j < this.td; j++) {
            // Um ​​die Zahlen um Lei zu aktualisieren, wenn (this.squares[i][j].type == 'number') {
                weitermachen;
            }
            var num = this.getAround(this.squares[i][j]); // Zahlen rund um jede Mine abrufen for (var k = 0; k < num.length; k++) {
                dies.Quadrate[Anzahl[k][0]][Anzahl[k][1]].Wert += 1;
            }
        }
    }
};

Play-Funktion

Mine.prototype.play = Funktion (ev, obj) {
    var Dies = dies;
    if (ev.which == 1 && obj.className != 'flag') { // Die folgende Bedingung gilt für den Benutzer, damit dieser nach einem Rechtsklick nicht klickt // Die linke Taste wurde angeklickt var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        var cl = ['null', 'eins', 'zwei', 'drei', 'vier', 'fünf', 'sechs', 'sieben', 'acht'];
        // cl speichert den Klassennamen

        wenn (aktuellerQuadrattyp == 'Zahl') {
            // Der Benutzer hat auf eine Zahl geklickt. obj.innerHTML = curSquare.value;
            obj.Klassenname = cl[aktuellerQuadratwert.Wert];

            // Auf die Zahl Null geklickt if (curSquare.value == 0) {
                /* 
                    Rekursives Denken: 
                    1. Sich selbst anzeigen 2. Umgebung durchsuchen 1) Umgebung anzeigen (wenn die Werte der Umgebung ungleich Null sind, dann werden sie hier angezeigt und es muss nicht weiter gesucht werden)
                        2) Wenn der Wert Null ist, a. sich selbst anzeigen und b. in der Umgebung suchen (wenn die Werte in der Umgebung nicht Null sind, dann hier anzeigen und nicht weiter suchen)
                                I. Sich selbst anzeigen II. Umgebung finden (wenn die Werte der Umgebung ungleich Null sind, dann hier anzeigen und kein erneutes Suchen nötig)
                                    . . . . . .
                 */

                obj.innerHTML = ''; // Wird als leere Funktion angezeigt getAllZero(square) {
                    var around = This.getAround(square); // N umgebende Quadrate gefunden für (var i = 0; i < around.length; i++) {
                        var x = around[i][0]; // Zeilen var y = around[i][1]; // Spalten This.tds[x][y].className = cl[This.squares[x][y].value];

                        wenn (Diese.Quadrate[x][y].Wert == 0) {
                            // Wenn ein Raster mit einem bestimmten Raster als Mittelpunkt Null ist, dann mit dem Aufruf fortfahren (Rekursion)
                            wenn (!Dies.tds[x][y].check) {
                                // Füge dem entsprechenden td ein Attribut hinzu. Wenn es gefunden wurde, ist der Wert true und es wird beim nächsten Mal nicht erneut gefunden, um Probleme mit dem Funktionsaufrufstapel zu vermeiden. This.tds[x][y].check = true;
                                getAllZero(Dieses.Quadrate[x][y]);
                            }

                        } anders {
                            // Wenn die Werte der vier gefundenen Seiten mit einem bestimmten Raster als Mittelpunkt ungleich Null sind, zeige die Zahl an This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }

                }
                getAllZero(aktuellesQuadrat);
            }

        } anders {
            // Der Benutzer hat auf die Mine geklickt this.gameOver(obj);
        }
    }
    wenn (ev.which == 3) {
        // Der Benutzer hat die rechte Taste gedrückt // Wenn der Rechtsklick eine Zahl ist, kann sie nicht angeklickt werden if (obj.className && obj.className != 'flag') {
            zurückkehren;
        }
        obj.className = obj.className == 'flag' ? '' : 'flag'; // Klasse wechseln wenn (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
            dies.allRight = wahr;
        } anders {
            dies.allRight = falsch;
        }

        wenn (Objekt.Klassenname == 'Flagge') {
            this.mineNumDom.innerHTML = --this.surplusMine;
        } anders {
            dies.mineNumDom.innerHTML = ++diese.surplusMine;
        }

        wenn (this.surplusMine == 0) {
            // Die Anzahl der verbleibenden Minen beträgt 0, was bedeutet, dass der Benutzer alle roten Flaggen markiert hat. Zu diesem Zeitpunkt müssen wir feststellen, ob das Spiel erfolgreich oder vorbei ist, wenn (this.allRight == true) {
                // Diese Bedingung ist erfüllt und zeigt an, dass der Benutzer alle richtigen Warnungen markiert hat („Herzlichen Glückwunsch, Sie haben das Spiel bestanden“);
                für (i = 0; i < this.tr; i++) {
                    für (j = 0; j < this.td; j++) {
                        dies.tds[i][j].onmousedown = null;
                    }
                }

            } anders {
                alert('Spiel fehlgeschlagen');
                dies.gameOver();
            }
        }
    }
}

gameOver-Funktion

Mine.prototype.gameOver = Funktion (clickTd) {
    /* 
        1. Zeige alle Minen 2. Bricht das Klickereignis aller Gitter ab 3. Markiere das angeklickte Gitter rot */
    für (i = 0; i < this.tr; i++) {
        für (j = 0; j < this.td; j++) {
            wenn (diese.Quadrate[i][j].Typ == 'meins') {
                dies.tds[i][j].className = "meins";
            }
            dies.tds[i][j].onmousedown = null;
        }
    }
    wenn (clickTd) {
        clickTd.style.backgroundColor = "#f00";
    }
}

Fügen Sie abschließend noch einige weitere Funktionen hinzu

andere

// Schaltflächenfunktionalität hinzufügen var btns = document.getElementsByTagName('button');
var mine = null; // wird verwendet, um die generierte Instanz zu speichern var ln = 0; // wird verwendet, um den aktuell ausgewählten Status zu verarbeiten var arr = [
    [9, 9, 10],
    [16, 16, 40],
    [28, 28, 99]
]; //Verschiedene Ebenen von Zeilen, Spalten und Minen für (let i = 0; i < btns.length - 1; i++) {
    btns[i].onclick = Funktion () {
        btns[ln].className = '';
        this.className = "aktiv";
        meins = neues Meins(arr[i][0], arr[i][1], arr[i][2]);
        meine.init();
        ln = ich;
    }
}
btns[0].onclick(); // Initialisieren btns[3].onclick = function () {
    für (var i = 0; i < btns.length - 1; i++) {
        wenn (btns[i].className == 'aktiv') {
            btns[i].onclick();
        }
    }
}

js Integrationscode

Funktion Mine(tr, td, MineNum) {
    this.tr = tr; // tr gibt die Anzahl der Zeilen anthis.td = td; // td gibt die Anzahl der Spalten anthis.mineNum = mineNum; // mineNum gibt die Anzahl der Minen anthis.squares = []; // Speichert die Informationen aller Quadrate. Es ist ein zweidimensionales Array, das in der Reihenfolge von Zeilen und Spalten angeordnet ist, und der Zugriff erfolgt im Zeilen- und Spaltenmodusthis.tds = []; // Speichert den DOM aller Zellen
    this.surplusMine = mineNum; // Anzahl der verbleibenden Minenthis.allRight = false; // Klicken Sie mit der rechten Maustaste auf die markierten roten Flaggen, um zu sehen, ob es sich bei allen um Minen handelt und um festzustellen, ob der Benutzer das Spiel erfolgreich gespielt hatthis.parent = document.querySelector('.gameBox');
}

// Generiere n sich nicht wiederholende Zahlen Mine.prototype.randomNum = function () {
    var square = new Array(this.tr * this.td); // Erzeuge ein leeres Array mit einer Länge gleich der Gesamtzahl der Zellen für (var i = 0; i < square.length; i++) {
        Quadrat[i] = i;
    }
    // Array mischen square.sort(function () {
        gibt 0,5 zurück – Math.random()
    });
    gibt Quadrat.Scheibe zurück (0, this.mineNum);
};

// Eine Tabelle erstellen Mine.prototype.createDom = function () {
    var Dies = dies;
    var Tabelle = Dokument.createElement('Tabelle');
    für (var i = 0; i < this.tr; i++) { // rowvar domTr = document.createElement('tr');
        dies.tds[i] = [];
        für (var j = 0; j < this.td; j++) { // Spalte var domTd = document.createElement('td');
            this.tds[i][j] = domTd; // Alle erstellten tds zum Array hinzufügen domTd.pos = [i, j]; // Die dem Grid entsprechenden Zeilen und Spalten zum Grid hinzufügen, damit über diesen Wert die entsprechenden Daten aus dem Array abgerufen werden können domTd.onmousedown = function () {
                This.play(event, this); // Das große This bezieht sich auf das Instanzobjekt und das kleine This bezieht sich auf das angeklickte domTd 
            };

            // wenn (diese.Quadrate[i][j].Typ == 'meins') {
            // domTd.className = "meins";
            // }
            // wenn (this.squares[i][j].type == 'Zahl') {
            // domTd.innerHTML = diese.Quadrate[i][j].Wert;
            // }

            domTr.appendChild(domTd);
        }
        Tabelle.AnhängenKind(domTr);
    }
    this.parent.innerHTML = ''; // Vermeiden Sie mehrere Klicks, um mehrere this.parent.appendChild(table); zu erstellen.
};

Mine.prototype.init = Funktion () {
    // diese.randomNum();
    var rn = this.randomNum(); // Die Position der Mine im Raster var n = -1; // Wird verwendet, um das entsprechende Indexraster zu finden für (var i = 0; i < this.tr; i++) {
        dies.Quadrate[i] = [];
        für (var j = 0; j < this.td; j++) {
            // Um ​​die Daten eines Blocks im Array abzurufen, verwenden Sie für den Zugriff das Zeilen- und Spaltenformat. // Um ​​die Blöcke um einen Block herum zu finden, verwenden Sie für den Zugriff das Koordinatenformat. // Das Zeilen- und Spaltenformat ist das Gegenteil des Koordinatenformats x und y. n++;
            wenn (rn.indexOf(n) != -1) {
                // Wenn diese Bedingung erfüllt ist, bedeutet dies, dass der Index, zu dem die aktuelle Schleife führt, im Minen-Array gefunden wurde, was bedeutet, dass dieser Index einer Mine entspricht this.squares[i][j] = {
                    Typ: 'meins',
                    x: j,
                    y: ich
                };

            } anders {
                diese.Quadrate[i][j] = {
                    Typ: "Zahl",
                    x: j,
                    y: ich,
                    Wert: 0
                };
            }
        }
    }

    dies.updateNum();
    dies.createDom();

    dieses.übergeordnetes.imKontextmenü = Funktion () {
        gibt false zurück;
        // Rechtsklick-Menüereignis verhindern}

    // Anzahl der verbleibenden Minen this.mineNumDom = document.querySelector('.mineNum');
    dies.mineNumDom.innerHTML = dies.surplusMine;
};


// Finde die acht Gitter um ein Quadrat Mine.prototype.getAround = function (square) {
    var x = Quadrat.x,
        y = Quadrat.y;
    var result = []; //Gibt die Koordinaten des gefundenen Gitters zurück (zweidimensionales Array)
    für (var i = x - 1; i <= x + 1; i++) {
        für (var j = y - 1; j <= y + 1; j++) {
            wenn (i < 0 ||
                j < 0 ||
                i > dies.td - 1 ||
                j > dies.tr - 1 ||
                // Der obige Ausdruck zeigt die Grenze (i == x && j == y) ||
                // Zeigt eine Selbstschleife an this.squares[j][i].type == 'mine'
                // Zeigt eine Schleife zu (umliegenden Gitter-)Minen an (beachten Sie, dass i und j Koordinaten darstellen, während Quadrate Zeilen und Spalten speichern)
            ) {
                weitermachen;
            }
            // Es muss in Form von Zeilen und Spalten zurückgegeben werden, da es zum Abrufen der Daten im Array result.push([j, i]); benötigt wird.
        }
    }
    Ergebnis zurückgeben;
}

// Alle Zahlen aktualisieren Mine.prototype.updateNum = function () {
    für (var i = 0; i < this.tr; i++) {
        für (var j = 0; j < this.td; j++) {
            // Um ​​die Zahlen um Lei zu aktualisieren, wenn (this.squares[i][j].type == 'number') {
                weitermachen;
            }
            var num = this.getAround(this.squares[i][j]); // Zahlen rund um jede Mine abrufen for (var k = 0; k < num.length; k++) {
                dies.Quadrate[Anzahl[k][0]][Anzahl[k][1]].Wert += 1;
            }
        }
    }
};

Mine.prototype.play = Funktion (ev, obj) {
    var Dies = dies;
    if (ev.which == 1 && obj.className != 'flag') { // Die folgende Bedingung gilt für den Benutzer, damit dieser nach einem Rechtsklick nicht klickt // Die linke Taste wurde angeklickt var curSquare = this.squares[obj.pos[0]][obj.pos[1]];
        var cl = ['null', 'eins', 'zwei', 'drei', 'vier', 'fünf', 'sechs', 'sieben', 'acht'];
        // cl speichert den Klassennamen

        wenn (aktuellerQuadrattyp == 'Zahl') {
            // Der Benutzer hat auf eine Zahl geklickt. obj.innerHTML = curSquare.value;
            obj.Klassenname = cl[aktuellerQuadratwert.Wert];

            // Auf die Zahl Null geklickt if (curSquare.value == 0) {
                /* 
                    Rekursives Denken: 
                    1. Sich selbst anzeigen 2. Umgebung durchsuchen 1) Umgebung anzeigen (wenn die Werte der Umgebung ungleich Null sind, dann werden sie hier angezeigt und es muss nicht weiter gesucht werden)
                        2) Wenn der Wert Null ist, a. sich selbst anzeigen und b. in der Umgebung suchen (wenn die Werte in der Umgebung nicht Null sind, dann hier anzeigen und nicht weiter suchen)
                                I. Sich selbst anzeigen II. Umgebung finden (wenn die Werte der Umgebung ungleich Null sind, dann hier anzeigen und kein erneutes Suchen nötig)
                                    . . . . . .
                 */

                obj.innerHTML = ''; // Wird als leere Funktion angezeigt getAllZero(square) {
                    var around = This.getAround(square); // N umgebende Quadrate gefunden für (var i = 0; i < around.length; i++) {
                        var x = around[i][0]; // Zeilen var y = around[i][1]; // Spalten This.tds[x][y].className = cl[This.squares[x][y].value];

                        wenn (Diese.Quadrate[x][y].Wert == 0) {
                            // Wenn ein Raster mit einem bestimmten Raster als Mittelpunkt Null ist, dann mit dem Aufruf fortfahren (Rekursion)
                            wenn (!Dies.tds[x][y].check) {
                                // Füge dem entsprechenden td ein Attribut hinzu. Wenn es gefunden wurde, ist der Wert true und es wird beim nächsten Mal nicht erneut gefunden, um Probleme mit dem Funktionsaufrufstapel zu vermeiden. This.tds[x][y].check = true;
                                getAllZero(Dieses.Quadrate[x][y]);
                            }

                        } anders {
                            // Wenn die Werte der vier gefundenen Seiten mit einem bestimmten Raster als Mittelpunkt ungleich Null sind, zeige die Zahl an This.tds[x][y].innerHTML = This.squares[x][y].value;
                        }
                    }

                }
                getAllZero(aktuellesQuadrat);
            }

        } anders {
            // Der Benutzer hat auf die Mine geklickt this.gameOver(obj);
        }
    }
    wenn (ev.which == 3) {
        // Der Benutzer hat die rechte Taste gedrückt // Wenn der Rechtsklick eine Zahl ist, kann sie nicht angeklickt werden if (obj.className && obj.className != 'flag') {
            zurückkehren;
        }
        obj.className = obj.className == 'flag' ? '' : 'flag'; // Klasse wechseln wenn (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
            dies.allRight = wahr;
        } anders {
            dies.allRight = falsch;
        }

        wenn (Objekt.Klassenname == 'Flagge') {
            this.mineNumDom.innerHTML = --this.surplusMine;
        } anders {
            dies.mineNumDom.innerHTML = ++diese.surplusMine;
        }

        wenn (this.surplusMine == 0) {
            // Die Anzahl der verbleibenden Minen beträgt 0, was bedeutet, dass der Benutzer alle roten Flaggen markiert hat. Zu diesem Zeitpunkt müssen wir feststellen, ob das Spiel erfolgreich oder vorbei ist, wenn (this.allRight == true) {
                // Diese Bedingung ist erfüllt und zeigt an, dass der Benutzer alle richtigen Warnungen markiert hat („Herzlichen Glückwunsch, Sie haben das Spiel bestanden“);
                für (i = 0; i < this.tr; i++) {
                    für (j = 0; j < this.td; j++) {
                        dies.tds[i][j].onmousedown = null;
                    }
                }

            } anders {
                alert('Spiel fehlgeschlagen');
                dies.gameOver();
            }
        }
    }
}

// Spielfehlerfunktion Mine.prototype.gameOver = function (clickTd) {
    /* 
        1. Zeige alle Minen 2. Bricht das Klickereignis aller Gitter ab 3. Markiere das angeklickte Gitter rot */
    für (i = 0; i < this.tr; i++) {
        für (j = 0; j < this.td; j++) {
            wenn (diese.Quadrate[i][j].Typ == 'meins') {
                dies.tds[i][j].className = "meins";
            }
            dies.tds[i][j].onmousedown = null;
        }
    }
    wenn (clickTd) {
        clickTd.style.backgroundColor = "#f00";
    }
}

// var mine = neue Mine(28, 28, 99);
// meine.init();

// Schaltflächenfunktionalität hinzufügen var btns = document.getElementsByTagName('button');
var mine = null; // wird verwendet, um die generierte Instanz zu speichern var ln = 0; // wird verwendet, um den aktuell ausgewählten Status zu verarbeiten var arr = [
    [9, 9, 10],
    [16, 16, 40],
    [28, 28, 99]
]; //Verschiedene Ebenen von Zeilen, Spalten und Minen für (let i = 0; i < btns.length - 1; i++) {
    btns[i].onclick = Funktion () {
        btns[ln].className = '';
        this.className = "aktiv";
        meins = neues Meins(arr[i][0], arr[i][1], arr[i][2]);
        meine.init();
        ln = ich;
    }
}
btns[0].onclick(); // Initialisieren btns[3].onclick = function () {
    für (var i = 0; i < btns.length - 1; i++) {
        wenn (btns[i].className == 'aktiv') {
            btns[i].onclick();
        }
    }
}

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:
  • Teilen Sie Ihr eigenes Minesweeper-Spiel, das mit JS erstellt wurde
  • Die js-Version von Minesweeper implementiert das Code-Prinzip gut
  • Beispielcode zur Implementierung des Minesweeper-Applets in js
  • Implementierung des klassischen Minesweeper-Spiels mit reinem Javascript
  • Javascript Minesweeper Spiel
  • HTML+JavaScript zur Implementierung des Minesweeper-Spiels
  • JavaScript macht Windows zum klassischen Minesweeper-Spiel
  • JavaScript-Version des klassischen Spiels Minesweeper, vollständiges Beispiel [mit Demo-Quellcode-Download]
  • js+canvas implementiert ein einfaches Minesweeper-Spiel
  • js zur Implementierung eines einfachen Minesweepings

<<:  Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 für WinX64

>>:  So konfigurieren Sie die CDN-Planung mit dem Modul Nginx_geo

Artikel empfehlen

Probleme und Lösungen bei der Verwendung der TweenMax-Animationsbibliothek in Angular

Ich habe in letzter Zeit nichts zu tun, also bast...

Vue-Überwachungseigenschaften und berechnete Eigenschaften

Inhaltsverzeichnis 1. Überwachungseigenschaften a...

Vue implementiert bidirektionale Datenbindung

In diesem Artikelbeispiel wird der spezifische Co...

So spielen Sie lokale Mediendateien (Video und Audio) mit HTML und JavaScript ab

Erstens kann JavaScript aus Sicherheitsgründen ni...

Vue-Router-Verlaufsmodus, serverseitiger Konfigurationsprozess-Datensatz

Geschichtsroute Der Verlaufsmodus bezieht sich au...

Detaillierte Erklärung der Fallstricke von MySQL 8.0

Ich habe heute MySQL 8.0 aktualisiert. Das erste ...

Eine kurze Analyse des Unterschieds zwischen und und wo in der MySQL-Verbindungsabfrage

1. Erstellen Sie eine Tabelle CREATE TABLE `stude...

Tutorial-Analyse zur Installation und Nutzung des Linux-Leistungsüberwachungstools nmon

1. Einführung in nmon Nmon (Nigel's Monitor) ...

Eine Methode zum Erstellen von Karussellbildern mit CSS3

Diashows sieht man häufig auf Webseiten. Sie enth...

Implementierung des Element-UI-Layouts (Zeilen- und Spaltenkomponenten)

Inhaltsverzeichnis Grundlegende Anweisungen und V...

Vier Möglichkeiten zum Wechseln von Registerkarten in VUE

Inhaltsverzeichnis 1. Statische Implementierungsm...

So installieren Sie Theano und Keras auf einem Ubuntu-System

Hinweis: Das System ist Ubuntu 14.04LTS, ein 32-B...

Details zur Datenanzeige der Vue3-Listenschnittstelle

Inhaltsverzeichnis 1. Beispiel für die Anzeige de...

MySQL 8.0.18 Installations-Tutorial unter Windows (Abbildung)

Herunterladen Download-Adresse: https://dev.mysql...

Beispielcode für CSS zum Erzielen eines Bildzoomeffekts und eines langsamen Übergangseffekts beim Bewegen der Maus

transform:scale() lässt sich ein proportionales V...