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
JS implementiert einfachen Kalendereffekt
In diesem Artikel wird der spezifische JS-Code zu...
Beispielcode für CSS-Bildanimationseffekte (Fotorahmen)
Dieser Artikel stellt den Beispielcode für CSS-Bi...
Der Effekt des Heranzoomens in einem Taobao-Shop ähnelt dem Prinzip einer Diashow.
Heute habe ich den Mauszoom-Effekt auf der Vorders...
Tutorial zur Installation von Ceph Distributed Storage mit Yum unter Centos7
Inhaltsverzeichnis Vorwort Konfigurieren Sie die ...
CSS-Syntax für Tabellenränder
<br /> CSS-Syntax für Tabellenränder Zu den ...
Rendering-Funktion und JSX-Details
Inhaltsverzeichnis 1. Grundlagen 2. Knoten, Bäume...
Detaillierte Erklärung des Unterschieds zwischen Docker-Compose-Ports und Expose
Es gibt zwei Möglichkeiten, Container-Ports in Do...
Die neue CSS-Funktion enthält Probleme beim Neuzeichnen und Neuanordnen von Steuerelementen.
Bevor die neue CSS-Eigenschaft „contain“ vorgeste...
So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird
1. Erstellen Sie ein neues Rabbitmq im Verzeichni...
Lösung - BASH: /HOME/JAVA/JDK1.8.0_221/BIN/JAVA: Unzureichende Berechtigungen
1) Geben Sie den Ordnerpfad ein, in dem die JDK-D...
Drei Eigenschaften von Javascript-Objekten
Inhaltsverzeichnis 1. beschreibbar: beschreibbar ...
Implementierung einer vereinfachten Version von JSON.stringify und seine sechs Hauptfunktionen im Detail erklärt
Inhaltsverzeichnis Vorwort Sechs Funktionen von J...
vue-table implementiert das Hinzufügen und Löschen
In diesem Artikelbeispiel wird der spezifische Co...
Zusammenfassung der MySQL-Datums- und Zeitfunktionen (MySQL 5.X)
1. MySQL erhält die aktuelle Datums- und Uhrzeitf...
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...