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

Konfigurationsschema für die MySQL-Master-Slave-Synchronisierung unter dem Centos7-System

Vorwort Bei der Arbeit an einem Hochverfügbarkeit...

Detaillierte Erklärung der CSS-Zeilenhöhe und -Höhe

Als ich kürzlich an CSS-Schnittstellen arbeitete,...

Implementierungsbeispiel für eine einfache Vue-Registrierungsseite + Funktion zum Senden eines Bestätigungscodes

Inhaltsverzeichnis 1. Effektanzeige 2. Verbessert...

So optimieren Sie den Logikbeurteilungscode in JavaScript

Vorwort Zu den logischen Urteilsaussagen, die wir...

Kompatibilität mit der Inline-Block-Eigenschaft

<br />Vor einem Jahr gab es im Internet kein...

Detaillierte Erläuterung zum automatischen Aktualisieren der Seite und zur Aktualisierungsmethode nach dem Löschen von Vue-Listendaten

Problembeschreibung: Nachdem das Front-End Daten ...

So richten Sie geplante Sicherungsaufgaben in Linux CentOS ein

Implementierungsvorbereitung # Der Dateipfad muss...

Detaillierte Erläuterung der drei Möglichkeiten zum Importieren von CSS-Dateien

Es gibt drei Möglichkeiten, CSS einzuführen: Inli...

So implementieren Sie die Kopierschutzfunktion für Webseiten (mit der Cracking-Methode)

Durch einen Rechtsklick auf die Quelldatei wird fo...

Linux: Fünf-Schritte-Kernel-Build-Baum

Inhaltsverzeichnis 0. Der mit dem System geliefer...

CSS3-Flip-Card-Nummern-Beispielcode

Ich habe heute eine Aufgabe von der Firma erhalte...

Häufig verwendete HTML-Meta-Tag-Attribute (erforderlich für Website-Kompatibilität und -Optimierung)

Original-URL: http://segmentfault.com/blog/ciaocc/...

Detaillierte Erläuterung der MySQL-Replikationsprinzipien und praktischen Anwendungen

Dieser Artikel veranschaulicht anhand von Beispie...

Grundkenntnisse zu MySQL – Lernhinweise

Datenbank anzeigen show databases; Erstellen eine...

MySQL 8.0.13 Installations- und Konfigurations-Tutorial unter CentOS7.3

1. Grundlegende Umgebung 1. Betriebssystem: CentO...