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
Öffnen Sie die App auf der h5-Seite in Vue (bestimmen Sie, ob es sich um Android oder Apple handelt).
1. Entwicklungsumgebung vue+vant 2. Computersyste...
So verbinden Sie die Idee mit Docker, um eine Bereitstellung mit einem Klick zu erreichen
1. Ändern Sie die Docker-Konfigurationsdatei und ...
Einführung in den glibc-Upgradeprozess für Centos6.5
Inhaltsverzeichnis Szenarioanforderungen glibc-Ve...
TypeScript-Dekorator-Definition
Inhaltsverzeichnis 1. Konzept 1.1 Definition 1.2 ...
So implementieren Sie einen reibungslosen Neustart von Nginx
1. Hintergrund Während des Serverentwicklungsproz...
So wandeln Sie lokale Variablen in JavaScript in globale Variablen um
Zuerst müssen wir den Selbstaufruf der Funktion k...
Detailliertes Tutorial zur Installation von MySQL unter Linux
MySQL-Downloads für alle Plattformen sind unter M...
Installations- und Verwendungsschritte für vue-amap
Ich habe zuvor die Verwendung des asynchronen Lad...
So konfigurieren Sie MySQL auf einem Ubuntu-Server und implementieren eine Remote-Verbindung
Server: Ubuntu Server 16.04 LSS Kunde: Ubuntu 16....
Wartungsmethode für den Innodb-Systemtabellenbereich
Umweltbeschreibung: Es gibt eine laufende MySQL-U...
MySql legt die angegebenen Benutzerdatenbankansichtsabfrageberechtigungen fest
1. Neuen Benutzer anlegen: 1. Führen Sie eine SQL...
MySQL Online-Übung zur Deadlock-Analyse
Vorwort Ich glaube, dass jeder beim Erlernen von ...
VMWare Linux MySQL 5.7.13 Installations- und Konfigurationstutorial
In diesem Artikel finden Sie das Tutorial zur Ins...
Methoden und Schritte zum Bereitstellen mehrerer War-Pakete in Tomcat
1 Hintergrund JDK1.8-u181 und Tomcat8.5.53 wurden...
Centos7 implementiert Beispielcode zum Wiederherstellen von Daten basierend auf MySQL-Protokollen
Einführung Binlog-Protokolle, also binäre Protoko...