JavaScript implementiert ein KI-Tic-Tac-Toe-Spiel durch den Maximum- und Minimum-Algorithmus
|
Lassen Sie uns ohne weitere Umschweife den Screenshot direkt ausführen:
Die schwarzen Steine stellen die Positionen des Spielers dar, die roten die des Computers. Der Computer wählt basierend auf der aktuellen Situation auf dem Brett eine Situation, die für ihn günstig, für den Spieler jedoch ungünstig ist. Der Algorithmus kann einen Computersieg oder ein Unentschieden zwischen Computer und Spieler erzielen. Der Code lautet wie folgt: <!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel>TicTacToe-KI</Titel>
<Stil>
.Titel {
Textausrichtung: zentriert;
}
.Schach {
Anzeige: Block;
/*Werden Sie ein Element auf Blockebene und verwenden Sie den Rand, um es zu zentrieren*/
Rand: 50px automatisch;
Box-Schatten: 5px 5px 5px #B9B9B9, -2px -2px 2px #EFEFEF;
Cursor: Zeiger;
}
div {
Textausrichtung: zentriert;
}
.neustart {
Polsterung: 10px 20px;
Hintergrundfarbe: #EE82EE;
Rahmenradius: 5px;
Farbe: weiß;
Cursor: Zeiger;
}
</Stil>
</Kopf>
<Text>
<h3 Klasse = "Titel">--Tic Tac Toe--</h3>
<canvas Klasse="Schach" Breite="450px" Höhe="450px"></canvas>
<div>
<a class="restart" onclick="rst()">Neustart</a>
</div>
</body>
<Skript>
var Schach = document.getElementsByClassName("Schach")[0];
var Titel = document.getElementsByClassName("Titel")[0];
var Kontext = Schach.getContext("2d");
Kontext.StrokeStyle = "#B9B9B9"
fenster.onload = funktion() {
zeichneSchachbrett();
Init()
}
Funktion zeichneSchachbrett() {
für(var i = 0; i < 4; i++) {
//Setze die Koordinaten des Startpunkts der horizontalen Linie context.moveTo(15, 15 + i * 140)
//Setze die Koordinaten des Endpunkts der horizontalen Linie context.lineTo(435, 15 + i * 140)
//2 Punkte verbinden context.stroke();
//Vertikale Linie festlegen context.moveTo(15 + i * 140, 15)
//Setze die Koordinaten des Endpunkts der horizontalen Linie context.lineTo(15 + i * 140, 435)
//2 Punkte verbinden context.stroke();
}
}
//Definiere ein zweidimensionales Array zum Markieren von Schachfiguren var chessboard = []
für(var i = 0; i < 4; i++) {
Schachbrett[i] = [];
für(var j = 0; j < 4; j++) {
Schachbrett[i][j] = 0;
}
}
Konstante Zahl = 3
Konstanter Schritt = 9
const MAN = 1
const COMPUTER = -1
Konstante Suchtiefe = 9
const INT_MAX = 999999
const INT_MIN = -1000000
var Spieler = 0
var istGameOver = false
var aktuelle Tiefe = 0
var bestePosition = {
x: 0,
j: 0
}
Funktion Init() {
für(lass i = 0; i < ZAHL; i++) {
für(let j = 0; j < NUMBER; j++) {
Schachbrett[i][j] = 0
}
}
Spieler = MANN
isGameOver = false
aktuelleTiefe = 0
}
Funktion istEnde() {
sei i = 0
sei j = 0
Variablenanzahl = 0
für (i = 0; i < ZAHL; i++) { //Zeilenanzahl = 0;
für(j = 0; j < ZAHL; j++)
zählen += Schachbrett[i][j];
wenn (Anzahl == 3 || Anzahl == -3)
Rückgabewert / 3;
}
für(j = 0; j < ZAHL; j++) { //Spaltenanzahl = 0;
für(i = 0; i < ZAHL; i++)
zählen += Schachbrett[i][j];
wenn (Anzahl == 3 || Anzahl == -3)
Rückgabewert / 3;
}
Anzahl = 0;
Anzahl = Schachbrett[0][0] + Schachbrett[1][1] + Schachbrett[2][2];
wenn (Anzahl == 3 || Anzahl == -3)
Rückgabewert / 3;
Anzahl = Schachbrett[0][2] + Schachbrett[1][1] + Schachbrett[2][0];
wenn (Anzahl == 3 || Anzahl == -3)
Rückgabewert / 3;
gebe 0 zurück;
}
Funktion MaxMinSearch(Tiefe) {
Var-Wert = 0;
wenn (Spieler == MAN) Wert = INT_MIN;
wenn (Spieler == COMPUTER) Wert = INT_MAX;
wenn(isEnd() != 0) {
returniere Auswerten();
}
wenn(Tiefe == SUCHTIEFE) {
Wert = Auswerten();
Rückgabewert;
}
für(lass i = 0; i < ZAHL; i++) {
für(let j = 0; j < NUMBER; j++) {
wenn(Schachbrett[i][j] == 0) {
wenn(Spieler == MANN) {
Schachbrett[i][j] = MANN;
Spieler = COMPUTER;
var nächster Wert = MaxMinSearch(Tiefe + 1);
Spieler = MANN;
wenn(Wert < nächsterWert) {
Wert = nächster Wert;
wenn(Tiefe == aktuelleTiefe) {
bestePosition.x = i;
bestePosition.y = j;
}
}
} sonst wenn(Spieler == COMPUTER) {
Schachbrett[i][j] = COMPUTER;
Spieler = MANN;
var nächster Wert = MaxMinSearch(Tiefe + 1);
Spieler = COMPUTER;
if (Wert > nächsterWert) {
Wert = nächster Wert;
wenn(Tiefe == aktuelleTiefe) {
bestePosition.x = i;
bestePosition.y = j;
}
}
}
Schachbrett[i][j] = 0;
}
}
}
Rückgabewert;
}
Funktion Logik(){
wenn (istGameOver) {
wenn (isEnd() == MAN) {
alert("Spiel endet und Spieler gewinnt")
} sonst wenn (isEnd() == COMPUTER) {
alert("Spiel vorbei, Computer gewinnt")
} anders {
alert("Spiel endet unentschieden")
}
}
}
Funktion Auswerten() {
var-Wert = isEnd();
wenn (Wert == MAN) return INT_MAX;
wenn (Wert == COMPUTER) return INT_MIN;
}
chess.onclick = Funktion(Ereignis) {
wenn(Spieler != MANN) {
zurückkehren;
}
//Koordinaten abrufen var x = event.offsetX;
var y = Ereignis.OffsetY;
x = Math.trunc((x - 15) / 140)
y = Math.trunc((y - 15) / 140)
ManPlay(x, y)
wenn(isEnd() == 0 && aktuelleTiefe < 8) {
ComputerPlay()
wenn(isEnd() != 0) {
isGameOver = wahr
}
} anders {
isGameOver = wahr
}
Logik()
}
Funktion ManPlay(x, y) {
Schachbrett[x][y] = MANN
DrawBroad(x,y,MAN)
aktuelle Tiefe++
Spieler = COMPUTER
}
Funktion ComputerPlay() {
MaxMinSearch(aktuelleTiefe)
Schachbrett[bestePosition.x][bestePosition.y] = COMPUTER
DrawBroad(bestePosition.x,bestePosition.y,COMPUTER)
aktuelle Tiefe++
Spieler = MANN
}
//Zeichne das Brett, wenn du einen Zug machst function DrawBroad(i, j, player) {
Kontext.beginPath();
context.arc(85 + i * 140, 85 + j * 140, 40, 0, 2 * Math.PI); //Einen Kreis zeichnen context.closePath();
var Farbe;
wenn(Spieler == MANN) {
Farbe = "#000";
} anders {
Farbe = "rot"
}
Kontext.Füllstil = Farbe;
Kontext.Füllen();
}
Funktion rst() {
fenster.standort.neuladen();
}
</Skript>
</html>Darunter die Codezeilen 242 und 244 Kontext.beginPath(); context.arc(85 + i * 140, 85 + j * 140, 40, 0, 2 * Math.PI); //Einen Kreis zeichnen context.closePath(); Dabei handelt es sich um die Vorgänge des Ablegens und Abhebens des Stifts. Dadurch kann das Problem verbundener Pfade beim Zeichnen von Kreisen auf der Leinwand vermieden werden. Damit ist der Artikel über die Implementierung des KI-Tic-Tac-Toe-Spiels in JavaScript mithilfe des Minimax-Algorithmus abgeschlossen. Weitere Inhalte zum JavaScript-Tic-Tac-Toe-Spiel finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Lernprogramm zur Verwendung von HTML-Formular-Tags
>>: Lösung für mobile Browser, die die Position nicht unterstützen: Fix
Artikel empfehlen
So installieren Sie Oracle auf Windows Server 2016
1. Installieren Sie Oracle. Im Internet gibt es z...
Gemeinsame MySQL-Indexwirksamkeitsbedingungen und Indexungültigkeitsbedingungen
Inhaltsverzeichnis 1. Bedingungen für das Versage...
Eine kurze Einführung in JavaScript-Arrays
Inhaltsverzeichnis Einführung in Arrays Array-Lit...
So verwenden Sie position:sticky, um das Problem kleiner Programme, die an der Decke haften, perfekt zu lösen
Kürzlich bestand der Kunde eines Projekts darauf,...
VUE führt die Implementierung der Verwendung von G2-Diagrammen ein
Inhaltsverzeichnis Über G2 Chart verwenden Vollst...
Detaillierte Erläuterung der MERGE-Speicher-Engine von MySQL
Die MERGE-Speicher-Engine behandelt eine Gruppe v...
Detaillierte Erläuterung der Kapselung von JavaScript-Animationsfunktionen
Inhaltsverzeichnis 1. Prinzip der Animationsfunkt...
Installieren und Bereitstellen von Java8 und MySQL unter CentOS7
Im Allgemeinen werden Java-Lernprogramme und Bere...
Implementierung einer Lösung für adaptive Textbereichshöhe in Vue
Inhaltsverzeichnis Versteckte Probleme Lösung zur...
Ubuntu20.04 VNC-Installation und Konfigurationsimplementierung
VNC ist ein Remote-Desktop-Protokoll. Befolgen Si...
Detaillierte Schritte zur Installation von Nginx auf dem Apple M1-Chip und zum Bereitstellen eines Vue-Projekts
brew install nginx Apple Mac verwendet zur Instal...
Es ist Jahresende, ist Ihr MySQL-Passwort sicher?
Vorwort: Das Jahr neigt sich dem Ende zu. Ist es ...
Detaillierte Erklärung zur Verwendung der JavaScript-Paging-Komponente
Die Paginierungskomponente ist eine häufige Kompo...
So handhaben Sie lange Daten bei der Anzeige in HTML
Bei der Anzeige langer Daten in HTML können Sie di...
Detailliertes Tutorial zur Installation des Tomcat-Servers und zur Konfiguration von Umgebungsvariablen unter Win10 (Bild und Text)
Inhaltsverzeichnis Herunterladen und Installieren...