VUE+Canvas realisiert den gesamten Prozess eines einfachen Gobang-Spiels

VUE+Canvas realisiert den gesamten Prozess eines einfachen Gobang-Spiels

Vorwort

In Bezug auf das Layout ist Gobang viel einfacher umzusetzen als Spiele, deren Ziel zufällige Bewegung ist, und die Ideen sind auch klar. Es ist unterteilt in:

(1) Zeichnen Sie ein Schachbrett;

(2) Auf Klickereignisse achten und schwarze und weiße Schachfiguren zeichnen;

(3) Nach jedem Zug wird festgestellt, ob 5 Steine ​​verbunden sind. Wenn ja, haben Sie gewonnen.

Am kompliziertesten ist wahrscheinlich die Frage, ob Gobang gewonnen hat. Beginnen wir also mit dem Einfachen und zeichnen ein Schachbrett.

1. Zeichne ein Schachbrett

Das Schachbrett ist sehr einfach. Zeichnen wir ein 15x15 Schachbrett mit sich kreuzenden horizontalen und vertikalen Linien:

zeichneSchachbrett() {
      // Schachbrett zeichnen let _this = this;
      _this.ctx.beginPath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.rect(0, 0, 450, 450);
      _this.ctx.fill();
      für (var i = 0; i < 15; i++) {
        _this.ctx.beginPath();
        _this.ctx.strokeStyle = "#D6D1D1";
        _this.ctx.moveTo(15 + i * 30, 15); //Zeichne 15 vertikale Linien im Abstand von 30 Pixeln;
        _this.ctx.lineTo(15 + i * 30, 435);
        _this.ctx.stroke();
        _this.ctx.moveTo(15, 15 + i * 30); //Zeichne 15 Linien horizontal im Abstand von 30 Pixeln;
        _this.ctx.lineTo(435, 15 + i * 30);
        _this.ctx.stroke();
 
        _this.resultArr.push(neues Array(15).fill(0));
      }
}

Verwenden Sie zunächst ein 450 x 450 großes Quadrat als Basis, lassen Sie drumherum einen 15 cm breiten Freiraum und zeichnen Sie dann Linien im Abstand von 30. In der For-Schleife haben wir auch ein zweidimensionales Array 15 x 15 initialisiert und mit Nullen gefüllt. Ja, es wird verwendet, um die Züge aufzuzeichnen.

2. Achten Sie auf Klickereignisse, um schwarze und weiße Schachfiguren zu zeichnen

OK, wenn wir das DOM erhalten, hören wir auf das Klickereignis, um die Schachfigur zu zeichnen:

let container = document.getElementById("gobang");

container.addEventListener("klicken", _this.handleClick);

handleClick(Ereignis) {
      sei x = Ereignis.OffsetX – 70;
      sei y = event.offsetY - 70;
      wenn (x < 15 || x > 435 || y < 15 || y > 435) {
        // Klick außerhalb der Grenzen return;
      }
      dies.drawChess(x, y);
      wenn(dieses.winGame){
        dies.drawResult();
        zurückkehren;
      }
      diese.weißeTurn = !diese.weißeTurn;
      dies.drawText();
}

Code zum Zeichnen von Schachfiguren:

zeichneSchach(x, y) {
      lass _this = dies;
      let xLine = Math.round((x - 15) / 30); // vertikale Zeilennummer x let yLine = Math.round((y - 15) / 30); // horizontale Zeilennummer y if(_this.resultArr[xLine][yLine] !== 0){
        zurückkehren;
      }
      let grd = _this.ctx.createRadialGradient(
        xLinie * 30 + 15,
        yLinie * 30 + 15,
        4,
        xLinie * 30 + 15,
        yLinie * 30 + 15,
        10
      );
      grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
      grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
      _this.ctx.beginPath();
      _this.ctx.fillStyle = grd;
      _diese.ctx.arc(
        xLinie * 30 + 15,
        yLinie * 30 + 15,
        10,
        0,
        2 * Mathe.PI,
        FALSCH
      );
      _this.ctx.fill();
      _this.ctx.closePath();
 
      _this.setResultArr(xLine, yLine);
      _this.checkResult(xLine, yLine);
}

Es ist einfach, den Schachbrettschnittpunkt zu berechnen, der den Klickkoordinaten am nächsten liegt. Wenn dort bereits eine Figur platziert wurde, müssen Sie natürlich zurückkehren. Zeichnen Sie dann an den Schnittpunkten weiße oder schwarze Figuren und verwenden Sie hier eine Verlaufsfüllung, damit die Schachfiguren realistischer aussehen. Als nächstes zeichnen Sie den Status der Schachfiguren im entsprechenden zweidimensionalen Array auf:

setResultArr(m, n) {
      lass _this = dies;
      _this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // Weiß ist 1; Schwarz ist 2
 
}

3. Überprüfen Sie die Gewinn- und Verlustergebnisse von Gobang

Wie lässt sich bestimmen, ob man gewinnt oder verliert? Für das bloße Auge ist es nichts anderes, als ein Koordinatensystem mit dem aktuellen Zug als Ursprung 0,0 zu erstellen und dann zu bestimmen, ob sich auf den vier Linien von 0°, 180°, 45° und 135° 5 aufeinanderfolgende Stücke befinden. Im Vergleich zum direkten Durchlaufen und Zählen besteht eine bessere Methode darin, die Daten auf vier Zeilen herauszunehmen und dann zu bestimmen, ob 5 aufeinanderfolgende 1 oder 2 Zeichen vorhanden sind.

Angenommen, die Array-Koordinaten unserer Platzierung sind [m, n].

(1) Ergebnis-Array-String der horizontalen Linie: this.resultArr[m].join('');

(2) Ergebnis-Array-String der vertikalen Linie:

für (lass i = 0; i<15; i++) {
        ZeileHorizontal.push(_this.resultArr[i][n]);

}

(3) 135° (von oben links nach unten rechts): j reicht von 0 bis 15, nehmen Sie this.resultArr[m - j][n - j] und verschieben Sie es zurück in den Kopf des temporären Arrays, nehmen Sie this.resultArr[m + j][n + j] und setzen Sie es ans Ende des temporären Arrays, um das Ergebnis zu bilden;

(4) 45° (unten links nach oben rechts): j reicht von 0 bis 15, nehmen Sie this.resultArr[m + j][n - j] und verschieben Sie es zurück in den Kopf des temporären Arrays, nehmen Sie this.resultArr[m - j][n + j] und setzen Sie es an das Ende des temporären Arrays, um das Ergebnis zu bilden;

Natürlich müssen wir beurteilen, ob das Array außerhalb der Grenzen liegt.

Nachdem wir die Ergebniszeichenfolge erhalten haben, prüfen wir, ob eine Zeichenfolge wie „22222“ oder „11111“ vorhanden ist. Wenn ja, bedeutet dies einen Sieg.

checkResult(m, n){ // Prüfen, ob 5 verbundene Teile vorhanden sind let _this = this;
      lass checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
      // Nehmen Sie das eindimensionale Array aus vier Zeilen [m,n] heraus. let lineVertical = _this.resultArr[m].join('');
      wenn (lineVertical.indexOf(checkStr) > -1) {
        _this.winGame = wahr;
        zurückkehren;
      }
      lass ZeileHorizontal = [];
      für (lass i = 0; i<15; i++) {
        ZeileHorizontal.push(_this.resultArr[i][n]);
      }
      LinieHorizontal = LinieHorizontal.join('');
      wenn (lineHorizontal.indexOf(checkStr) > -1) {
        _this.winGame = wahr;
        zurückkehren;
      }
      lass Zeile135 = [];
      für(lass j = 0; j < 15; j++){
        if(m - j >= 0 && n - j >= 0){ // Obere linke Ecke line135.unshift(_this.resultArr[m - j][n -j]);
        }
        if(j > 0 && m + j < 15 && n + j < 15){ // Untere rechte Ecke line135.push(_this.resultArr[m + j][n + j]);
        }
      }
      Zeile135 = Zeile135.join('');
      wenn(line135.indexOf(checkStr) > -1){
        _this.winGame = wahr;
        zurückkehren;
      }
      lass Zeile45 = [];
      für(lass j = 0; j < 15; j++){
        if(m + j < 15 && n - j >= 0){ // Obere rechte Ecke line45.unshift(_this.resultArr[m + j][n -j]);
        }
        if(j > 0 && m - j >=0 && n + j < 15){ // Untere linke Ecke line45.push(_this.resultArr[m - j][n + j]);
        }
      }
      Zeile45 = Zeile45.join('');
      wenn(line45.indexOf(checkStr) > -1){
        _this.winGame = wahr;
        zurückkehren;
      }
}

Abschließend zeigen wir, welche Seite gewinnt.

An diesem Punkt ist ein einfaches Schwarz-Weiß-Schachspiel fertig~~~~~

Wie üblich ist hier der Quellcode:

<Vorlage>
  <div Klasse="gobang">
    <canvas id="gobang" width="800" height="600"></canvas>
  </div>
</Vorlage>
 
<Skript>
const CheckStrWhite = "11111";
const CheckStrBlack = "22222";
Standard exportieren {
  Name: "Gobang",
  Daten() {
    zurückkehren {
      ctx: null,
      winGame: falsch,
      whiteTurn: false, // Weißer Zug; true - Schwarzer ZugresultArr: [] // Array mit den Positionen der Schachfiguren};
  },
  montiert() {
    lass _this = dies;
    let container = document.getElementById("gobang");
 
    container.addEventListener("klicken", _this.handleClick);
 
    _this.ctx = container.getContext("2d");
    _diese.ctx.translate(70,70);
    _this.drawCheckerboard();
  },
  berechnet:{
    SchachText(){
      returniere this.whiteTurn? „Weißes Schach“: „Schwarzes Schach“;
    }
  },
  Methoden: {
    zeichneSchachbrett() {
      // Schachbrett zeichnen let _this = this;
      _this.ctx.beginPath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.rect(0, 0, 450, 450);
      _this.ctx.fill();
      für (var i = 0; i < 15; i++) {
        _this.ctx.beginPath();
        _this.ctx.strokeStyle = "#D6D1D1";
        _this.ctx.moveTo(15 + i * 30, 15); //Zeichne 15 vertikale Linien im Abstand von 30 Pixeln;
        _this.ctx.lineTo(15 + i * 30, 435);
        _this.ctx.stroke();
        _this.ctx.moveTo(15, 15 + i * 30); // Zeichne 15 Linien horizontal, 30px voneinander entfernt; das Schachbrett ist 14*14;
        _this.ctx.lineTo(435, 15 + i * 30);
        _this.ctx.stroke();
 
        _this.resultArr.push(neues Array(15).fill(0));
      }
      _this.drawText();
    },
    zeichneSchach(x, y) {
      lass _this = dies;
      let xLine = Math.round((x - 15) / 30); // vertikale Zeilennummer x let yLine = Math.round((y - 15) / 30); // horizontale Zeilennummer y if(_this.resultArr[xLine][yLine] !== 0){
        zurückkehren;
      }
      let grd = _this.ctx.createRadialGradient(
        xLinie * 30 + 15,
        yLinie * 30 + 15,
        4,
        xLinie * 30 + 15,
        yLinie * 30 + 15,
        10
      );
      grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
      grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
      _this.ctx.beginPath();
      _this.ctx.fillStyle = grd;
      _diese.ctx.arc(
        xLinie * 30 + 15,
        yLinie * 30 + 15,
        10,
        0,
        2 * Mathe.PI,
        FALSCH
      );
      _this.ctx.fill();
      _this.ctx.closePath();
 
      _this.setResultArr(xLine, yLine);
      _this.checkResult(xLine, yLine);
    },
    setResultArr(m, n) {
      lass _this = dies;
      _this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // Weiß ist 1; Schwarz ist 2
 
    },
    
    checkResult(m, n){ // Prüfen, ob 5 verbundene Teile vorhanden sind let _this = this;
      lass checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
      // Nehmen Sie das eindimensionale Array aus vier Zeilen [m,n] heraus. let lineVertical = _this.resultArr[m].join('');
      wenn (lineVertical.indexOf(checkStr) > -1) {
        _this.winGame = wahr;
        zurückkehren;
      }
      lass ZeileHorizontal = [];
      für (lass i = 0; i<15; i++) {
        ZeileHorizontal.push(_this.resultArr[i][n]);
      }
      LinieHorizontal = LinieHorizontal.join('');
      wenn (lineHorizontal.indexOf(checkStr) > -1) {
        _this.winGame = wahr;
        zurückkehren;
      }
      lass Zeile135 = [];
      für(lass j = 0; j < 15; j++){
        if(m - j >= 0 && n - j >= 0){ // Obere linke Ecke line135.unshift(_this.resultArr[m - j][n -j]);
        }
        if(j > 0 && m + j < 15 && n + j < 15){ // Untere rechte Ecke line135.push(_this.resultArr[m + j][n + j]);
        }
      }
      Zeile135 = Zeile135.join('');
      wenn(line135.indexOf(checkStr) > -1){
        _this.winGame = wahr;
        zurückkehren;
      }
      lass Zeile45 = [];
      für(lass j = 0; j < 15; j++){
        if(m + j < 15 && n - j >= 0){ // Obere rechte Ecke line45.unshift(_this.resultArr[m + j][n -j]);
        }
        if(j > 0 && m - j >=0 && n + j < 15){ // Untere linke Ecke line45.push(_this.resultArr[m - j][n + j]);
        }
      }
      Zeile45 = Zeile45.join('');
      wenn(line45.indexOf(checkStr) > -1){
        _this.winGame = wahr;
        zurückkehren;
      }
    },
    zeichneText(){
      lass _this = dies;
      _this.ctx.clearRect(435 + 60, 0, 100, 70);
      _this.ctx.fillStyle = "#fff";
      _this.ctx.font="20px Arial";
      _this.ctx.fillText('Diese Runde:' + _this.chessText, 435 + 70, 35);
    },
    Ergebnis zeichnen(){
      lass _this = dies;
      _this.ctx.fillStyle = "#ff2424";
      _this.ctx.font="20px Arial";
      _this.ctx.fillText(_this.chessText+'Gewinnen!', 435 + 70, 70);
    },
    handleClick(Ereignis) {
      sei x = Ereignis.OffsetX – 70;
      sei y = event.offsetY - 70;
      wenn (x < 15 || x > 435 || y < 15 || y > 435) {
        // Klick außerhalb der Grenzen return;
      }
      dies.drawChess(x, y);
      wenn(dieses.winGame){
        dies.drawResult();
        zurückkehren;
      }
      diese.weißeTurn = !diese.weißeTurn;
      dies.drawText();
    }
  }
};
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<style scoped lang="scss">
.gobang {
  #gehbang {
    Hintergrund: #2a4546;
  }
}
</Stil>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung eines einfachen Gobang-Spiels mit VUE+Canvas. Weitere verwandte Inhalte zum VUE+Canvas-Gobang-Spiel finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Vue implementiert Gobang-Spiel
  • Vue implementiert Gobang-Spiel

<<:  Detaillierte Erklärung zur Installation der PHP-Curl-Erweiterung unter Linux

>>:  Detaillierte Erklärung der Beziehung zwischen dem Primärschlüsselwert 0 und der Selbstauswahlbeschränkung des Primärschlüssels in MySQL (Details)

Artikel empfehlen

IE6/7 wird ein Chaos: Problem mit der Höhe leerer Textknoten

Vorwort: Verwenden Sie die Debugleiste, um den Dok...

Einige „Fallstricke“ beim Upgrade der MySQL-Datenbank

Bei kommerziellen Datenbanken hat die Datenbankak...

Lösung für die Inkonsistenz zwischen Crontab-Ausführungszeit und Systemzeit

Vorwort Unter LINUX werden periodische Aufgaben n...

Verwenden von jQuery zum Implementieren des Karusselleffekts

Was ich Ihnen heute zeige, ist die Verwendung von...

Analyse des Implementierungsprozesses der Nginx-Hochverfügbarkeitslösung in der Produktionsumgebung

Vorbereitung: 192.168.16.128 192.168.16.129 Zwei ...

MySQL lernen: Drei Paradigmen für Anfänger

Inhaltsverzeichnis 1. Paradigmenfundament 1.1 Der...

Implementierung der Elementzeitleiste

Inhaltsverzeichnis Komponenten - Zeitleiste Benut...

Einführung in die Überwachung des MySQL MHA-Betriebsstatus

Inhaltsverzeichnis 1. Projektbeschreibung 1.1 Hin...

Eine kurze Analyse der asynchronen DOM-Aktualisierung von Vue

Inhaltsverzeichnis Das Prinzip der asynchronen DO...

Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)

Die aktuellste Version von CentOS ist CentOS 8. A...

Jenkins verpackt Microservices, um Docker-Images zu erstellen und auszuführen

Inhaltsverzeichnis Umgebungsvorbereitung Start 1....

So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet

Herkunft Zurzeit arbeite ich an Anforderung A, in...

Detaillierte Erklärung der Slots in Vue

Die Wiederverwendung von Code in Vue liefert uns ...

Detaillierte Erläuterung der gespeicherten Prozedur „MySql View Trigger“

Sicht: Wenn eine temporäre Tabelle wiederholt ver...

Beheben Sie das Problem, dass das Elementbearbeitungsformular el-radio nach dem Echo nicht ausgewählt werden kann

Inhaltsverzeichnis Vorwort Frage Online-Lösungen ...