JavaScript zur Implementierung der Webversion des Gobang-Spiels

JavaScript zur Implementierung der Webversion des Gobang-Spiels

In diesem Artikel wird der spezifische Code für JavaScript zur Implementierung der Webversion des Gobang-Spiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Am dritten Tag des JS-Lernens habe ich mit dem Lehrer ein Gobang-Spiel absolviert, um meine Lernergebnisse aufzuzeichnen. Ich freue mich über den Erfahrungsaustausch und die Kritik der Experten.

Die Umsetzung dieses Programms erfolgt im Wesentlichen in drei Teilen:

1. Schachbrettzeichnung
2. Mausinteraktion
3. Urteilsvermögen gewinnen oder verlieren

 <!DOCTYPE html>
<html>
<Kopf>
  <Titel>
    Leinwandtest
    </Titel>
</Kopf>
<Text>
     <h1>Leinwand</h1>
     <Leinwand-ID="Leinwand"Breite="400"Höhe="400">
     </Leinwand>

     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

  <Skript>
   var canv = document.getElementById("Leinwand");
   var ctx = canv.getContext("2d");
   ctx.strokeStyle="schwarz";
   var Bogen = 0;

//Zeichne das Schachbrett;
var Matrix = [

  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                                              ];

ctx.beginPath();

für(var i=0;i<19;i++){

       ctx.moveTo(10+20*i,10);
       ctx.lineTo(10+i*20,370);
       ctx.moveTo(10,20*i+10);
       ctx.lineTo(370,i*20+10);

}
 ctx.stroke();
 
 //Mausinteraktion;
  $("#canvas").click(Funktion(Ereignis)
      {
      Konsole.log(Ereignis.OffsetX)


      Konsole.log(Bogen);
      var arcPosX,arcPosY;
     var mtxPosX, mtxPosY;
      für (var x=0;x<19;x++)
      {
      wenn((Math.abs(event.offsetX-(10+x*20)))<10)
        {
       BogenPosX=10+x*20;
       mtxPosX=x;
        }
      wenn((Math.abs(event.offsetY-(10+x*20)))<10)
         {
        BogenPosY=10+x*20;
        mtxPosY=x;
          }
      }

      wenn(Matrix[mtxPosX][mtxPosY] == 0)
      {
      Bogen=!Bogen;
      ctx.beginPath();
      wenn(sich verbeugen){

      ctx.fillStyle="Schwarz";
      ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false);
      Matrix[mtxPosX][mtxPosY]=1;
      }
      anders{
      ctx.fillStyle="Weiß";
      ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false);
      ctx.stroke();
      Matrix[mtxPosX][mtxPosY]=2;
      }
      ctx.fill();
      }
      //Gewinn- oder Niederlagenentscheidung realisieren var winFlag=0;
wenn(winFlag==0){
wenn(Matrix[mtxPosX-1][mtxPosY] == Matrix[mtxPosX][mtxPosY])
              {
               wenn (Matrix[mtxPosX-2][mtxPosY] == Matrix[mtxPosX][mtxPosY])
               {
                wenn (Matrix[mtxPosX-3][mtxPosY] == Matrix[mtxPosX][mtxPosY])
                {
                 wenn (Matrix[mtxPosX-4][mtxPosY] == Matrix[mtxPosX][mtxPosY])
                 {
                  WinFlag = 1;
                 }
                 anders
                 {
                  wenn (Matrix[mtxPosX+1][mtxPosY] == Matrix[mtxPosX][mtxPosY])
                  {
                   WinFlag = 1;
                  }
                  anders
                  {
                   winFlag = 0;
                  }
                 }
                }
                anders
                {
                 für(var w = 0; w < 2; w++)
                 {
                  wenn(Matrix[mtxPosX+w+1][mtxPosY] != Matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   brechen;
                  }
                  anders
                  {
                   WinFlag = 1;
                  }
                 }
                }
               }
               anders
               {
                für(var w = 0; w < 3; w++)
                {
                 wenn(Matrix[mtxPosX+w+1][mtxPosY] != Matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  brechen;
                 }
                 anders
                 {
                  WinFlag = 1;
                 }
                }
               }
              }
              anders
              {
               für (var w = 0; w < 4; w++)
               {
                wenn(Matrix[mtxPosX+w+1][mtxPosY] != Matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 brechen;
                }
                anders
                {
                 WinFlag = 1;
                }
               }
              }

wenn(Matrix[mtxPosX][mtxPosY-1] == Matrix[mtxPosX][mtxPosY])
              {
               wenn (Matrix[mtxPosX][mtxPosY-2] == Matrix[mtxPosX][mtxPosY])
               {
                wenn (Matrix[mtxPosX][mtxPosY-3] == Matrix[mtxPosX][mtxPosY])
                {
                 wenn (Matrix[mtxPosX][mtxPosY-4] == Matrix[mtxPosX][mtxPosY])
                 {
                  WinFlag = 1;
                 }
                 anders
                 {
                  wenn (Matrix[mtxPosX][mtxPosY+1] == Matrix[mtxPosX][mtxPosY])
                  {
                   WinFlag = 1;
                  }
                  anders
                  {
                   winFlag = 0;
                  }
                 }
                }
                anders
                {
                 für(var w = 0; w < 2; w++)
                 {
                  wenn(Matrix[mtxPosX][mtxPosY+w+1] != Matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   brechen;
                  }
                  anders
                  {
                   WinFlag = 1;
                  }
                 }
                }
               }
               anders
               {
                für(var w = 0; w < 3; w++)
                {
                 wenn(Matrix[mtxPosX][mtxPosY+w+1] != Matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  brechen;
                 }
                 anders
                 {
                  WinFlag = 1;
                 }
                }
               }
                         }
              anders
              {
               für (var w = 0; w < 4; w++)
               {
                wenn(Matrix[mtxPosX][mtxPosY+w+1] != Matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 brechen;
                }
                anders
                {
                 WinFlag = 1;
                }
               }
              }

  wenn(Matrix[mtxPosX-1][mtxPosY-1] == Matrix[mtxPosX][mtxPosY])
                {
                 wenn (Matrix[mtxPosX-2][mtxPosY-2] == Matrix[mtxPosX][mtxPosY])
                 {
                  wenn (Matrix[mtxPosX-3][mtxPosY-3] == Matrix[mtxPosX][mtxPosY])
                  {
                   wenn (Matrix[mtxPosX-4][mtxPosY-4] == Matrix[mtxPosX][mtxPosY])
                   {
                    WinFlag = 1;
                   }
                   anders
                   {
                    wenn (Matrix [mtxPosX + 1] [mtxPosY + 1] == Matrix [mtxPosX] [mtxPosY])
                    {
                     WinFlag = 1;
                    }
                    anders
                    {
                     winFlag = 0;
                    }
                   }
                  }
                  anders
                  {
                   für(var w = 0; w < 2; w++)
                   {
                    wenn(Matrix[mtxPosX+w+1][mtxPosY+w+1] != Matrix[mtxPosX][mtxPosY])
                    {
                     winFlag = 0;
                     brechen;
                    }
                    anders
                    {
                     WinFlag = 1;
                    }
                   }
                  }
                 }
                 anders
                 {
                  für(var w = 0; w < 3; w++)
                  {
                   wenn(Matrix[mtxPosX+w+1][mtxPosY+w+1] != Matrix[mtxPosX][mtxPosY])
                   {
                    winFlag = 0;
                    brechen;
                   }
                   anders
                   {
                    WinFlag = 1;
                   }
                  }
                 }
                }
                anders
                {
                 für (var w = 0; w < 4; w++)
                 {
                  wenn(Matrix[mtxPosX+w+1][mtxPosY+w+1] != Matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   brechen;
                  }
                  anders
                  {
                   WinFlag = 1;
                  }
                 }
              }

   wenn (Matrix[mtxPosX-1][mtxPosY+1] == Matrix[mtxPosX][mtxPosY])
              {
               wenn (Matrix[mtxPosX-2][mtxPosY+2] == Matrix[mtxPosX][mtxPosY])
               {
                wenn (Matrix[mtxPosX-3][mtxPosY+3] == Matrix[mtxPosX][mtxPosY])
                {
                 wenn (Matrix[mtxPosX-4][mtxPosY+4] == Matrix[mtxPosX][mtxPosY])
                 {
                  WinFlag = 1;
                 }
                 anders
                 {
                  wenn(Matrix[mtxPosX+1][mtxPosY-1] != Matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                  }
                  anders
                  {
                   WinFlag = 1;
                  }
                 }
                }
                anders
                {
                 für(var w = 0; w < 2; w++)
                 {
                  wenn(Matrix[mtxPosX+w+1][mtxPosY-w-1] != Matrix[mtxPosX][mtxPosY])
                  {
                   winFlag = 0;
                   brechen;
                  }
                  anders
                  {
                   WinFlag = 1;
                  }
                 }
                }
               }
               anders
               {
                für(var w = 0; w < 3; w++)
                {
                 wenn(Matrix[mtxPosX+w+1][mtxPosY-w-1] != Matrix[mtxPosX][mtxPosY])
                 {
                  winFlag = 0;
                  brechen;
                 }
                 anders
                 {
                  WinFlag = 1;
                 }
                }
               }
              }
              anders
              {
               für (var w = 0; w < 4; w++)
               {
                wenn(Matrix[mtxPosX+w+1][mtxPosY-w-1] != Matrix[mtxPosX][mtxPosY])
                {
                 winFlag = 0;
                 brechen;
                }
                anders
                {
                 WinFlag = 1;
                }
               }
              }
    }
              wenn(winFlag == 1){
         wenn (sich verbeugen)
         alert("Schwarz gewinnt!");
         anders
                         alert("Weiß gewinnt!");
              }
      });

  </Skript>
</body>
</html>

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
  • Gobang-Spiel implementiert mit JS+Canvas [Man vs. Machine-Version]
  • JavaScript-Anfänger-Tutorial und einfache Implementierung des Gobang-Applets

<<:  So installieren Sie eine MySQL-Datenbank unter Ubuntu

>>:  Zeigen Sie die Festplatten-E/A in Linux an und finden Sie die Prozesse heraus, die viel Lese- und Schreib-E/A beanspruchen

Artikel empfehlen

Tutorial zur Installation des AutoFs-Mount-Dienstes unter Linux

Unabhängig davon, ob es sich um einen Samba-Diens...

Detaillierte Erklärung der grep- und egrep-Befehle in Linux

Vertreter / egrep Syntax: grep [-cinvABC] 'wo...

Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

Vorwort Bei der Projektfreigabe ist immer eine Ve...

MySQL-Datenbank zum Abrufen der Angaben zu Sekunden, Minuten, Stunden und Tagen vor und nach

Aktuelle Uhrzeit abrufen: Wählen Sie aktuellen Ze...

jQuery realisiert dynamische Partikeleffekte

In diesem Artikel wird der spezifische Code von j...

Lösung für das MySQL-Fehlerproblem 1045 (28000)

Ich bin auf den MySQL-FEHLER 1045 gestoßen und ha...

So führen Sie Linux-Befehle im Hintergrund aus

Wenn Sie einen Befehl im Terminal ausführen, müss...

JavaScript-Datenvisualisierung: ECharts-Kartenerstellung

Inhaltsverzeichnis Überblick Vorsichtsmaßnahmen 1...

Miniprogramme nutzen die Miniprogramm-Cloud zur Implementierung von WeChat-Zahlungsfunktionen

Inhaltsverzeichnis 1. WeChat Pay öffnen 1.1 Partn...

Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen

Nginx entscheidet zunächst, welcher Serverblock i...

MySQL-Lernen (VII): Detaillierte Erläuterung des Implementierungsprinzips des Innodb Storage Engine-Index

Überblick In einer Datenbank wird ein Index verwe...

Vue verwendet drei Methoden zum Aktualisieren der Seite

Beim Schreiben von Projekten stoßen wir häufig au...

So erstellen Sie schnell einen FTP-Dateidienst mit FileZilla

Um die Speicherung und den Zugriff auf Dateien zu...

jQuery implementiert die Funktion zum Hinzufügen und Löschen von Mitarbeiterinformationen

In diesem Artikel wird der spezifische Code von j...

Importieren von CSS-Dateien unter Verwendung von Beurteilungsbedingungen

Lösung 1: Verwenden Sie bedingten Import im HTML-...