So implementieren Sie ein Glücksradspiel im WeChat-Applet

Ich stelle hauptsächlich vor, wie man im WeChat-Applet ein Glücksradspiel entwickelt. Es verwendet hauptsächlich JavaScript- und CSS-Syntax und Sie können problemlos ein einfaches Glücksrad realisieren (am Beispiel von 6 Gewinnbereichen).

Vorwort

Für dieses Tutorial benötigen Sie ein gewisses Maß an Grundkenntnissen in JavaScript und CSS sowie Erfahrung in der Entwicklung kleiner Programme. Die spezifischen Wissenspunkte, die Sie beherrschen müssen, sind:

• CSS-Position, Transformation, Übergang, Überlauf
• Grundlegender Zufallsalgorithmus in JavaScript
• wxs-Syntax
• Im Miniprogramm integrierte Animations-API

Rendern

Ideen zur Entwicklung von Miniprogrammen

Die Entwicklungsidee besteht aus drei Teilen. Der erste Teil besteht darin, CSS zum Zeichnen des Plattentellerhintergrunds zu verwenden. Der zweite Teil besteht darin, wxs-Syntax zum Implementieren von responsiven Stilen zu verwenden. Der dritte Teil besteht darin, die integrierte Animations-API des Applets zu verwenden, um die Drehung des Plattentellers und die Zufälligkeit der Drehung durch JS zu realisieren.

Ich stelle hauptsächlich die Schreibideen vor und beginne nun mit meiner Erklärung.

Wie zeichnet man ein Dreieck

Schreiben Sie zunächst ein grundlegendes WXML-Framework.

<view Klasse="Drehscheibe">
  <Klasse anzeigen="Wrapper">
    <Klasse anzeigen="Artikel" >
	  <Ansichtsklasse="item-inner">
		<text>10 Punkte</text>
	  </Ansicht>
	</Ansicht>
  </Ansicht>
</Ansicht>

Ich habe zwei gleich große Rechtecke mit einer Länge und Breite von 300 rpx bzw. 600 rpx gezeichnet und das CSS-Attribut „Position“ verwendet, um die beiden Rechtecke miteinander zu verbinden.

.Drehteller {
  Anzeige: Block;
  Breite: 100 %;
  Höhe: 600rpx;
}
.Drehscheibe .Wrapper{
  Position: relativ;
  Transform-Origin: Mitte;
  Breite: 100 %;
  Höhe: 600rpx;
}

Nach dem Zusammenführen muss ich die beiden Rechtecke trennen, das rote Rechteck in einen Halbkreis verwandeln, das blaue Rechteck 60 Grad im Uhrzeigersinn schwenken und das rote Rechteck 30 Grad gegen den Uhrzeigersinn schwenken. Warum muss ich so drehen? Weil das Blau ursprünglich mit dem Roten 30 Grad gegen den Uhrzeigersinn schwenkt und der Innenwinkel eines Dreiecks 60 Grad beträgt. Um diesen 60-Grad-Winkel zu bilden, muss ich das Blau nach dem Schwenken des Roten 60 Grad im Uhrzeigersinn bewegen und so einen 60-Grad-Winkel bilden.

.Drehscheibe .Wrapper .Artikel {
  Position: absolut;
  links: 50%;
  Breite: 300rpx;
  Höhe: 600rpx;
  Rahmenradius: 0px 300rpx 300rpx 0;
  Transform-Origin: links Mitte;
  transformieren: drehen (-30 Grad);
}
.Drehtisch .Wrapper .Item .Item-inner {
  Textausrichtung: zentriert;
  Breite: 300rpx;
  Höhe: 600rpx;
  transformieren: verschiebeX(-300rpx) drehen(60 Grad); 
  Transform-Origin: rechts Mitte;
  Rahmenradius: 300rpx 0 0 300rpx;
  Schriftgröße: 32rpx;
}

Der nächste wichtige Schritt besteht darin, dem Element das Attribut „overflow: hidden“ hinzuzufügen. Ein Dreieck wird angezeigt und die Position der Schriftart wird angepasst.

.Drehscheibe .Wrapper .Artikel {
  Position: absolut;
  links: 50%;
  Breite: 300rpx;
  Höhe: 600rpx;
  Rahmenradius: 0px 300rpx 300rpx 0;
  Überlauf: versteckt;
  Transform-Origin: links Mitte;
}
.turntable .wrapper .item .item-innerer Text {
  Anzeige: Block;
  Transform-Origin: Mitte;
  transformieren: verschiebeY(100rpx) verschiebeX(43rpx) drehen(-30 Grad);
}

Nachdem ein Dreieck gezeichnet wurde, können 6 gleich große Dreiecke zu einer Scheibe zusammengefügt werden. Dazu muss nur der Drehwinkel jedes Dreiecks geändert werden.

.Drehtisch .Wrapper .item:nth-child(1) {
  transformieren: drehen (-30 Grad);
}

.Drehtisch .Wrapper .item:nth-child(2) {
  transformieren: drehen (-90 Grad);
}

.Drehtisch .Wrapper .item:nth-child(3) {
  transformieren: drehen (-150 Grad);
}

.Drehtisch .Wrapper .item:nth-child(4) {
  transformieren: drehen (-210 Grad);
}

.Drehtisch .Wrapper .item:nth-child(5) {
  transformieren: drehen (-270 Grad);
}

.Drehtisch .Wrapper .item:nth-child(6) {
  transformieren: drehen (-330 Grad);
}

Implementieren von responsiven Stilen

Um mich besser an unterschiedliche Geschäftsanforderungen anpassen zu können, habe ich den Plattenspielerstil reaktionsfähig gemacht, sodass ich je nach Länge der von außen übergebenen Preisdaten problemlos unterschiedliche Stile festlegen kann. Die Beurteilung dieses Schritts habe ich in das WXS-Modul gelegt.

<wxs Modul="berechnet">
	var rotate = Funktion (Index, Länge) {
		var initial = - (360 / Länge / 2)
		var averageRotate = 360 / Länge
		var deg = inital - durchschnittlicheRotate * index
		returniere 'Transformation: Drehen(' + Grad + 'Grad);'
	}
	var inner = Funktion (Länge) {
		var averageRotate = 360 / Länge
		gibt „Transformation: TranslateX(-300rpx) Rotate(' + AverageRotate + 'Grad') zurück“
	}
	var Text = Funktion (Länge) {
		var Abstand = 0
		var drehen = 0
		Schalter (Länge) {
			Fall 6:
				Abstand = 43
				drehen = 30
				brechen
			Fall 8:
				Abstand = 72
				drehen = 30
				brechen
			Fall 4:
				Abstand = -20
				drehen = 40
				brechen
		}
		gibt „Transformieren: TranslateY(100rpx) TranslateX(' + Entfernung + 'rpx) Drehen(-45 Grad)“ zurück.
	}
	modul.exporte = {
		drehen: drehen,
		innerlich: innerlich,
		text: text
	}
</wxs>

Animationssystem und Gewinnsystem

Indem wir die Gewinnrate festlegen und mit einem Kreis von 360 Grad rechnen, erhalten wir einen Gewinnbereich von 0 bis 360. Wir bestimmen, zu welchem ​​Intervall die zufällig erhaltene Zahl gehört, und verwenden die Intervallwertbelohnung, um den Winkel zu bestimmen, in dem sich die Scheibe drehen muss. Dies ist im Großen und Ganzen die Idee. Beginnen wir mit der Erläuterung der Hauptideen.

Der Winkel, um den sich die Scheibe drehen muss = Belohnung * Durchschnittswert der 6 Kreisteile + 3 * 360

Zunächst müssen wir die Gewinnquoten der sechs Gewinnbereiche festlegen, die in der Summe 1 ergeben müssen. Anschließend fassen wir die initialisierten Daten zu einem 6-stelligen Array zusammen und übergeben es von außerhalb der Komponente an die Komponente.

Preis: [{
        'Name': '1 Punkt',
        'gewinnen': 0,2,
        'Anzahl': 1
      },
      {
        'name': 'Danke für die Teilnahme',
        'gewinnen': 0,5,
        'Anzahl': 0
      }, {
        'Name': '5 Punkte',
        'gewinnen': 0,05,
        'Anzahl': 5
      }, {
        'Name': '7 Punkte',
        'gewinnen': 0,05,
        'Anzahl': 7
      }, 
      {
        'Name': '3 Punkte',
        'gewinnen': 0,1,
        'Anzahl': 3
      }, 
      {
        'Name': '4 Punkte',
        'gewinnen': 0,1,
        'Anzahl': 4
      }
    ],

Der Gewinnbereich von 0-360 wird bei einem Kreis von 360 Grad berechnet.

getRange(Gewinn) {
   lass temp = []
     gewinnend.fürJeden((Element, Index) => {
       wenn (Index === 0) {
         temp.push(item['gewinnen'] * 360)
       } anders {
         temp.push(parseInt(temp.slice(-1)) + item['gewinnen'] * 360)
       }
      })
      Rücklauftemperatur
    },

Erzeugt eine zufällige Ganzzahl. Natürlich muss diese Zahl zwischen 0 und 360 liegen. Andernfalls ist sie bedeutungslos, wenn sie größer als 360 oder kleiner als 0 ist.

lass random = Math.round(Math.random() * 360)

Bestimmen Sie nach Erhalt der Zufallszahl, in welchem ​​Gewinnbereich sie liegt, und weisen Sie der Antwortzahlenbelohnung den entsprechenden Intervallwert zu.

für (lass i im Gewinnbereich) {
    let currentwinning = winningRange[i] // Aktueller Wertwenn (random < currentwinning) {
          dies.setData({
            Belohnung: ich
          })
          brechen
      } anders {
        wenn (i == 0) {
           weitermachen
        }
        wenn (Zufall >= Gewinnbereich[i - 1] und Zufall <= aktueller Gewinn) {
           dies.setData({
              Belohnung: ich
           })
           brechen
       }
     }
}

Setzen Sie die Hauptfunktion des Klickens zum Starten in onPoint(). Wenn die Funktion startet, muss ermittelt werden, ob noch eine Chance auf einen Gewinn besteht, und verhindert werden, dass während der Ausführung der Animation durch Klicken auf die Funktion die Animation ausgeführt wird. Der erforderliche Winkel wird berechnet und die Animations-API-Animation des WeChat-Applets wird zum Drehen der Scheibe verwendet. Nachdem die Animation beendet ist, werden die Gewinninformationen über die benutzerdefinierte Komponente ausgelöst, damit externe Listener sie empfangen können.

beiPunkt() {
      // Durchschnittswert const averageRotate = 360 / this.properties.prize.length
      // Gibt es eine Chance, im Lotto zu gewinnen, wenn (this.properties.chance === 0) {
        dies.triggerEvent('keines')
        zurückkehren
      }
      // Verhindern Sie das Klicken auf die Startschaltfläche während der Rotation, wenn (!this.data.onRotation) {
        dies.setData({
          beiRotation: true
        })
        dies.getReward()
        let deg = this.data.reward * averageRotate + 3 * 360 // Mindestens 3 Umdrehungen this.animate('.wrapper', [{
            drehen: 0,
            Leichtigkeit: ‚leicht rein-raus‘
          },
          {
            drehen: Grad,
            Leichtigkeit: ‚leicht rein-raus‘
          }
        ], 5000, Funktion () {
          dies.setData({
            beiRotation: false
          })
          //Senden Sie Ihre eigenen Lotterieinformationen this.triggerEvent('onResult', this.properties.prize[this.data.reward])
        }.binden(dies))
      }
    },

Vergessen Sie nicht, die Animation vor jeder Ausführung zurückzusetzen, um sicherzustellen, dass sie beim nächsten Mal im richtigen Winkel rotiert. Natürlich habe ich es in eine Funktion eingefügt, sodass es außerhalb der Komponente verwendet werden kann.

beiLöschen(){
   dies.clearAnimation('.wrapper')
}

endlich

Das ist die ganze Idee. Wie wäre es damit? Ist es nicht ganz einfach? Der wichtigste Schritt hierfür ist das Zeichnen der Scheibe. Wenn dieser Schritt gut ausgeführt wird, ist der Rest viel einfacher, da das WeChat-Applet bereits alles für uns erledigt hat, was die Implementierung der Animation betrifft. Und wenn es eine bessere Möglichkeit gibt, diskutieren Sie diese gerne in den Kommentaren.
Ich möchte insbesondere erwähnen, dass dieses Plattenspielerprojekt in meiner WeChat-Applet-Instanz ausgeführt wird. Sie können den Code scannen, um das Applet aufzurufen, und den Einstiegsport unten auf der Homepage sehen.

Plattenspieler-Code-Repository: Plattenspieler

Dies ist das Ende dieses Artikels zur Implementierung eines Glücksradspiels im WeChat-Miniprogramm. Weitere relevante Inhalte zum Glücksradspiel im Miniprogramm 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!