Recently popular micro channel small games, I also wrote a micro channel small program version 2048, this article mainly to share the realization of 2048 algorithm and points of attention, let’s learn! (Source address at the end of this article)

algorithm

  • Generate a 4*4 checkerboard view
  • Randomly generate 2 or 4 to fill both cells
  • Record the start and end position of the user’s touch to judge the sliding direction
  • Move cells according to the slide direction and merge the same values
  • Then repeat Step 2
  • Determine if the game is over and produce different hints depending on the outcome of the game

The difficulties in

  • Determine the direction of slip
  • When the user slides, the same grid is merged and moved to the side of the slide direction

View implementation

1. Generate checkerboard view with WXML + WXSS

2. Use WX :for to render data to each cell

Logic implementation

1. When the page loads, randomly fill the two cells with the number 2 or 4

2. Judge the user’s sliding direction

  • Use the touchStart event function to get the starting position touchStartX, touchStartY
  • Use the touchMove event function to get the destination touchEndX and touchEndY
 var disX = this.touchStartX - this.touchEndX;
    var absdisX = Math.abs(disX);
    var disY = this.touchStartY - this.touchEndY;
    var absdisY = Math.abs(disY);  

    // Determine the direction of movement
    // 0: up, 1: right, 2: down, 3: left
    var direction = absdisX > absdisY ? (disX < 0 ? 1 : 3) : (disY < 0 ? 2 : 0);
Copy the code

3. Move the table and merge the same items according to the slide direction (suppose to the right)

  • 2048 checkerboards generate a 4*4 two-dimensional array list, with empty Spaces represented by 0
// For example, the chessboard data is as follows
var grid = [
    [2.2.0.0],
    [0.0.0.0],
    [0.8.4.0],
    [0.0.0.0]].Copy the code
  • Generates a 4*4 two-dimensional array based on the sliding direction
var list = [
    [0.0.2.2].// Note that 0022 is not 2200, because it is like sliding right so push the array from the right
    [0.0.0.0],
    [0.4.8.0],
    [0.0.0.0]].Copy the code

The corresponding code (where this.board.grid is the initial grid above) :

formList(dir) {  // Generate four arrays of list based on the slide direction passed in
    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 the code
  • Put the number in front of each small array in the list, and put the 0 at the end
list2 = [
    [2.2.0.0], 
    [0.0.0.0],
    [4.8.0.0],
    [0.0.0.0]].Copy the code

Corresponding code:

changeItem(item) {  // Change [0, 2, 0, 2] to [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 the code
  • Adds cells of the same value and changes 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 the code

Corresponding code:

combine(list) { // Same merge when sliding
    for(var i = 0; i < list.length; i++)  // Numbers aside
      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++)  // Keep the numbers aside again to avoid 0220 becoming 0400
      list[i] = this.changeItem(list[i]);

    return list;
  }
Copy the code
  • Roll back list2 to list and render the data to the board view
list = [
    [0.0.0.4],
    [0.0.0.0],
    [0.0.8.4],
    [0.0.0.0]].Copy the code

Corresponding code:

move(dir) {
    // 0: up, 1: right, 2: down, 3: left
    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();  // Fill two cells randomly with either 2 or 4 after one move

    return result;
  }
Copy the code

4. Repeat Step 1

5. Determine if the game is over

  • Criteria: 4*4 cells are full and there are no cells with the same values above and below any of the cells
isOver() {  // If the game is over, the end condition is: the available grids are empty and all grids have different values
  for (var i = 0; i < this.size; i++) // The left and right are not equal
    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++)  // Not up or down
    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 the code

6. Give corresponding hints according to game results

Po a source address: windlany/wechat – weapp – 2048 can be interested in the fork, star ~