Das WeChat-Applet implementiert das Schlangenspiel

Das WeChat-Applet implementiert das Schlangenspiel

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-Screenshots

2. Quellcode

1. 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:
  • Schlangenspiel implementiert durch WeChat-Applet [mit Quellcode-Download]

<<:  Vergleich der Leistung von int, char und varchar in MySQL

>>:  Detaillierte Erklärung zur Verwendung von nohup /dev/null 2>&1

Artikel empfehlen

Reines CSS für eine coole Ladeanimation

Schauen wir uns an, welche Ladeanimationseffekte ...

Linux Dateisystemtyp anzeigen Beispielmethode

So überprüfen Sie den Dateisystemtyp einer Partit...

Vue implementiert den Anruf der PC-Kamera, um Fotos in Echtzeit aufzunehmen

Vue ruft die PC-Kamera auf, um Bilder in Echtzeit...

Implementierung der CSS-Rahmenlängensteuerungsfunktion

Wenn die Rahmenlänge früher kleiner als der Conta...

Detaillierter Installationsprozess und Prinzip des Vue-Routers

Inhaltsverzeichnis 1. Implementierungsprinzip des...

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)

Diese eingeführten HTML-Tags entsprechen nicht un...

So führen Sie ein Projekt mit Docker aus

1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...

Detaillierte Schritte zur Installation von Python 3.7 auf CentOS 6.5

1. Python 3 herunterladen wget https://www.python...