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

Implementierungscode für die HTML-Drag & Drop-Funktion

Basierend auf Vue Die Kernidee dieser Funktion be...

Mehrere Techniken zum Abspielen von Sounds mit CSS

CSS ist der Bereich von Stil, Layout und Präsenta...

So begrenzen Sie den Wertebereich von Objektschlüsseln in TypeScript

Wenn wir TypeScript verwenden, möchten wir das vo...

HTML-Tutorial: Sortierte Listen

<br />Originaltext: http://andymao.com/andy/...

Linux CentOS6.5 yum installiere mysql5.6

In diesem Artikel wird der einfache Prozess der I...

Vue3.0 implementiert die Kapselung von Kontrollkästchenkomponenten

In diesem Artikelbeispiel wird der spezifische Co...

Schreiben eines Schere-Stein-Papier-Spiels in JavaScript

In diesem Artikel finden Sie den spezifischen Cod...

Detaillierte Erklärung des Hintergrund-Positionsprozentsatzprinzips

Als ich heute jemandem beim Anpassen des Codes ha...

Detaillierte Erklärung des Inline-Formats von HTML-Tabellen

Inline-Format <colgroup>…</colgroup> ...