In diesem Artikel wird der spezifische Code des WeChat-Applets zur Implementierung des Schlangenspiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt 1. Projekt-Screenshots2. Quellcode1. WXML Der Code lautet wie folgt (Beispiel): <Ansichtsklasse='Container'> <Ansichtsklasse='Inhalt-unten' bindtouchmove='touchMove' bindtouchstart='touchStart' bindtouchend='touchEnd'> <Ansicht wx:for="{{ground}}" wx:for-item="cols" Klasse='ground-row'> <view wx:for="{{cols}}" Klasse='ground-col'> <Ansichtsklasse='block block{{item}}'></Ansicht> </Ansicht> </Ansicht> </Ansicht> <Ansichtsklasse='Inhalt oben'> <Ansichtsklasse='Top-Item mit Top-Punktzahl'> <view class='score-description'>Punktzahl</view> <view class='score-number'>{{score}}</view> </Ansicht> <view class='top-item top-start' bindtap='goStart'>START</view> <Ansichtsklasse='Top-Item mit Top-Punktzahl'> <view class='score-description'>Historisches Hoch</view> <view class='score-number'>{{maxScore}}</view> </Ansicht> </Ansicht> </Ansicht> 2. WXSS Der Code lautet wie folgt (Beispiel): /* Seiten/Demo/Snake/Snake.wxss */ .Inhalt-oben { Anzeige: Flex; } .top-Artikel { biegen: 1; Höhe: 150rpx; Rand: 0 20 rpx; Zeilenhöhe: 150rpx; Textausrichtung: zentriert; Rahmenradius: 16rpx; } .top-start { Schriftgröße: 22px; Hintergrund: tiefes Himmelblau; Farbe: #fff; } .Top-Punktzahl { Hintergrund: #eee4da; } .score-beschreibung { Zeilenhöhe: 70rpx; } .Punktzahl { Zeilenhöhe: 60rpx; } .Inhalt-unten { Anzeige: Flex; Flex-Richtung: Spalte; Breite: 660rpx; Höhe: 840rpx; Rand: 50rpx automatisch 0; } .Grundreihe { Anzeige: Flex; } .ground-col { biegen: 1; Breite: 30rpx; Höhe: 30rpx; } .block { Breite: 100 %; Höhe: 100%; Hintergrund: #eee; } .block1 { Hintergrund: schwarz; Rahmenradius: 5px; } .block2 { Hintergrund: rot; Rahmenradius: 5px; } 3.JS Der Code lautet wie folgt (Beispiel): // Seiten/Demo/Snake/Snake.js Seite({ /** * Ausgangsdaten der Seite */ Daten: { gameStart: false, // Ob das Spiel begonnen hat score: 0, // Aktueller Punktestand maxScore: 0, // Höchster Punktestand aller Zeiten isMaxActive: false, Zeilen: 28, // Spielplatzzeilenspalten: 22, // Spielplatzspaltenboden: [[]], // Spielplatzblockpositionschlange: '', // Schlangenpositionfutter: [], // FutterpositionstartX: 0, startY: 0, EndeX: 0, EndeY: 0, Flag: 0, // Die aktuelle Bewegungsrichtung der Schlange, 0 für rechts, 1 für unten, 2 für links, 3 für oben. Timer: null, modalHidden: true }, /** * Lebenszyklusfunktion - auf Seitenladen warten*/ onLoad: Funktion (Optionen) { this.initGround(this.data.rows, this.data.cols) // Playground initialisieren console.log(wx.getStorageSync("MaxScore")) wenn (wx.getStorageSync("MaxScore")) { dies.setData({ maxScore: wx.getStorageSync("MaxScore"), isMaxActive: wahr }) } anders { dies.setData({ isMaxActive: false }) } }, goStart: Funktion () { dies.setData({ gameStart: wahr }) dies.onLoad() this.initSnake(3) // Initialisiere die Position der Schlange this.initFood() // Initialisiere Futter dies.verschieben(0) }, /** * Spielplatz initialisieren */ initGround: Funktion (Zeilen, Spalten) { diese.Daten.Boden = [] für (lass i = 0; i < Zeilen; i++) { lass arr = [] diese.Daten.ground.push(arr) für (lass j = 0; j < Spalten; j++) { diese.Daten.ground[i].push(0) } } dies.setData({ Boden: diese.Daten.Boden }) }, /** * Initialisiere die Schlange */ initSnake: Funktion (n) { diese.daten.snake = [] für (sei i = 0; i < n; i++) { dieser.Daten.Boden[0][i] = 1 diese.Daten.Schlange.push([0,i]) } dies.setData({ Boden: diese.Daten.Boden, Schlange: diese.Daten.Schlange }) }, /** * Lebensmittel initialisieren */ initFood: Funktion () { lass Zeile = Math.floor(Math.random()*this.data.rows) lass col = Math.floor(Math.random() * this.data.cols) var ground = diese.Daten.ground Boden[Zeile][Spalte] = 2 dies.setData({ Boden: Boden, Essen: [Zeile, Spalte] }) Konsole.log(diese.Daten.Essen) }, /** * Bestimmen Sie die Richtung der Mausbewegung */ touchStart: Funktion (Ereignis) { this.data.startX = Ereignis.berührt[0].pageX this.data.startY = Ereignis.berührt[0].pageY }, touchMove: Funktion (Ereignis) { this.data.endX = Ereignis.berührt[0].pageX this.data.endY = Ereignis.berührt[0].pageY // konsole.log(diese.daten.endeX, diese.daten.endeY) }, touchEnd: Funktion (Ereignis) { sei tX = this.data.endX ? (this.data.endX - this.data.startX) : 0 sei tY = this.data.endY ? (this.data.endY - this.data.startY) : 0 konsole.log(tX, tY) wenn (!this.data.gameStart) { return false } if (tY < 0 && Math.abs(tX) <= Math.abs(tY)) { // Nach unten schieben this.data.flag = 3 } sonst wenn (tY > 0 && Math.abs(tX) <= Math.abs(tY)) { // Nach oben schieben this.data.flag = 1 } sonst wenn (tX < 0 && Math.abs(tX) > Math.abs(tY)) { // Nach links schieben this.data.flag = 2 } sonst wenn (tX > 0 && Math.abs(tX) > Math.abs(tY)) { // Nach rechts schieben this.data.flag = 0 } wenn(this.data.modalHidden){ dies.verschieben(dieses.Datenflag) } }, /** * Schlange bewegt sich */ verschieben: Funktion (Zustand) { Intervall löschen(diese.Daten.Timer) // konsole.log(diese.daten.snake.länge) var das = dies switch(state){ // Gleitrichtung bestimmen Fall 0: this.data.timer = setInterval(Funktion(){ das.nachRechts verschieben() }, 600) brechen Fall 1: this.data.timer = setzeIntervall(Funktion () { das.moveBottom() }, 600) brechen Fall 2: this.data.timer = setzeIntervall(Funktion () { das.nachlinks verschieben() }, 600) brechen Fall 3: this.data.timer = setzeIntervall(Funktion () { das.moveTop() }, 600) brechen } }, nach rechts bewegen: Funktion () { // konsole.log(diese.daten.snake) var snakeArr = diese.Daten.snake var snakeLen = snakeArr.length var Schlangenkopf = SchlangenArr[Schlangenlänge - 1] var Schlangenschwanz = SchlangenArr[0] var ground = diese.Daten.ground für (var i = 0; i < snakeLen - 1; i++) { SchlangeArr[i] = SchlangeArr[i + 1] } var x = Schlangenkopf[0] var y = Schlangenkopf[1] + 1 wenn (y >= diese.Daten.Spalten) { dies.gameOver() zurückkehren } SchlangenArr[SchlangenLen - 1] = [x, y] Boden[x][y] = 1 Boden[Schlangenschwanz[0]][Schlangenschwanz[1]] = 0 dies.setData({ Schlange: SchlangeArr, Boden: Boden }) this.checkGame(snakeTail, [x, y]) // Überprüfen, ob Gameover }, moveBottom: Funktion () { var snakeArr = diese.Daten.snake var snakeLen = snakeArr.length var Schlangenkopf = SchlangenArr[Schlangenlänge - 1] var Schlangenschwanz = SchlangenArr[0] var ground = diese.Daten.ground für (var i = 0; i < snakeLen - 1; i++) { SchlangeArr[i] = SchlangeArr[i + 1] } var x = Schlangenkopf[0] + 1 var y = Schlangenkopf[1] wenn (x >= diese.Daten.Zeilen) { dies.gameOver() zurückkehren } SchlangenArr[SchlangenLen - 1] = [x, y] Boden[x][y] = 1 Boden[Schlangenschwanz[0]][Schlangenschwanz[1]] = 0 dies.setData({ Schlange: SchlangeArr, Boden: Boden }) this.checkGame(snakeTail, [x, y]) // Überprüfen, ob Gameover }, nach links bewegen: Funktion () { var snakeArr = diese.Daten.snake var snakeLen = snakeArr.length var Schlangenkopf = SchlangenArr[Schlangenlänge - 1] var Schlangenschwanz = SchlangenArr[0] var ground = diese.Daten.ground für (var i = 0; i < snakeLen - 1; i++) { SchlangeArr[i] = SchlangeArr[i + 1] } var x = Schlangenkopf[0] var y = Schlangenkopf[1] - 1 wenn (y < 0) { dies.gameOver() zurückkehren } SchlangenArr[SchlangenLen - 1] = [x, y] Boden[x][y] = 1 Boden[Schlangenschwanz[0]][Schlangenschwanz[1]] = 0 dies.setData({ Schlange: SchlangeArr, Boden: Boden }) this.checkGame(snakeTail, [x, y]) // Überprüfen, ob Gameover }, moveTop: Funktion () { var snakeArr = diese.Daten.snake var snakeLen = snakeArr.length var Schlangenkopf = SchlangenArr[Schlangenlänge - 1] var Schlangenschwanz = SchlangenArr[0] var ground = diese.Daten.ground für (var i = 0; i < snakeLen - 1; i++) { SchlangeArr[i] = SchlangeArr[i + 1] } var x = Schlangenkopf[0] - 1 var y = Schlangenkopf[1] wenn (x < 0) { dies.gameOver() zurückkehren } SchlangenArr[SchlangenLen - 1] = [x, y] Boden[x][y] = 1 console.log(y) Boden[Schlangenschwanz[0]][Schlangenschwanz[1]] = 0 dies.setData({ Schlange: SchlangeArr, Boden: Boden }) this.checkGame(snakeTail, [x, y]) // Überprüfen, ob Gameover }, /** * Gameover prüfen * Gegen die Wand laufen - Spiel vorbei, ein Popup-Fenster fragt, ob neu gestartet oder neu geladen werden soll * Schlag dich selbst - Gameover * Nahrung aufnehmen - der Körper der Schlange wird länger und regeneriert Nahrung*/ checkGame: Funktion (Schlangenschwanz, Schlangenkopf) { console.log("Testschlangenbewegung") console.log(Schlangenkopf) var snakeArrs = diese.Daten.snake var len = diese.Daten.snake.length var Essen = diese.Daten.Essen var ground = diese.Daten.ground Konsole.log(diese.Daten.Schlange[Länge-1]) // Bestimmen Sie, ob ein Wandtreffer vorliegt, wenn (snakeHead[0] >= 0 & snakeHead[0] < this.data.rows & snakeHead[1] >= 0 & snakeHead[1] < this.data.cols) { this.data.modalHidden = wahr this.collisionSnakeFood(Schlangenschwanz, Schlangenkopf, Nahrung) dies.setData({ // Schlange: this.data.snakeArr, // Boden: diese.Daten.Boden, modaleHidden: this.data.modaleHidden }) } anders { dies.gameOver() zurückkehren } }, // Triff das Futter, das Spiel geht weiter collisionSnakeFood: function (tail, head, food) { lass Schlange = diese.Daten.Schlange lass ground = diese.daten.ground let row = essen[0] sei col = Essen[1] lass score = diese.Daten.score let maxScore = this.data.maxScore wenn (Kopf[0] === Essen[0] & Kopf[1] === Essen[1]) { Boden[Zeile][Spalte] = 1 Schlange.unshift(Schwanz) Boden[Schwanz[0]][Schwanz[1]] = 1 dies.initFood() Punktzahl += 5 wenn (!this.data.isMaxActive) { maxScore = Punktzahl } } dies.setData({ Schlange: Schlange, Boden: Boden, Punktzahl: Punktzahl, maxScore: maxScore }) }, // Spiel vorbei gameOver: function () { Intervall löschen(diese.Daten.Timer) lass _das = dies sei maxS = diese.Daten.maxScore dies.setData({ modaleHidden: false, Timer: null }) wenn (wx.getStorageSync("MaxScore")){ lass seinenScore = wx.getStorageSync("MaxScore") wenn (seinScore < maxS) { wx.setStorageSync("MaxScore", maxS) } } anders { wx.setStorageSync("MaxScore", maxS) } wx.showModal({ Titel: 'Spiel fehlgeschlagen', Inhalt: „Klicken Sie auf OK, um ein neues Spiel zu starten. Klicken Sie auf Abbrechen, um zur Startseite zurückzukehren“, Erfolg: Funktion (Res) { wenn(res.bestätigen) { _das.setData({ Punktzahl: 0, gameStart: false, // Ob das Spiel gestartet wurde snake: '', // Die Position der Schlange food: [], // Die Position des Futters modaleHidden: true }) _das.onLoad() } } }) }, /** * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/ beiShareAppMessage: Funktion () { } }) Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Vergleich der Leistung von int, char und varchar in MySQL
>>: Detaillierte Erklärung zur Verwendung von nohup /dev/null 2>&1
Schauen wir uns an, welche Ladeanimationseffekte ...
So überprüfen Sie den Dateisystemtyp einer Partit...
Für dieses Beispiel ist das Herunterladen und Ins...
Inhaltsverzeichnis Einzelne Bedingung, einzelne D...
Vue ruft die PC-Kamera auf, um Bilder in Echtzeit...
Wenn die Rahmenlänge früher kleiner als der Conta...
Inhaltsverzeichnis 1. Implementierungsprinzip des...
Diese eingeführten HTML-Tags entsprechen nicht un...
1. Hintergrund Mit der Weiterentwicklung des Proj...
1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...
Problembeschreibung Nach der Installation von Wor...
1. Python 3 herunterladen wget https://www.python...
Festlegen der Eigenschaften für Mindest- und Maxi...
Inhaltsverzeichnis Vorwort Endlosschleife in For-...
Hier sind einige Möglichkeiten zum Entfernen: Füge...