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

Detailliertes Beispiel für MySQL ähnlich dem Schreiben von Oracle Rownum

Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)

Artikel

JavaScript zur Implementierung der Webversion des Gobang-Spiels

Detailliertes Beispiel für MySQL ähnlich dem Schreiben von Oracle Rownum

Zusammenfassung des Wissens über MySql-Speicher-Engines und Indizes

So teilen Sie Daten in MySQL-Tabellen und -Datenbanken auf

Einführung in die grafischen Kompositions- und Satzfunktionen des Webdesigns

Unterschied zwischen den Methoden querySelector und getElementById in JS

Detaillierte Erklärung der Funktionen jedes Ports von Tomcat

HTML Mehrere spezielle Trennlinieneffekte

So stellen Sie eine Nextcloud-Netzwerkfestplatte mit Docker bereit

4 Lösungen für CSS-Browserkompatibilitätsprobleme

Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)

Artikel empfehlen

Eine kurze Einführung in React

So löschen Sie den gesamten Inhalt eines Verzeichnisses mit Ansible

Verwenden Sie das Docker-Buildkit, um ein Docker-Image zu erstellen, das auf dem Raspberry Pi verwendet werden kann

Erklären Sie den Unterschied zwischen Iframe und Frame in HTML anhand von Beispielen

So stellen Sie Confluence und Jira-Software in Docker bereit

MySQL-Datenbankgrundlagen - Prinzip der Join-Operation

So entfernen Sie die Unterstreichung eines Hyperlinks anhand von drei einfachen Beispielen

Detaillierte Erklärung zum Erstellen geplanter MySql-Aufgaben in Navicat

Mysql fragt die ausgeführten Transaktionen ab und wie auf Sperren gewartet werden soll

Installationsprozess des mysql5.6.8-Quellcodes

Führen Sie die Schritte zum Einrichten automatischer Updates in CentOS 8 aus

So verbergen Sie die Versionsnummer und die Cache-Zeit von Webseiten in Nginx

Detailliertes Tutorial zur VMware-Installation des Linux CentOS 7.7-Systems

Detaillierte Erklärung des Konflikts zwischen Flex-Layout und Position: absolut/fest

Detaillierte Erläuterung der MySQL-Datenzeilen und des Zeilenüberlaufmechanismus