Detaillierte Erläuterung der Schritte zur Implementierung des 2048-Minispiels mit Vue

Dieses Mal erkläre ich Ihnen detailliert die Schritte zur Verwendung von Vue zur Implementierung des 2048-Minispiels. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue zur Implementierung des 2048-Minispiels? , lass uns einen Blick darauf werfen.

git clone
npm i
npm run dev

Die Implementierungsidee lautet wie folgt:

1. Vue-cli zum Erstellen eines Projekts zu verwenden, mag für dieses Projekt etwas umständlich sein, aber ich bin zu faul zum Erstellen noch eins

2. Das 4X4-Quadrat wird in einem zweidimensionalen Array gespeichert. Nach dem Binden kümmern Sie sich nur um dieses zweidimensionale Array und überlassen andere Dinge der Vue

3. Tastatur--Ereignisse anhören

4. Der Kernbestandteil von 2048 ist der Move-Merging-Algorithmus, da es sich um einen 4X4 handelt Matrix, solange der Linksverschiebungsalgorithmus implementiert ist, andere Richtungen Zum Verschieben müssen Sie nur die Matrix drehen, verschieben und zusammenführen, zurückdrehen und den Dom rendern

5. Binden Sie Stile mit unterschiedlichen Werten

6. Score Berechnen Sie und verwenden Sie localstorage, um den höchsten Score zu speichern

Schlüsselimplementierung

DOM

<p class="box">
  <p class="row" v-for="row in list">
    <p class="col" :class="&#39;n-&#39;+col" v-for="col in row">{col}}</p>
  </p>
</p>

Das DOM des Hauptspielteils ist sehr einfach mit einem zweidimensionalen Array gerendert und dynamisch daran gebunden der Stil

Nach links verschieben

Er besteht hauptsächlich aus folgendem Fall:

• 2 2 2 2 => 4 0 0

• 4 2 2 2 => 4 4 2 0

• 0 4 2 2=> 🎜>

• 2 2 4 2 => 4 4 2 0

Nehmen Sie als Beispiel eine einzelne Datenzeile,

1. Durchlaufen Sie das einzeilige Array. Wenn Daten vorhanden sind, zeichnen Sie diese als Zelle auf und finden Sie die am weitesten leere Position, an der sich die Zelle nach links bewegen kann.

2. Bestimmen Sie, ob die linke Seite von am weitesten vorhanden ist. Wenn sie nicht vorhanden ist, gehen Sie direkt zu am weitesten entfernte

3. Wenn sie vorhanden ist, beurteilen Sie den Wert von am weitesten entfernte Zelle - 1. Ist sie dasselbe?

Das Gleiche=> Zusammenführen
Nicht das Gleiche=> Zur am weitesten entfernten Position verschieben
Leeren Sie nach der Bewegung die Zelle
Nächste Runde
Denn in einer Bewegungsrunde kann eine Zahl nur einmal zusammengeführt werden, also jede Zeit Jedes Gitter muss über einen zusammengeführten Parameter verfügen, um aufzuzeichnen, ob es zusammengeführt wurde.

Hauptcode:

_list.forEach(item => {
    let farthest = this.farthestPosition(list, item)
    let next = list[farthest - 1]
    if (next && next === item.value && !_list[farthest - 1].merged) {
      //合并
      list[farthest - 1] = next * 2
      list[item.x] = undefined
      item = {
        x: farthest - 1,
        merged: true,
        value: next * 2
      }
      this.score += next * 2
    } else {
      if (farthest != item.x) {
        list[farthest] = item.value
        list[item.x] = undefined
        item.x = farthest
      }
    }
  })

MatrixdrehungWeil nach oben, nach unten, nach links, nach rechts bewegen, ist es das Das Gleiche kann man viermal schreiben, aber es ist leicht, Fehler zu machen, also drehe ich die Matrix direkt und verschiebe sie dann.

Wenn Sie beispielsweise die Matrix einmal gegen den Uhrzeigersinn drehen, wird die Aufwärtsverschiebung zu einer Linksverschiebung. Nachdem die Bewegungen zusammengeführt wurden, müssen Sie die Matrix nur 4-1 Mal gegen den Uhrzeigersinn drehen, und die Matrix wird die Das Gleiche gilt für eine einfache Verschiebung nach oben.

Rotationsalgorithmus gegen den Uhrzeigersinn:

rotate(arr, n) {
    n = n % 4
    if (n === 0) return arr
    let tmp = Array.from(Array(this.size)).map(() => Array(this.size).fill(undefined))
    for (let i = 0; i < this.size; i++) {
      for (let j = 0; j < this.size; j++) {
        tmp[this.size - 1 - i][j] = arr[j][i]
      }
    }
    if (n > 1) tmp = this.rotate(tmp, n - 1)
    return tmp
  },

Zu diesem Zeitpunkt ist er zu 80 % fertig und muss nur noch verbessert werden, indem Punkte hinzugefügt, neu gestartet und andere Funktionen ausgeführt werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

VeeValidate-Formularüberprüfungs-Anwendungsfallcode-Analyse im Vue-Projekt

Hinzufügen, Löschen und Ändern von JavaScript DOM-Elemente Detaillierte Erklärung der Schritte

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung des 2048-Minispiels mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!