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
In diesem Artikelbeispiel wird der spezifische Co...
Unabhängig von der verwendeten Ubuntu-Version ist...
Inhaltsverzeichnis Vorwort 1. Trigger-Übersicht 2...
1. Maven herunterladen Offizielle Maven-Website: ...
Inhaltsverzeichnis 1. MySQL-Architektur 2. Netzwe...
Laden Sie die neueste Version von MySQL für Ubunt...
Verwenden Sie natives JS, um ein neuneckiges Rast...
Linux-Version: CentOS 7 [root@azfdbdfsdf230lqdg1b...
Inhaltsverzeichnis Die wichtigsten gelösten Probl...
<br />Basierend auf dem ursprünglichen, in B...
Das <canvas>-Element ist für clientseitige ...
Shell-Skript #!/bin/sh # Aktuelles Verzeichnis CU...
Detailliertes Download-, Installations- und Konfi...
Aufgrund der Geschäftsanforderungen des Unternehm...
Der ElasticSearch-Cluster unterstützt動態請求的方式und靜態...