Explication détaillée des étapes pour implémenter le mini-jeu 2048 à l'aide de vue

Cette fois, je vais vous donner une explication détaillée des étapes à suivre pour utiliser vue pour implémenter le mini-jeu 2048. Quelles sont les précautions pour utiliser vue pour implémenter le mini-jeu 2048. Voici un cas pratique. , jetons un coup d'oeil.

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 lourd pour ce projet, mais je suis trop paresseux pour en construire un autre

2. Le carré 4X4 est stocké dans un tableau bidimensionnel Après la liaison, vous ne vous souciez que de ce tableau bidimensionnel et laissez les autres. choses à voir

3. Écouter les événements du clavier

4. La partie centrale de 2048 est l'algorithme de fusion de mouvements parce qu'il. est une matrice 4X4, tant que l'algorithme de décalage vers la gauche est implémenté, autre Pour vous déplacer dans la direction, il vous suffit de faire pivoter la matrice, de la déplacer et de la fusionner, de la faire pivoter vers l'arrière et de restituer le 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, rendu avec un rendu bidimensionnel tableau 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 0 0

• 2 2 4 2 => 4 4 2 0

• Prenons l'exemple d'une seule ligne de données,

parcourez le tableau à une seule ligne, s'il y a des données, enregistrez-les sous forme de cellule et trouvez la cellule la plus éloignée qui peut être déplacée vers la gauche. La position vide la plus éloignée

.

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

2. S'il existe, déterminez le plus éloigné - 1 Si la valeur de. la cellule est la même que

3. => Fusionner

4. Pas la même =>Déplacer vers la position la plus éloignée

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

6. Tour suivant

7. Car en un tour de mouvement, un seul numéro ne peut être fusionné Une fois, chaque grille doit donc avoir un paramètre fusionné pour enregistrer si elle a été fusionnée.

Code principal :

Rotation de la matrice

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

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 :

À 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 !

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

Lecture recommandée :

Vérification du formulaire VeeValidate, analyse du code de cas d'utilisation dans le projet vue

Ajout, suppression et modification de JavaScript Éléments DOM Explication détaillée des étapes

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!