WeChat mini program version 2048 mini game

小云云
Release: 2018-01-25 13:34:20
Original
4575 people have browsed it

The WeChat "jump" mini-game has been popular recently. We also have articles to share on this site: php implements the WeChat "jump-a-hop" mini-game. This article mainly shares the algorithm for implementing 2048 and the points to note. Let's learn together. Bar! (See the end of the article for the source code address).

Algorithm

Generate 4*4 checkerboard view

Randomly generate 2 or 4 to fill two cells

Record the starting position and sum when the user touches The end position is used to determine the sliding direction

Move the cells according to the sliding direction and merge the same values

After the user completes one slide, repeat step 2

Judge whether the game is End, and different prompts will be generated according to the game results


##Difficulty point

Determine the sliding direction

When the user slides, the same grid will be merged and moved to One side of the sliding direction

Implementation

View implementation

1. Use wxml+wxss to generate the checkerboard view

WeChat mini program version 2048 mini game

2. Use wx :for renders data to each cell

Logic implementation

1. After the page is loaded, randomly fill two cells with the number 2 or 4

2. Determine the user Sliding direction

Use touchStart event function to get the starting position touchStartX, touchStartY

Use touchMove event function to get the end position 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);
Copy after login

3. According to the sliding direction (assuming to Swipe right) Move the table and merge the same items

Generate a 4*4 two-dimensional array list from the 2048 board, and use 0 to represent empty spaces

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

Generate 4*4 according to the sliding direction Two-dimensional array

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

Corresponding code (this.board.grid in the code is the initial grid above):

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;
  }
Copy after login

Put the numbers in each small array of the list to the front, and put 0 Go to the end

list2 = [
    [2, 2, 0, 0], 
    [0, 0, 0, 0],
    [4, 8, 0, 0],
    [0, 0, 0, 0]
];
Copy after login

Corresponding 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;
  }
Copy after login

Add cells with the same value and change the value of the next cell to 0

list2 = [
    [4, 0, 0, 0], 
    [0, 0, 0, 0],
    [4, 8, 0, 0],
    [0, 0, 0, 0]
];
Copy after login

Corresponding code:

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;
  }
Copy after login

Return list2 to list and render the data to the checkerboard view

list = [

[0, 0, 0, 4],
[0, 0, 0, 0],
[0, 0, 8, 4],
[0, 0, 0, 0]
];

Corresponding code:

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;
  }
Copy after login

4. Repeat step 1

5. Determine whether the game is over

Judgment criteria: 4*4 cells are filled and there are no cells with the same value above, below, left, and right of any cell

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;
}
Copy after login

6. Give corresponding prompts based on the game results

WeChat mini program version 2048 mini game

po a source code address: windlany/wechat-weapp-2048 If you are interested, you can try it, I hope Can help everyone.

Related recommendations:

WeChat jump python auxiliary script example sharing

php realizes WeChat jump game

Example sharing of jQuery implementation of puzzle game

The above is the detailed content of WeChat mini program version 2048 mini game. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template