So implementieren Sie das Minispiel 2048 mit Vue

Dieses Mal zeige ich Ihnen, wie Sie Vue zur Implementierung des 2048-Minispiels verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue zur Implementierung des 2048-Minispiels? sehen.

Verwendung:

git clone
npm i
npm run dev

Die Implementierungsidee lautet wie folgt:

1. Verwenden Sie vue-cli, um das Projekt zu erstellen. Es kann etwas umständlich sein Dieses Projekt, aber ich bin auch faul. Erstellen Sie ein weiteres

2. 4X4-Raster und speichern Sie es in einem zweidimensionalen Array. Nach dem Binden kümmern Sie sich nur um diese beiden -dimensionales Array und überlassen Sie andere Dinge der Betrachtung

3. Tastatur anhörenEreignisse

4. Der Kernteil von 2048 ist der Da es sich um eine 4X4-Matrix handelt, ist zum Implementieren des Linksverschiebungsalgorithmus nur das Drehen der Matrix, das Zusammenführen der Bewegungen, das Zurückdrehen und das Rendern des Doms erforderlich

5. Bindungsstile mit unterschiedlichen Werten

6. Score-Berechnung und Verwendung von Localstorage zum Speichern des höchsten Scores

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 und dynamisch gerendert an den Stil gebunden

Nach links verschieben

Besteht hauptsächlich aus folgenden Situationen:

• 2 2 2 2 => 4 4 0 0

• 4 2 2 2 => 4 4 2 0

• 0 4 2 2=>

• 2 2 4 2 => 4 4 0 Gehen Sie zur am weitesten entfernten leeren Position am weitesten

, um festzustellen, ob die linke Seite des am weitesten entfernten existiert . Wenn es nicht vorhanden ist, gehen Sie direkt zu „Am weitesten entfernt“

1. . Wenn es vorhanden ist, ermitteln Sie, ob der Wert von „Am weitesten entfernt“ mit dem Wert der Zelle

2. gleich => zusammenführen

3. nicht gleich => zur am weitesten entfernten Position verschieben

4. Nach dem Verschieben die Zelle löschen

5. Nächste Runde

6. Da gerade eine Bewegungsrunde läuft, kann eine Zahl nur einmal zusammengeführt werden, daher muss jedes Raster einen zusammengeführten Parameter zum Aufzeichnen haben ob es zusammengelegt 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
      }
    }
  })

7. Matrixdrehung

Weil 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:

So verwenden Sie vee-validate in Vue

Knoten verwendet domänenübergreifend Express+http-Proxy -Detaillierte Erläuterung der Middleware-Schritte

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Minispiel 2048 mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!