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

Detaillierte Erläuterung zum Hinzufügen von Sicherheitsgruppenregeln zum Alibaba Cloud Server (grafisches Tutorial)

Überblick über die Alibaba Cloud Security Group F...

Mehrere Möglichkeiten zum Ändern der SELECT-Optionen in einer HTML-Dropdown-Box

Nachdem das Formular übermittelt wurde, wird die z...

Rastersysteme im Webdesign

Bildung des Gittersystems Im Jahr 1692 war der fr...

Detaillierte Erläuterung des zeitaufwändigen SQL-Beispiels für MySQL-Datensätze

MySQL zeichnet zeitaufwändiges SQL auf MySQL kann...

MySQL 8.0.12 Installations- und Konfigurations-Tutorial

Dieser Artikel enthält das ausführliche Tutorial ...

Beispielanalyse des Seitenaufteilungsprinzips des MySQL-Clusterindex

Dieser Artikel veranschaulicht anhand eines Beisp...

Entwicklungshandbuch für Chrome-Plugins (Erweiterungen) (vollständige Demo)

Inhaltsverzeichnis Vorne geschrieben Vorwort Was ...

Lösung zur Datenduplizierung bei Verwendung von Limit+Order By in der MySql-Paging

Inhaltsverzeichnis Zusammenfassung Problembeschre...

Detailliertes Tutorial zum Bereitstellen von Apollo mit Docker

1. Einleitung Ich werde hier nicht näher auf Apol...

So kommunizieren Sie zwischen dem WIN10-System und der internen Container-IP von Docker

1. Nach der Installation der Windows-Version von ...

CSS-Beispielcode zum Erzielen eines kreisförmigen Fortschrittsbalkeneffekts mit Farbverlauf

Umsetzungsideen Ganz außen ist ein großer Kreis (...

Vue führt weltweit SCSS (Mixin) ein

Inhaltsverzeichnis 1. mixin.scss 2. Einzeldateinu...

Zusammenfassung einiger Vorschläge zum HTML-Code-Schreibstil

Das Protokoll der Ressourcendatei weglassen Es wi...

React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

Ein sehr häufiges Szenario in react -Projekten: c...

Mehrere Möglichkeiten zur Implementierung der Vererbung in JavaScript

Inhaltsverzeichnis Strukturelle Vererbung (implem...