Detaillierter Prozess zur Implementierung des 2048-Minispiels im WeChat-Applet

Detaillierter Prozess zur Implementierung des 2048-Minispiels im WeChat-Applet

Rendern

Beispielcode

Heute werden wir das WeChat-Applet verwenden, um das Spiel 2048 umzusetzen. Das Effektdiagramm ist oben dargestellt. Die Spielregeln sind sehr einfach. Sie müssen alle Blöcke so steuern, dass sie sich in die gleiche Richtung bewegen. Zwei Blöcke mit den gleichen Zahlen verschmelzen nach einer Kollision zu ihrer Summe. Nach jeder Operation wird zufällig eine 2 oder 4 generiert. Sie gewinnen, wenn Sie am Ende einen Block „2048“ erhalten.

 // Konstruiere eine leere Matrix [[null,..,size.length],[]]
    leer: Funktion() {
        var Zellen = [];

        für (var x = 0; x < diese.Größe; x++) {
            var Zeile = Zellen[x] = [];

            für (var y = 0; y < diese.Größe; y++) {
                Zeile.push(null);
            }
        }

        // [[{x:0,y:0},{x:0,y:1}],[]]
        Rückgabezellen;
    },

Als Erstes müssen wir den Hauptteil des Spiels in 16 Raster unterteilen. Verwenden Sie Grid, um diese Gitter darzustellen. Anschließend führen diese Gitter die folgenden Operationen aus:

   // Wähle zufällig eine Zelle aus den leeren Zellen aus randomAvailableCell: function() {
    
    // Die ausfüllbaren Gitterkoordinaten abrufen availableCells: function() {
    
    // Gibt es eine leere Zelle cellsAvailable: function() 
    
    /* 
     * Zelleninhalt abrufen * @param {object} cell {x:0,y:0} Zellkoordinaten */
    Zelleninhalt: Funktion(Zelle) {

Die oben genannten Funktionen sind alle darauf ausgelegt, die nachfolgende Entwicklung zu erleichtern, sodass sie direkt ausgeführt werden können.

 // Daten initialisieren addStartTiles: function() {
        für (var x = 0; x < this.startTiles; x++) {
            dies.addRandomTiles();
        }
    },

    // Füllen Sie eine beliebige Zelle zufällig mit 2 oder 4
    addRandomTiles: Funktion() {

        wenn (this.grid.cellsAvailable()) {
            var-Wert = Math.random() < 0,9 ? 2 : 4;
            var Zelle = this.grid.randomAvailableCell();
            var Kachel = neue Kachel (Zelle, Wert);
            this.grid.insertTile(tile); // eine Zelle einfügen}

    },

Zunächst werden die Daten so initialisiert, dass mit einer Wahrscheinlichkeit von 90 % 2 und mit einer Wahrscheinlichkeit von 10 % 4 generiert werden.

touchStart: Funktion(Ereignisse) {

        // Mehrfingerbedienung this.isMultiple = events.touches.length > 1;
        wenn (dies.istMehrfach) {
            zurückkehren;
        }

        var touch = Ereignisse.touches[0];

        this.touchStartClientX = touch.clientX;
        this.touchStartClientY = touch.clientY;

    },

    touchMove: Funktion (Ereignisse) {
        var touch = Ereignisse.touches[0];
        this.touchEndClientX = touch.clientX;
        this.touchEndClientY = touch.clientY;
    },

    touchEnd: Funktion(Ereignisse) {
        wenn (dies.istMehrfach) {
            zurückkehren;
        }

        var dx = this.touchEndClientX - this.touchStartClientX;
        var absDx = Math.abs(dx);
        var dy = this.touchEndClientY - this.touchStartClientY;
        var absDy = Math.abs(dy);

        wenn (Math.max(absDx, absDy) > 10) {
            var Richtung = absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0);

            var Daten = this.GameManager.move(Richtung) || {
                Gitter: this.data.grids,
                über: diese.Daten.über,
                gewonnen: diese.Daten.gewonnen,
                Punktzahl: this.data.score
            };

        }

Die Spielgeste startet und beendet die Bewegung. Der obige Abschnitt bestimmt hauptsächlich die Richtung der Fingerbewegung. Schließlich wird die Richtung bestimmt und zur Bewegung an this.GameManager.move(direction) übergeben.

Die Schwierigkeit liegt hier im Aufbau der Datenstruktur, der relativ einfach ist, solange man das Raster versteht. Dann erfolgt die Beurteilung des Fingergleitens, was im obigen Code deutlich gezeigt wird.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung des 2048-Spiels im WeChat Mini-Programm. Weitere Informationen zum 2048-Spiel im WeChat Mini-Programm finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • WeChat Mini-Programmversion des Flip-Kartenspiels
  • WeChat-Applet implementiert Puzzlespiel
  • So implementieren Sie ein Glücksradspiel im WeChat-Applet

<<:  Was tun, wenn der Auto-Increment-Primärschlüssel in MySQL aufgebraucht ist?

>>:  Detaillierte Erläuterung des Konfigurationsprozesses des Docker-Container-Netzwerkports

Artikel empfehlen

Einige Erkenntnisse und Gedanken zu iframe

Diese Geschichte beginnt heute mit einer unerwarte...

Richtige Methode zum Laden von Schriftarten in Vue.js

Inhaltsverzeichnis Schriftarten mit font-face ric...

Was sind Inline-Elemente und Blockelemente?

1. Inline-Elemente nehmen nur die Breite des Inhal...

So erstellen Sie schnell eine LNMP-Umgebung mit Docker (neueste Version)

Vorwort Tipp: Hier können Sie den ungefähren Inha...

Einführung in den Löschvorgang von B-Tree

Im vorherigen Artikel https://www.jb51.net/articl...

Allgemeiner HTML-Seitenstil (empfohlen)

Wie unten dargestellt: XML/HTML-CodeInhalt in die...

CentOS verwendet expect, um Skripte und Befehle remote in Stapeln auszuführen

Manchmal müssen wir Server stapelweise bedienen, ...

Wie man mit React elegant CSS schreibt

Inhaltsverzeichnis 1. Inline-Stile 2. Importmetho...