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

Anwendungsszenarien für React useMemo und useCallback

Inhaltsverzeichnis verwendenMemo useCallback verw...

Zeitleistenimplementierungsmethode basierend auf ccs3

In Webprojekten nutzen wir häufig die Zeitleisten...

Lösung für das Problem „VMware-virtuelle Maschine ohne Netzwerk“

Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...

Ubuntu16.04 erstellt eine php5.6-Webserverumgebung

Ubuntu 16.04 installiert standardmäßig die PHP7.0...

Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL

Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...

Mehrere Möglichkeiten zur manuellen Implementierung von HMR in Webpack

Inhaltsverzeichnis 1. Einleitung 2. GitHub 3. Gru...

Ausführliches Tutorial zur Installation und Konfiguration von MySQL 8.0.20

In diesem Artikel finden Sie eine ausführliche An...