Implementierung eines einfachen Gobang-Spiels mit nativem JavaScript

In diesem Artikel finden Sie den spezifischen Code zur Implementierung eines einfachen Gobang-Spiels in JavaScript als Referenz. Der spezifische Inhalt ist wie folgt

HTML-Seite

Die Anmerkungen sind sehr klar, bitte studieren Sie sie sorgfältig.

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="Breite=Gerätebreite, Höhe=Gerätehöhe, Anfangsmaßstab=1,0, benutzerdefiniert skalierbar=nein">
  <Titel>Gobang</Titel>
  <Stil>
    * {
      Rand: 0px;
      Polsterung: 0px;
    }
 
    .Kasten {
      Rahmenabstand: 0px;
      Rand: 1px durchgezogen #3c3c3c;
      Hintergrundfarbe: #e1e1e2;
      Rand: automatisch;
    }
    
    .Stück {
      Rahmenabstand: 0px;
      Rand: 1px durchgezogen;    
    }
  </Stil>
 
</Kopf>
 
<Text>
  <script type="text/javascript" src="./Gobang.js"></script>
</body>
 
</html>

Javascript

var Bildschirmbreite = {
  Dokumentbreite: 500,
  containerWidth: 400, // Standardbreite des Containers cellWidth: 20 // Zellenbreite}
wenn (Dokument.Dokumentelement.Clientbreite < 500) {
  Bildschirmbreite.Dokumentbreite = Dokument.Dokumentelement.Clientbreite;
  Bildschirmbreite.Containerbreite = Bildschirmbreite.Dokumentbreite * 0,8;
  Bildschirmbreite.Zellenbreite = Bildschirmbreite.Containerbreite * 0,05;
}
//Konstante var reg = /\d{1,2}/g;
var white = []; // Weiße Figuren platzierenvar black = []; // Schwarze Figuren platzierenvar tempKey = false; // Bestimmen, ob schwarze oder weiße Figuren gezogen werden sollenvar notOver = true; // Bestimmen, ob das Spiel vorbei istvar tips = "Weiß zieht"; // Tipps zum Ziehen von Figurenvar count = 0;//Anzahl verbundener Figurenvar bv = false; // Schwarze Gewinnevar wv = false; // Weiße Gewinnevar yCanWin = [];// Arrays mit demselben vertikalen Elementvar xCanWin = [];// Arrays mit demselben horizontalen Elementvar xyCanWin = [];// Arrays mit denselben positiven und negativen Diagonalenvar yxCanWin = [];// Arrays mit denselben negativen und positiven Diagonalen// Verwenden Sie einen Timer, um den Sieg zu überwachenvar time = setInterval(function () {
  wenn (bv) {
    Tipps = "Schwarz gewinnt";
    document.getElementsByTagName("span")[0].innerText = Tipps;
    für (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
      document.getElementsByClassName("StückBox")[i].onclick = null;
    }
    ClearInterval(Zeit);
  }
  wenn (wv) {
    Tipps = "Weiß gewinnt";
    document.getElementsByTagName("span")[0].innerText = Tipps;
    für (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
      document.getElementsByClassName("StückBox")[i].onclick = null;
    }
    ClearInterval(Zeit);
  }
}, 100);
newGame(); // Starte das Spiel Funktion newGame() {
  if (document.getElementsByTagName("Tabelle").Länge) {
    für (var i = 0; i < document.getElementsByTagName("Tabelle").Länge; i++) {
      document.getElementsByTagName("Tabelle")[i].remove();
    }
  }
  // Initialisiere den folgenden Inhalt bgInit();
  StückInit();
  spanFn();
  weiß = [];
  schwarz = [];
  tempKey = falsch;
  nichtÜber = wahr;
  Tipps = "Weiß zieht";
  Anzahl = 0;
  bv = falsch;
  xCanWin = [];
  yCanWin = [];
  xyCanWin = [];
  yxCanWin = [];
}
 
Funktion spanFn() {
  var span = document.createElement("span");
  document.body.insertBefore(span, document.getElementsByTagName("script")[0]);
  span.innerText = Tipps;
}
// Initialisierungsfunktion der Platine bgInit() {
  var Tabelle = Dokument.createElement("Tabelle");
  Tabelle.Klassenname = "Box"
  für (var y = 0; y < 20; y++) {
    var tr = document.createElement("tr");
    für (var x = 0; x < 20; x++) {
      var td = "<td class='box-" + y + "-" + x + "' style='Breite: " + Bildschirmbreite.Zellenbreite + "px; Höhe: " + Bildschirmbreite.Zellenbreite + "px;Rand:1px durchgezogen #9c9c9c'></td>";
      tr.innerHTML += td;
    }
    Tabelle.AnhängenKind(tr);
  }
  document.body.insertBefore(Tabelle, document.getElementsByTagName("Skript")[0]);
}
 
// Schachfiguren-Initialisierungsfunktion pieceInit() {
  var Tabelle = Dokument.createElement("Tabelle");
  table.className = "Stück"
  table.style = "Position: absolut; oben: 0; links: 50 %; linker Rand: -" + (Bildschirmbreite.Containerbreite + 42) / 2 + "px";
  für (var y = 0; y < 20; y++) {
    var tr = document.createElement("tr");
    für (var x = 0; x < 20; x++) {
      var td = "<td class='piece-" + y + "-" + x + " pieceBox' style='width: " + ScreenWidth.cellWidth + "px; height: " + ScreenWidth.cellWidth + "px;border:1px solid transparent;border-radius: 50%;'></td>";
      tr.innerHTML += td;
    }
    Tabelle.AnhängenKind(tr);
  }
  document.body.insertBefore(Tabelle, document.getElementsByTagName("Skript")[0]);
}
 
// Bewegen Sie die Schachfigur für (var i = 0; i < document.getElementsByClassName("pieceBox").length; i++) {
  document.getElementsByClassName("StückBox")[i].onclick = Funktion () {
    wenn (temp.Schlüssel) {
      this.style.backgroundColor = "#000"; // Schwarzer Fleck tempKey = false;
      schwarz.push(dieser.Klassenname.match(reg));
      Sieg (schwarz, 0); //Beurteile, ob Schwarz gewinnt oder nicht, if (notOver) {
        Tipps = TippsGo(tempKey);
        document.getElementsByTagName("span")[0].innerText = Tipps;
      }
    } anders {
      this.style.backgroundColor = "#fff"; // Falsch tempKey = true;
      weiß.push(dieser.Klassenname.match(reg));
      Sieg (weiß, 1); //Beurteile, ob Weiß gewinnt oder nicht, if (notOver) {
        Tipps = TippsGo(tempKey);
        document.getElementsByTagName("span")[0].innerText = Tipps;
      }
    }
    this.onclick = null; // Klickereignis nach dem Klicken abbrechen}
}
 
// Tipps, ob man Schwarz oder Weiß verwenden sollte Funktion tipsGo(tempKey) {
  wenn (temp.Schlüssel) {
    Rückgabe „Schwarz zieht“;
  } anders {
    „Weiß zieht“ zurückgeben;
  }
}
 
/**
 * Möglichkeiten zur Beurteilung verschiedener Gewinne * x steht für die vertikale Koordinate, y steht für die vertikale Koordinate * 1. Vertikaler Gewinn, d. h., die x-Werte sind gleich, nimm die y-Werte, sortiere sie und vergleiche sie * 2. Horizontaler Gewinn, d. h., die y-Werte sind gleich, nimm die x-Werte, sortiere sie und vergleiche sie * 3. Vorwärtsdiagonaler Gewinn, x+y sind die gleichen Werte, nimm x oder y, sortiere sie und vergleiche sie * 4. Umgekehrter diagonaler Gewinn, xy sind die gleichen Werte, nimm x oder y, sortiere sie und vergleiche sie */
Funktion Sieg(Ziel, c) {
  wenn (Ziellänge >= 5) {
    // 1. Vertikaler Gewinn yCanWin
    für (var i = 0; i < Ziellänge; i++) {
      für (var j = 0; j < Ziellänge; j++) {
        wenn (Ziel[j][1] == Ziel[i][1]) {
          yCanWin.push(target[j]); //Setze den gleichen Wert von x in das Array yCanWin ein
        }
      }
      yWin(yCanWin, c);
      yCanWin = [];
    }
    // 2. Gewinnen Sie xCanWin
    für (var m = 0; m < Ziellänge; m++) {
      für (var n = 0; n < Ziellänge; n++) {
        wenn (Ziel[n][0] == Ziel[m][0]) {
          xCanWin.push(target[n]); //Setze den gleichen Wert von y in das Array xCanWin ein
        }
      }
      xWin(xCanWin, c);
      xCanWin = [];
    }
    // 3. Positiver und schräger Win xyCanWin (unten links nach oben rechts)
    für (var a = 0; a < Ziellänge; a++) {
      für (var b = 0; b < Ziellänge; b++) {
        wenn (parseInt(Ziel[b][0]) + parseInt(Ziel[b][1]) == parseInt(Ziel[a][0]) + parseInt(Ziel[a][1])) {
          xyCanWin.push(Ziel[b])
        }
      }
      yWin(xyCanWin, c);
      xyCanWin = [];
    }
    // 4. Backslash win yxCanWin (von oben links nach unten rechts)
    für (var v = 0; v < Ziellänge; v++) {
      für (var w = 0; w < Ziellänge; w++) {
        wenn (parseInt(Ziel[w][0]) - parseInt(Ziel[w][1]) == parseInt(Ziel[v][0]) - parseInt(Ziel[v][1])) {
          yxCanWin.push(Ziel[w])
        }
      }
      xWin(yxCanWin, c);
      yxCanWin = [];
    }
  }
}
// Vertikale Gewinnbedingung beim Schach (vertikale Gewinnbedingung beim Schach)
function yWin(yCanWin, c) { // c = 0 steht für schwarze Figuren c = 1 steht für weiße Figuren var sortArray = []; // Array sortieren für (var i = 0; i < yCanWin.length; i++) {
    sortArray.push(yCanWin[i][0]);
  }
  sortArray.sort(Funktion (x, y) {
    gib x - y zurück;
  });
  //Nachdem das Array sortiert ist, vergleiche die erste Zahl mit der letzten Zahl plus eins (beachte die Konvertierung des numerischen Typs)
  für (var j = 0; j < sortArray.length; j++) {
    wenn (sortArray[j + 1]) {
      wenn (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {
        count++; // Addiere eins für jede fortlaufende Zahl und lösche es, wenn eine Unstetigkeit auftritt if (count == 4 && c == 0) {
          bv = wahr;
          notOver = false; // Spiel vorbei return;
        } sonst wenn (Anzahl == 4 und c == 1) {
          wv = wahr;
          nichtÜber = falsch;
          zurückkehren;
        }
      } anders {
        Anzahl = 0;
      }
    }
  }
  Anzahl = 0;
}
// Die horizontale Gewinnbedingung beim Schach (die umgekehrte diagonale Gewinnbedingung beim Schach)
Funktion xWin(xCanWin, c) {
  var sortArray = [];
  für (var i = 0; i < xCanWin.length; i++) {
    sortArray.push(xCanWin[i][1]);
  }
  sortArray.sort(Funktion (x, y) {
    gib x - y zurück;
  });
  für (var j = 0; j < sortArray.length; j++) {
    wenn (sortArray[j + 1]) {
      wenn (parseInt(sortArray[j]) + 1 == parseInt(sortArray[j + 1])) {
        zählen++;
        wenn (Anzahl == 4 und c == 0) {
          bv = wahr;
          nichtÜber = falsch;
          zurückkehren;
        } sonst wenn (Anzahl == 4 und c == 1) {
          wv = wahr;
          nichtÜber = falsch;
          zurückkehren;
        }
      } anders {
        Anzahl = 0;
      }
    }
  }
  Anzahl = 0;
}

Alle Artikel zu klassischen JavaScript-Spielen finden Sie im entsprechenden Studienthema.

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:

Reine JS-Implementierung des Gobang-Spiels, kompatibel mit allen Browsern (mit Quellcode)
Implementierung des Gobang-Spiels basierend auf JavaScript
Javascript und HTML5 verwenden Canvas, um ein Web-Gobang-Spiel zu erstellen und den Algorithmus zu implementieren
JS Canvas zeichnet das Gobang-Schachbrett
H5+C3+JS zur Implementierung des Gobang-Spiels (KI-Version)
Natives JS+Canvas zur Implementierung des Gobang-Spielbeispiels
H5+C3+JS realisiert Gobang-Spiel für zwei Spieler (UI-Kapitel)
js, um ein einfaches Gobang-Spiel zu realisieren
JavaScript-Anfänger-Tutorial und einfache Implementierung des Gobang-Applets
Natives JS+Canvas zur Implementierung des Gobang-Spiels

<<: Zusammenfassung häufig verwendeter Befehle für Linux-Dateioperationen

>>: So implementieren Sie eine bidirektionale MySQL-Sicherung