Mini-jeu du mini-programme WeChat version 2048

Le mini-jeu "jump" WeChat a été populaire récemment. Nous avons également des articles à partager sur ce site : PHP implémente le mini-jeu "jump" WeChat Cet article partage principalement l'algorithme d'implémentation de 2048. et les points à noter Apprenons ensemble Bar ! (Voir la fin de l'article pour l'adresse du code source).

Algorithme

Générer une vue en damier 4*4

Générer aléatoirement 2 ou 4 pour remplir deux cellules

Enregistrer la position de départ lorsque l'utilisateur touche et terminer position pour déterminer la direction de glissement

Déplacez les cellules en fonction de la direction de glissement et fusionnez les mêmes valeurs

Une fois que l'utilisateur a terminé une diapositive, répétez l'étape 2

Jugez si le jeu est la fin et génère différentes invites en fonction des résultats du jeu

Point de difficulté

Déterminer la direction de glissement

Lorsque l'utilisateur glisse, la même grille fusionne et se déplace d'un côté de la direction de glissement
implémentation

implémentation de la vue

1 Utilisez wxml+wxss pour générer la vue en damier

.

2. Utilisez wx :for restitue les données dans chaque cellule

Implémentation logique

1. Une fois la page chargée, remplissez aléatoirement deux cellules avec les chiffres 2 ou 4

2. Déterminez la direction de glissement de l'utilisateur

Utilisez la fonction d'événement touchStart pour obtenir la position de départ touchStartX, touchStartY

Utilisez la fonction d'événement touchMove pour obtenir la position finale touchEndX, touchEndY

var disX = this.touchStartX - this.touchEndX;
    var absdisX = Math.abs(disX);
    var disY = this.touchStartY - this.touchEndY;
    var absdisY = Math.abs(disY);  
    // 确定移动方向 // 0:上, 1:右, 2:下, 3:左 var direction = absdisX > absdisY ? (disX < 0 ? 1 : 3) : (disY < 0 ? 2 : 0);

3. Selon la direction de glissement (supposons glisser vers la droite) pour déplacer la table et fusionner les mêmes éléments

Générez une liste de tableaux bidimensionnels 4*4 à partir de l'échiquier 2048, et les espaces vides sont représentés par 0

// 比如棋盘数据如下 var grid = [
    [2, 2, 0, 0],
    [0, 0, 0, 0],
    [0, 8, 4, 0],
    [0, 0, 0, 0]
];

Selon le sens de glissement Générer le code correspondant pour le tableau bidimensionnel 4*4

var list = [
    [0, 0, 2, 2],  // 注意是0022不是2200，因为像右滑动所以从右边push入数组
    [0, 0, 0, 0],
    [0, 4, 8, 0],
    [0, 0, 0, 0]
];

(this.board.grid dans le code est la grille initiale ci-dessus) :

formList(dir) {  // 根据传入的滑动方向生成list的四个数组 var list = [[], [], [], []];
    for(var i = 0; i < this.size; i++)
      for(var j = 0; j < this.size; j++) {
        switch(dir) {
          case 0:
            list[i].push(this.board.grid[j][i]);
            break;
          case 1:
            list[i].push(this.board.grid[i][this.size-1-j]);
            break;
          case 2:
            list[i].push(this.board.grid[this.size-1-j][i]);
            break;
          case 3:
            list[i].push(this.board.grid[i][j]);
            break;
        }
      }
    return list;
  }

Mettre chaque petit tableau dans la liste Le numéro est mentionné devant, et 0 est placé à la fin

list2 = [
    [2, 2, 0, 0], 
    [0, 0, 0, 0],
    [4, 8, 0, 0],
    [0, 0, 0, 0]
];

Correspondant code :

changeItem(item) {  // 将 [0, 2, 0, 2] 改为 [2, 2, 0, 0] var cnt = 0;
    for(var i = 0; i < item.length; i++)
      if(item[i] != 0)
        item[cnt++] = item[i];
    for(var j = cnt; j < item.length; j++) 
      item[j] = 0;
    return item;
  }

Ajoutez les cellules de même valeur, et changez la valeur de la cellule suivante à 0

list2 = [
    [4, 0, 0, 0], 
    [0, 0, 0, 0],
    [4, 8, 0, 0],
    [0, 0, 0, 0]
];

Code correspondant :

combine(list) { // 滑动时相同的合并 for(var i = 0; i < list.length; i++)  // 数字靠边
      list[i] = this.changeItem(list[i]);
    for(var i = 0; i < this.size; i++) { 
      for(var j = 1; j < this.size; j++) {
        if(list[i][j-1] == list[i][j] && list[i][j]!=0) {
          list[i][j-1] += list[i][j];
          list[i][j] = 0; 
        }
      }
    }
    for (var i = 0; i < list.length; i++)  // 再次数字靠边，避免0220变成0400的情况发生
      list[i] = this.changeItem(list[i]);
    return list;
  }

Renvoie list2 à list et affiche les données dans la vue en damier

list = [
[0, 0, 0, 4],
[0, 0, 0, 0],
[0, 0, 8, 4],
[0, 0, 0, 0]
];

Code correspondant :

move(dir) {
    // 0:上, 1:右, 2:下, 3:左 var curList = this.formList(dir);
    var list = this.combine(curList); 
    var result = [[],[],[],[]];
    for(var i = 0; i < this.size; i++)
      for(var j = 0; j < this.size; j++) {
        switch (dir) {
          case 0:
            result[i][j] = list[j][i];
            break;
          case 1:
            result[i][j] = list[i][this.size-1-j];
            break;
          case 2:
            result[i][j] = list[j][this.size-1-i];
            break;
          case 3:
            result[i][j] = list[i][j];
            break;
        }
      } 
    this.board.grid = result;
    this.setDataRandom();  // 移动一次之后随机用2或4填充两个单元格 return result;
  }

4. Répétez l'étape 1

5. Déterminez si le jeu est terminé

Critères de jugement : 4*4 unités Les cellules sont remplies et il n'y a aucune cellule avec la même valeur en haut, en bas, à gauche. et à droite de n'importe quelle cellule

isOver() {  // 游戏是否结束，结束条件：可用格子为空且所有格子上下左右值不等 for (var i = 0; i < this.size; i++) // 左右不等 for (var j = 1; j < this.size; j++) {
      if (this.board.grid[i][j] == this.board.grid[i][j - 1])
        return false;
    }
  for (var j = 0; j < this.size; j++)  // 上下不等 for (var i = 1; i < this.size; i++) {
      if (this.board.grid[i][j] == this.board.grid[i - 1][j])
        return false;
    }
  return true;
}

6. Donnez les invites correspondantes en fonction des résultats du jeu

po Une adresse de code source : windlany/wechat-weapp -2048 Si vous êtes intéressé, vous pouvez l'essayer, j'espère que cela pourra aider tout le monde.

Recommandations associées :

Partage d'exemples de script auxiliaire WeChat Tiaoyitiao python

php implémente le mini-jeu WeChat Tiaoyitiao

Exemple de partage d'implémentation jQuery d'un jeu de puzzle

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!