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

UrlRewriter-Caching-Probleme und eine Reihe damit verbundener Untersuchungen

Beim Entwickeln einer Website-Funktion kann der S...

So konfigurieren Sie MySQL8 in Nacos

1. Erstellen Sie die MySQL-Datenbank nacos_config...

So erstellen Sie ein Django-Projekt und stellen eine Verbindung zu MySQL her

1: django-admin.py startproject Projektname 2: CD...

Ein Beispiel für die Implementierung eines adaptiven Quadrats mit CSS

Die traditionelle Methode besteht darin, ein Quad...

Einführung in Kubernetes (k8s)

Ich wollte schon immer Kubernetes lernen, weil es...

Vue-Anpassungsmethode für Großbildschirme

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie benutzerdefinierte CSS-Variablen in Vue

Inhaltsverzeichnis Die benutzerdefinierte CSS-Var...

So deinstallieren und installieren Sie Tomcat neu (mit Bildern und Text)

Deinstallieren Sie tomcat9 1. Da die Installation...

Eine kurze Zusammenfassung aller Kapselungsmethoden in Vue

Inhaltsverzeichnis 1. Kapselungs-API 2. Globale T...

Vue integriert Tencent Map zur Implementierung der API (mit DEMO)

Inhaltsverzeichnis Hintergrund zum Schreiben Proj...

Implementierung der Docker-Bereitstellung des Nuxt.js-Projekts

Offizielle Docker-Dokumentation: https://docs.doc...

Schritte zur Einführung von PWA in ein Vue-Projekt

Inhaltsverzeichnis 1. Abhängigkeiten installieren...