js implementiert das klassische Minesweeper-Spiel
|
In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung des klassischen Minesweeper-Spiels als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Projektstruktur
Ergebnisse erzielen
Denkprozess 1. Schreiben Sie das grundlegende Layout HTML-Quellcode
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<link rel="stylesheet" href="./css/style.css" rel="externes nofollow" >
</Kopf>
<Text>
<div class="footer">Anzahl der verbleibenden Minen: <span class="mineNum"></span></div>
<div Klasse="SpielBox">
</div>
<div Klasse="Header">
<button class="active">Primär</button>
<button>Mittelstufe</button>
<button>Erweitert</button>
<button>Neustart</button>
</div>
<script src="./js/main.js"></script>
</body>
</html>CSS-Stylesheet
* {
Polsterung: 0;
Rand: 0;
}
.header {
Rand: 10px automatisch automatisch automatisch;
Textausrichtung: zentriert;
}
.header-Schaltfläche {
Polsterung: 5px 15px;
Hintergrundfarbe: #02a4ad;
Farbe: #fff;
Textausrichtung: zentriert;
Rand: keiner;
Rahmenradius: 8px;
Gliederung: keine;
Cursor: Zeiger;
}
.header button.aktiv {
Hintergrundfarbe: #00abff;
}
.Fußzeile {
Rand: 100px automatisch automatisch automatisch;
Textausrichtung: zentriert;
}
Tisch {
Rand: 10px automatisch automatisch automatisch;
Rahmenabstand: 1px;
Hintergrund: #929196;
}
td {
Polsterung: 0;
Breite: 20px;
Höhe: 20px;
Rand: 2px durchgezogen;
Hintergrund: #ccc;
Rahmenfarbe: #fff #a1a1a1 #a1a1a1 #fff;
Textausrichtung: zentriert;
Zeilenhöhe: 20px;
Schriftstärke: 700;
}
.meins {
Hintergrund: #d9d9d9 URL (../images/mine01.jpg) keine Wiederholung Mitte;
Hintergrundgröße: Abdeckung;
}
.flagge {
Hintergrund: #fff url(../images/flag.jpeg) keine Wiederholung Mitte;
Hintergrundgröße: Abdeckung;
}
.redMine {
Hintergrund: #fff url(../images/mine02.jpg) keine Wiederholung Mitte;
Hintergrundgröße: Abdeckung;
}
td.null{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
}
td.eins{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
Farbe: #0332fe;
}
td.zwei{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
Farbe: #019f02;
}
td.drei{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
Farbe: #ff2600;
}
td.vier{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
Farbe: #93208f;
}
td.fünf{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
Farbe: #ff7f29;
}
td.sechs{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
Farbe: #ff3fff;
}
td.sieben{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
Farbe: #3fffbf;
}
td.acht{
Rahmenfarbe: #d9d9d9;
Hintergrund: #d9d9d9;
Farbe: #22ee0f;
}js-Quellcode
Funktion Mine(tr, td, MineNum) {
this.tr = tr; // Zeile this.td = td; // Spalte this.mineNum = mineNum; // Anzahl der Minen this.squares = []; // quadratisches Objekt-Array this.tds = []; // quadratisches DOM
this.surplusMine = mineNum; // Die verbleibende Anzahl an Minen this.mainBox = document.querySelector('.gameBox'); // Das Spielbox-Element abrufen //this.createDom();
}
/*Zufallszahlen generieren*/
Mine.prototype.randomNum = Funktion () {
var positionArray = neues Array(dieses.tr * dieses.td);
for (var i = 0; i < positionArray.length; i++) { // Benutze den Index um die Position der Mine zu bestimmen positionArray[i] = i
}
// Array mischen positionArray.sort(function () {
gibt 0,5 zurück – Math.random()
});
return positionArray.splice(0, this.mineNum); // Nimm die zufälligen mineNum-Zahlen als Minenpositionen}
// Initialisierung Mine.prototype.init = function () {
var positionMine = this.randomNum(); // Position der Mine abrufen var n = 0;
für (var i = 0; i < this.tr; i++) {
dies.Quadrate[i] = [];
für (var j = 0; j < this.td; j++) {
if (positionMine.indexOf(n++) != -1) { // Benutze indexOf, um die Mine in das quadratische Array zu setzen this.squares[i][j] = { type: 'mine', x: j, y: i };
} anders {
this.squares[i][j] = { Typ: 'Zahl', x: j, y: i, Wert: 0 };
}
}
}
this.mainBox.oncontextmenu = Funktion () {
gibt false zurück;
}
dies.updateNum();
dies.createDom();
//Konsole.log(diese.Quadrate);
// Verarbeite die restlichen Minennummern this.mineNumDom = document.querySelector('.mineNum');
dies.surplusMine = diese.mineNum;
dies.mineNumDom.innerHTML = dies.surplusMine;
// Spielaufforderungen verarbeiten //document.querySelector('');
};
/*Eine große Tabelle erstellen*/
Mine.prototype.createDom = Funktion () {
var This = this; // Die Funktion soll auf das Instanzobjekt zeigen var table = document.createElement('table'); // Eine Tabelle erstellen
für (var i = 0; i < this.tr; i++) {
var domTr = document.createElement('tr'); // Zeile tr erstellen
this.tds[i] = []; // speichere [[],[],[]...[]] Zeilen für (var j = 0; j < this.td; j++) {
var domTd = document.createElement('td'); // Spalte td erstellen
domTd.pos = [i, j];
domTd.onmousedown = Funktion () {
Dies.spielen(Ereignis, dies);
};
this.tds[i][j] = domTd; // Speicherspalten [ [,],[,], [,] .....]
domTr.appendChild(domTd); // Spalten zur Zeile hinzufügen}
table.appendChild(domTr) // Ein Raster zur Tabelle hinzufügen}
// Den vorherigen Status löschen this.mainBox.innerHTML = '';
this.mainBox.appendChild(table); // Bilde ein großes Quadrat tr*td
}
// Finde das Raster Mine.prototype.getAround = function (positionArray) {
var x = positionArray.x;
var y = positionArray.y;
var result = []; // 2D, jedes gefundene Kind wird zurückgegeben/* Die Koordinateninformationen lauten hier wie folgt x-1,y-1 x,y-1 x+1,y-1
x-1,yx,y x+1,y
x-1,y+1 x,y+1 x+1,y+1
*/
für (var i = x - 1; i <= x + 1; i++) {
für (var j = y - 1; j <= y + 1; j++) {
Wenn (
i < 0 || // Über die linke Seite der Tabelle hinaus j < 0 || // Über den oberen Rand hinaus i > this.td - 1 || // Über die rechte Seite der Tabelle hinaus j > this.tr - 1 || // Über den unteren Rand der Tabelle hinaus (i == x && j == y || // Klickpunkt selbst this.squares[j][i].type == 'mine') // Wenn es eine Mine ist, muss der Wert nicht geändert werden) {
weitermachen;
}
result.push([j, i]); // Füge dem Ergebnis-Array umgebende Rasterinformationen hinzu, z. B. haben die j-te Zeile und die i-te Spalte Zahlen}
}
return result; //Gibt ein Array mit Rasterinformationen zurück}
// Nummer aktualisieren Mine.prototype.updateNum = function () {
für (var i = 0; i < this.tr; i++) {
für (var j = 0; j < this.td; j++) {
// Muss nur die Zahlen um Lei herum aktualisieren if (this.squares[i][j].type == 'number') {
weitermachen;
}
var num = this.getAround(this.squares[i][j]);
für (var k = 0; k < Num.Länge; k++) {
// Wenn sich um die Zahl Minen befinden, addiere 1
dies.Quadrate[Anzahl[k][0]][Anzahl[k][1]].Wert += 1;
}
}
}
}
Mine.prototype.play = Funktion (ev, obj) {
var This = this; // Instanzobjekt abrufen // Die linke Taste wird angeklickt which=1 ist die linke Taste, 2 ist das mittlere Scrollrad, 3 ist die rechte Taste if (ev.which == 1 && obj.className != 'flag') {
var curSquare = diese.Quadrate[obj.pos[0]][obj.pos[1]];
// Stile für jede Zahl var cl = ['Null', 'Eins', 'Zwei', 'Drei', 'Vier', 'Fünf', 'Sechs', 'Sieben', 'Acht'];
// Die angeklickte Zahl if (curSquare.type == 'number') {
obj.innerHTML = aktuellerQuadratwert;
obj.Klassenname = cl[aktuellerQuadratwert.Wert];
// Die Zahlen, auf die Sie klicken, können in zwei Typen unterteilt werden: 0 und Nicht-0
// 1. Klicken Sie auf die Zahl 0
wenn (aktuellerQuadratwert == 0) {
obj.innerHTML = ''; // Den digitalen Stil von 0 nicht anzeigen
Funktion getAllZero(positionArray) {
// Informationen zum umgebenden Gitter abrufen var around = This.getAround(positionArray);
//Mit rekursivem Denken dafür sorgen, dass das umgebende Raster 0 nicht angezeigt wird, und stoppen, wenn es ungleich 0 ist for (var i = 0; i < around.length; i++) {
// um[i]=[0,0]
var x = um[i][0];
var y = um[i][1];
Dies.tds[x][y].Klassenname = cl[Dies.Quadrate[x][y].Wert];
// Wenn es immer noch 0 ist
wenn (Diese.Quadrate[x][y].Wert == 0) {
// Rekursiv wenn (!This.tds[x][y].check) {
Dies.tds[x][y].check = true;
getAllZero(Dieses.Quadrate[x][y]);
}
} anders {
// Wenn es nicht 0 ist, zeige die Zahl weiterhin an This.tds[x][y].innerHTML = This.squares[x][y].value;
}
}
}
getAllZero(aktuellesQuadrat);
}
} anders {
// Auf eine Mine geklickt, direkt beurteilen, dass das Spiel vorbei ist this.gameOver(obj);
}
}
// which=3, die rechte Maustaste wurde geklickt if (ev.which == 3) {
wenn (Objekt.Klassenname && Objekt.Klassenname != 'Flagge') {
zurückkehren;
}
obj.className = obj.className == 'Flagge'? '' : 'Flagge';
// Verarbeite die restlichen Minen // if (this.squares[obj.pos[0]][obj.pos[1]].type == 'mine') {
// dies.allRight = true;
// } anders {
// dies.allRight = false;
// }
wenn (Objekt.Klassenname == 'Flagge') {
this.mineNumDom.innerHTML = --this.surplusMine;
} anders {
dies.mineNumDom.innerHTML = ++diese.surplusMine;
}
wenn (this.surplusMine == 0) {
für (var i = 0; i < this.tr; i++) {
für (var j = 0; j < this.td; j++) {
wenn (this.tds[i][j].className == 'flag') {
wenn (diese.Quadrate[i][j].Typ != 'meins') {
dies.gameOver();
zurückkehren;
}
}
}
}
alert("Herzlichen Glückwunsch zur erfolgreichen Minenräumung!");
dies.init();
}
}
};
//Game Over-Methode gameover
Mine.prototype.gameOver = Funktion (clickTd) {
// 1. Zeige alle Minen an // 2. Bricht das Klickereignis aller Grids ab // 3. Markiere die angeklickten Minen rot for (var i = 0; i < this.tr; i++) {
für (var 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.className = "redMine";
}
};
//Schaltflächenfunktionalität var btns = document.querySelectorAll('.header button');
var mine = null;
var btnKey = 0; // Levelindex // Schwierigkeitseinstellungen für Anfänger, Mittelstufe, Fortgeschrittene var headerArr = [
[9, 9, 10], [16, 16, 40], [28, 28, 99]
];
für (lass i = 0; i < btns.Länge - 1; i++) {
btns[i].onclick = Funktion () {
// Den zuvor angeklickten Stil löschen btns[btnKey].className = '';
this.className = "aktiv";
meins = neues Mine(...headerArr[i]);
meine.init();
// Status aktualisieren btnKey = i;
}
}
// Die Seite beginnt mit dem primären Minesweeper btns[0].onclick();
btns[3].onclick = Funktion () {
meine.init();
}Quellcode 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:
|
<<: So verwenden Sie den temporären MySQL 5.7-Tablespace, um Fallstricke zu vermeiden
>>: So legen Sie eine Verzeichnis-Whitelist und eine IP-Whitelist in Nginx fest
Artikel empfehlen
Lernen Sie die Grundlagen von nginx
Inhaltsverzeichnis 1. Was ist nginx? 2. Was kann ...
Was sind die Unterschiede zwischen var let const in JavaScript
Inhaltsverzeichnis 1. Wiederholte Erklärung 1,1 v...
Implementieren Sie eine MaterialUI-Button-Klickanimation auf Basis von CSS und kapseln Sie sie in eine React-Komponente ein.
Vorwort Als intensiver Benutzer von Front-End-Fra...
Zusammenfassung einiger gängiger Methoden von JavaScript-Arrays
Inhaltsverzeichnis 1. Einleitung 2. filter() 3. K...
Implementierungsskript für geplante Datenbanksicherung unter Linux
Inhaltsverzeichnis Szenario: Die Serverdatenbank ...
13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen
Inhaltsverzeichnis 1. Holen Sie sich einen zufäll...
HTML-Tutorial, leicht zu erlernende HTML-Sprache (2)
*******************Einführung in die HTML-Sprache ...
CocosCreator klassisches Einstiegsprojekt flappybird
Inhaltsverzeichnis Entwicklungsumgebung Game-Engi...
Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder
Das im Projekt aufgetretene Layoutproblem unregel...
Detaillierte Erklärung der Hook-Funktion und -Nutzung im Lebenszyklus der neuen Version von React
Im Vergleich zum alten Lebenszyklus Drei Hooks we...
Detaillierte Erläuterung gängiger Vorgänge für Docker-Images und -Container
Bildbeschleuniger Manchmal ist es schwierig, Bild...
So verwenden Sie rsync unter Linux
Inhaltsverzeichnis 1. Einleitung 2. Installation ...
So bedienen Sie das Kontrollkästchen auf einer HTML-Seite
Kontrollkästchen sind auf Webseiten sehr verbreit...
Detaillierte Erklärung der CocosCreator MVC-Architektur
Überblick Dieser Artikel stellt die in Spieleclie...
So deaktivieren Sie die Überprüfung auf Fremdschlüsseleinschränkungen in untergeordneten MySQL-Tabellen
Vorbereiten: Definieren Sie eine Lehrertabelle un...