Heim > WeChat-Applet > Mini-Programmentwicklung > WeChat Miniprogramm Version 2048 Minispiel

WeChat Miniprogramm Version 2048 Minispiel

小云云
Freigeben: 2018-01-25 13:34:20
Original
4615 Leute haben es durchsucht

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

WeChat Miniprogramm Version 2048 Minispiel 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);
Nach dem Login kopieren

(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]
];
Nach dem Login kopieren

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

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;
  }
Nach dem Login kopieren

Entsprechender Code:
list2 = [
    [2, 2, 0, 0], 
    [0, 0, 0, 0],
    [4, 8, 0, 0],
    [0, 0, 0, 0]
];
Nach dem Login kopieren

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;
  }
Nach dem Login kopieren

list = [

[0, 0 , 0, 4],
list2 = [
    [4, 0, 0, 0], 
    [0, 0, 0, 0],
    [4, 8, 0, 0],
    [0, 0, 0, 0]
];
Nach dem Login kopieren
[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;
  }
Nach dem Login kopieren
];

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;
  }
Nach dem Login kopieren
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;
}
Nach dem Login kopieren
Verwandte Empfehlungen:

WeChat Tiaoyitiao Python-Hilfsskript-BeispielfreigabeWeChat Miniprogramm Version 2048 Minispiel

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage