RendernBeispielcodeHeute 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. ZusammenfassenDies 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:
|
<<: Was tun, wenn der Auto-Increment-Primärschlüssel in MySQL aufgebraucht ist?
>>: Detaillierte Erläuterung des Konfigurationsprozesses des Docker-Container-Netzwerkports
Inhaltsverzeichnis verwendenMemo useCallback verw...
In Webprojekten nutzen wir häufig die Zeitleisten...
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Heute habe ich einen dynamischen Fensterstil für d...
Rand: automatisch; + Position: absolut; oben, unt...
Ubuntu 16.04 installiert standardmäßig die PHP7.0...
Manchmal möchten wir nicht, dass der Inhalt unser...
Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...
Vorwort binlog ist eine binäre Protokolldatei, di...
Hinweis: Bei der Webentwicklung werden IE und FF n...
Die MySQL-Transaktionsunterstützung ist nicht an ...
Inhaltsverzeichnis 1. Einleitung 2. GitHub 3. Gru...
Der wichtigste Schritt bei der Verpacken einer Id...
1.Gerätebreite Definition: Definiert die sichtbar...
In diesem Artikel finden Sie eine ausführliche An...