JavaScript implementiert ein KI-Tic-Tac-Toe-Spiel durch den Maximum- und Minimum-Algorithmus

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:
  • JavaScript Canvas implementiert Tic-Tac-Toe-Spiel
  • JavaScript implementiert einen Tic-Tac-Toe-Spielquellcode mit KI
  • Beispielcode für das Python-Einführungsspiel Tic-Tac-Toe
  • Implementierung eines Tic-Tac-Toe-Spiels basierend auf der Sprache C
  • Python implementiert ein Tic-Tac-Toe-Spiel mit einer Schnittstelle
  • Implementierung eines einfachen Tic-Tac-Toe-Spiels in C
  • Vue implementiert Tic-Tac-Toe-Spiel

<<:  Lernprogramm zur Verwendung von HTML-Formular-Tags

>>:  Lösung für mobile Browser, die die Position nicht unterstützen: Fix

Artikel empfehlen

So stellen Sie die LNMP-Architektur im Docker bereit

Umweltanforderungen: IP Hostname 192.168.1.1 Knot...

Details zur Verwendung des Vue-Slots

Inhaltsverzeichnis 1. Warum Slots verwenden? 1.1 ...

Spezifische Verwendung des Node.js-Paketmanagers npm

Inhaltsverzeichnis Zweck npm init und package.jso...

Zusammenfassung der CSS-Farbverlaufseffekte (linearer Farbverlauf und radialer Farbverlauf)

Linearer Farbverlauf Hintergrundbild: linearer Fa...

Einstellungen für den Ubuntu-Boot-Autostart-Dienst

So erstellen Sie einen Dienst und starten ihn aut...

Spezifische Verwendung von MySQL-Operatoren (und, oder, in, nicht)

Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...

Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

Probleme bei der Verwendung mehrerer einfacher und dreifacher Anführungszeichen in MySQL concat

Beim dynamischen Verketten von Zeichenfolgen verw...

Ein magischer MySQL-Deadlock-Troubleshooting-Datensatz

Hintergrund Apropos MySQL-Deadlock: Ich habe bere...

Das kürzeste JS, um festzustellen, ob es sich um IE6 handelt (IE-Schreibmethode)

Häufig verwendeter JavaScript-Code zum Erkennen d...

So erben Sie die CSS-Zeilenhöhe

Wie wird die Zeilenhöhe vererbt?Schreiben Sie ein...

Docker startet den Implementierungsprozess der MySQL-Konfiguration

Inhaltsverzeichnis Tatsächlicher Kampfprozess Beg...

Problem beim Ändern der Tabellengröße mithilfe relativer Breiten

<tr> <th width="12%">AAAAA&l...

Erfahren Sie mehr über MySQL-Indizes

1. Indexierungsprinzip Indizes werden verwendet, ...

Einige kleine Methoden, die häufig in HTML-Seiten verwendet werden

Fügen Sie das Tag <Head> hinzu <meta http...