Comment utiliser vue pour implémenter le mini-jeu 2048

Cette fois, je vais vous montrer comment utiliser vue pour implémenter le mini-jeu 2048. Quelles sont les précautions pour utiliser vue pour implémenter le mini-jeu 2048. Ce qui suit est un cas pratique, prenons un. regarder.

Utilisation :

git clone
npm i
npm run dev

L'idée d'implémentation est la suivante :

1. Utiliser vue-cli pour construire un projet peut être un peu fastidieux pour ce projet, mais c'est aussi que je suis trop paresseux pour construire un autre

2. Carré 4X4 et le stocker dans un tableau bidimensionnel Après la reliure, je m'en soucie seulement. à propos de ce tableau bidimensionnel et laisser d'autres choses à voir

3. Écouter les événements du clavier

4. La partie centrale. de 2048 est l'algorithme de fusion de mouvements, car il s'agit d'une matrice 4X4. Ainsi, tant que l'algorithme de décalage vers la gauche est implémenté, le mouvement dans d'autres directions ne nécessite que la rotation de la matrice, la fusion des mouvements, la rotation arrière et le rendu du dom

   .

5. Lier les styles avec différentes valeurs

6. Calcul du score et utilisation du stockage local pour stocker le score le plus élevé

Implémentation des clés

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>

Le DOM de la partie principale du jeu est très simple. Il est rendu avec. un tableau bidimensionnel et lié dynamiquement au style

Décalage vers la gauche

Principalement causé par les situations suivantes :

• 2 2 2 2 => 4 4 0 0

• 4 2 2 2 => 4 4 2 0

• 0 4 2 2 => 4 4 0 0

• 2 2 4 2 => 4 4 2 0

Prendre une seule ligne de données comme exemple,

1. parcourez le tableau à une seule ligne, s'il y a des données, enregistrez-les en tant que cellule et recherchez la position vide la plus éloignée que la cellule peut déplacer vers la gauche la plus éloignée

2. détermine si le côté gauche du plus éloigné existe. S'il n'existe pas, déplacez-vous directement vers le plus éloigné

3. S'il existe, déterminez si la valeur du plus éloigné - 1 est. le même que la cellule

4. le même=> fusionner

5. pas le même=> aller à la position la plus éloignée

6. Après le déplacement, videz la cellule

7. Tour suivant

Car a Pendant le mouvement de la roue, un nombre ne peut être fusionnée une fois, chaque grille doit donc avoir un paramètre fusionné pour enregistrer si elle a été fusionnée.

Code principal :

_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
      }
    }
  })

Rotation de la matrice

Parce que monter, descendre, bouger à gauche, bouger à droite En fait, c'est pareil. Vous pouvez l'écrire 4 fois, mais il est facile de faire des erreurs, donc je fais directement pivoter la matrice puis je la déplace.

Par exemple, si vous faites pivoter la matrice une fois dans le sens inverse des aiguilles d'une montre, le décalage vers le haut devient un décalage vers la gauche. Une fois les mouvements fusionnés, il vous suffit de faire pivoter la matrice 4 à 1 fois dans le sens inverse des aiguilles d'une montre, et la matrice sera la même. identique à un simple déplacement vers le haut.

Algorithme de rotation dans le sens inverse des aiguilles d'une montre :

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
  },

À ce stade, il est terminé à 80 %. Il a juste besoin d'être amélioré, en ajoutant des points, en redémarrant et d'autres fonctions.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser vee-validate dans Vue

Node utilise express+http-proxy sur tous les domaines -Explication détaillée des étapes du middleware

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!