WeChat Miniprogramm Version 2048 Minispiel

Das WeChat-Minispiel „Jump“ erfreut sich in letzter Zeit großer Beliebtheit. Wir haben auch Artikel zum Teilen auf dieser Website: PHP implementiert das WeChat-Minispiel „Jump“Dieser Artikel beschreibt hauptsächlich den Algorithmus zur Implementierung von 2048 und die Punkte, die es zu beachten gilt. Lassen Sie uns gemeinsam lernen, Bar! (Die Quellcode-Adresse finden Sie am Ende des Artikels.)

Algorithmus

4*4-Schachbrettansicht generieren

Zufällig 2 oder 4 generieren, um zwei Zellen zu füllen

Startposition aufzeichnen, wenn der Benutzer auf „Ende“ tippt Position, um die Gleitrichtung zu bestimmen

Zellen entsprechend der Gleitrichtung verschieben und dieselben Werte zusammenführen

Nachdem der Benutzer eine Folie fertiggestellt hat, wiederholen Sie Schritt 2

Beurteilen Sie, ob das Spiel ist Ende und generiert je nach Spielergebnis unterschiedliche Eingabeaufforderungen

Schwierigkeitspunkt

Bestimmen Sie die Gleitrichtung

Wenn der Benutzer gleitet, Das gleiche Gitter verschmilzt und bewegt sich auf einer Seite der Gleitrichtung

2. Verwenden Sie wx :for, um Daten in jede Zelle zu rendern

Logikimplementierung

1. Nachdem die Seite geladen wurde, füllen Sie zufällig zwei Zellen mit den Zahlen 2 oder 4

2. Bestimmen Sie die Gleitrichtung des Benutzers

Verwenden Sie die touchStart-Ereignisfunktion, um die Startposition zu erhalten. touchStartX, touchStartY

Verwenden Sie die touchMove-Ereignisfunktion, um die Endposition zu erhalten. touchEndX, touchEndY

3. Verschieben Sie die Tabelle entsprechend der Schieberichtung (Angenommen, Sie gleiten nach rechts), und führen Sie dieselben Elemente zusammen.

Generieren Sie eine zweidimensionale 4*4-Array-Liste aus dem 2048-Schachbrett. und Leerzeichen werden durch 0 dargestellt

Entsprechend der Gleitrichtung Generieren Sie den entsprechenden Code für das zweidimensionale 4*4-Array

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);

(this.board.grid in Der Code ist das anfängliche Raster oben):

Fügen Sie jedes kleine Array in die Liste ein. Die Zahl wird in den Vordergrund gestellt und 0 wird am Ende platziert

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

Entsprechender Code :

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

Fügen Sie die Zellen mit demselben Wert hinzu und ändern Sie den Wert der folgenden Zelle auf 0

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

Entsprechender Code:

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

Liste zurückgeben2 um die Daten aufzulisten und in der Schachbrettansicht darzustellen

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

list = [

[0, 0 , 0, 4],

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

[0, 0, 0, 0],

[0 , 0, 8, 4],

[0, 0, 0, 0]

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

];

Entsprechender Code:


4 1

5. Bestimmen Sie, ob das Spiel beendet ist

Beurteilungskriterien: 4*4 Einheiten Die Zellen sind gefüllt und es gibt keine Zellen mit dem gleichen Wert oben, unten, links, und rechts von jeder Zelle

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

6. Geben Sie entsprechende Eingabeaufforderungen basierend auf den Spielergebnissen

po Eine Quellcode-Adresse: windlany/wechat-weapp -2048 Wenn Sie interessiert sind, können Sie es versuchen. Ich hoffe, es kann allen helfen.

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

Verwandte Empfehlungen:

WeChat Tiaoyitiao Python-Hilfsskript-Beispielfreigabe

PHP realisiert das WeChat Tiaoyitiao-Minispiel

Beispielfreigabe einer jQuery-Implementierung eines Puzzlespiels

Das obige ist der detaillierte Inhalt vonWeChat Miniprogramm Version 2048 Minispiel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!