js Canvas zur Realisierung des Gobang-Spiels

In diesem Artikel wird der spezifische Code der Leinwand zur Implementierung des Gobang-Spiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Wirkung

Ideen

canvans zeichnet ein Schachbrett und lässt beim Zeichnen Platz für Schachfiguren am Rand
Achten Sie auf Klickereignisse, zeichnen Sie die Bewegungen auf und notieren Sie sie im Wörterbuch
Gewinnurteil: Prüfen Sie, ob in vier Richtungen genügend aufeinanderfolgende Teile vorhanden sind

Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>ym</title>
  <Stil>
    Leinwand {
      Anzeige: Block;
      Rand: 0 automatisch;
      Rand: 0
    }

    .Ergebnis {
      Textausrichtung: zentriert;
    }
    Taste{
      Anzeige: Block;
      Rand: 0 automatisch;
      Polsterung: 4px 20px;
      Rand: 0;
      Farbe: #fff;
      Gliederung: keine;
      Rahmenradius: 3px;
      Hintergrund: #43a6ff
    }
    Schaltfläche: schweben {
      Schriftstärke: fett;
      Cursor: Zeiger;
    }
  </Stil>
</Kopf>
<Text>
<canvas id="cv" width="200px" height="200px"></canvas>
<p class="Ergebnis"></p>
<button onclick="loadPanel(400, 400,30,13)">Aktualisieren</button>
<Skript>

  ladePanel(400, 400,30,13);

  /**
   * 1) Klicken Sie, um die Figur zu platzieren und den Spieler zu wechseln. * 2) Bestimmen Sie anhand der aktuellen Position der Figur mithilfe der Form „米“, ob sie fünf oder mehr aufeinanderfolgende Figuren bilden kann. * @param w Schachbrettbreite * @param h Schachbretthöhe * @param cs Rastergröße * @param ps Schachfigurenradius */
  Funktion loadPanel(b, h, c, ps) {
    sei i, j, k;
    let chks = [[1, 0], [0, 1], [1, 1], [1, -1]]; // horizontal, vertikal, diagonal nach unten, diagonal nach oben let successNum = 5; // Gewinnstandard let resultEl = document.querySelector('.result');

    //1) Zeichnen Sie das Schachbrett, die Kanten sollten durch den Radius der Schachfigur getrennt sein cs = cs || 16; //Standardmäßige Rasterbreite und -höhe ps = ps || 4; //Radius der Schachfigur h = h || w; //Höhe ist standardmäßig gleich Breite let el = document.getElementById('cv');
    el.setAttribute('Breite', w + 'px');
    el.setAttribute('Höhe', h + 'px');
    let Kontext = el.getContext("2d");
    // Schachbrettteilung berechnen und abrunden let splitX = ~~((w - 2 * ps) / cs), splitY = ~~((h - 2 * ps) / cs);

    // Initialisieren Sie die Position der Teile mithilfe der Wörterbuchspeicherung. Dies ist einfacher als Arrays und reduziert den Speicherbedarf. let pieces = {};
    //Linienzeichnung in Schleife context.translate(ps, ps);
    Kontext.beginPath();
    Kontext.StrokeStyle = "#000";
    //vertikale Linie für (i = 0; i < splitX + 1; i++) {
      Kontext.VerschiebeNach(cs * i, 0);
      Kontext.lineTo(cs * i, splitY * cs);
      Kontext.Strich();
    }
    //Horizontale Linie für (j = 0; j < splitY + 1; j++) {
      Kontext.VerschiebeNach(0, cs * j);
      Kontext.lineTo(splitX * cs, cs * j);
      Kontext.Strich();
    }
    Kontext.Pfad schließen();

    let Benutzer = 0, Farben = ['#000', '#fefefe'];
    el.addEventListener('klicken', Funktion (e) {
      sei x = e.offsetX,
        y = e.offsetY,
        //Berechnen Sie den Bewegungsbereich rx = ~~((x - ps) / cs) + (((x - ps) % cs <= cs / 2) ? 0 : 1),
        ry = ~~((y - ps) / cs) + (((y - ps) % cs <= cs / 2) ? 0 : 1);
      //Zeichne die Schachfigurcontext.beginPath();
      Kontext.arc(cs * rx, cs * ry, ps, 2 * Math.PI, false);
      Kontext.Füllstil = Farben[Benutzer];
      Kontext.StrokeStyle = "#000";
      Benutzer? Benutzer = 0 : Benutzer = 1; //Spieler wechseln context.fill();
      Kontext.Strich();
      Kontext.Pfad schließen();

      //Position der Schachfigur aufzeichnen let piece = pieces[rx + '-' + ry] = user;

      // M-förmige Berechnungsergebnisse. Berechnen Sie anhand der aktuellen Schachposition, ob sich in einer bestimmten Richtung fünf aufeinanderfolgende identische Schachfiguren befinden for (j = 0; j < chks.length; j++) {
        sei num = 1, chk = chks[j];
        für (i = 1; i <= 4; i++) {
          wenn (Stücke[(rx + chk[0] * i) + '-' + (ry + chk[1] * i)] == Stück) {
            Zahl++
          } anders {
            für (i = -1; i >= -4; i--) {
              wenn (Stücke[(rx + chk[0] * i) + '-' + (ry + chk[1] * i)] == Stück) {
                Zahl++
              }
            }
            brechen
          }
        }
        wenn (num == Erfolgszahl) {
          resultEl.innerHTML = ['weiß', 'schwarz'][Benutzer] + 'Fang gewinnt';
          brechen;
        }
      }
    })
  }
</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:

Javascript und HTML5 verwenden Canvas, um ein Web-Gobang-Spiel zu erstellen und den Algorithmus zu implementieren
JS Canvas zeichnet das Gobang-Schachbrett
Natives JS+Canvas zur Implementierung des Gobang-Spielbeispiels
Gobang-Spiel implementiert mit JS+Canvas [Man vs. Machine-Version]
Natives JS+Canvas zur Implementierung des Gobang-Spiels
js+canvas zur Realisierung des Gobang-Spiels
Detaillierte Erläuterung der Schritte zur Implementierung des Mensch-Computer-Kampfes von JS + Canvas Gobang
JS+Canvas zur Realisierung des Gobang-Spiels
Verwenden von JS-Canvas zur Realisierung des Gobang-Spiels
JavaScript+Canvas zur Implementierung des Gobang-Spiels

<<: So konfigurieren Sie die Basic Auth-Anmeldeauthentifizierung in Nginx

>>: Detailliertes Tutorial zur Installation von MySQL unter Linux