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

js Implementierung des Verifizierungscode-Falls

In diesem Artikelbeispiel wird der spezifische Co...

Installation und Verwendung von MySQL unter Ubuntu (allgemeine Version)

Unabhängig von der verwendeten Ubuntu-Version ist...

Einführung in die Verwendung sowie Vor- und Nachteile von MySQL-Triggern

Inhaltsverzeichnis Vorwort 1. Trigger-Übersicht 2...

Details zur MySQL-Datenbankarchitektur

Inhaltsverzeichnis 1. MySQL-Architektur 2. Netzwe...

Native js realisiert das Ziehen und Ablegen des Neun-Quadrat-Rasters

Verwenden Sie natives JS, um ein neuneckiges Rast...

Zusammenfassung der grundlegenden Verwendung des $-Symbols in Linux

Linux-Version: CentOS 7 [root@azfdbdfsdf230lqdg1b...

jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen

Das <canvas>-Element ist für clientseitige ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27

Detailliertes Download-, Installations- und Konfi...

Detailliertes Tutorial zur Installation des ElasticSearch:7.8.0-Clusters mit Docker

Der ElasticSearch-Cluster unterstützt動態請求的方式und靜態...