I. Interface Display and Brief Introduction

First completed and then different sizes of screen effects, the interface imitation of the original 2048:

(768px < screen)

(500px < screen < 768px)

(Ultra-small screen less than 500 px)

It was expected that the list of games would be on the left and the list on the right, but it was not done for the time being.

The bootstrap grid layout is used as a whole. The left and right columns are hidden under the size of xs, and the middle column occupies 12 grids.

Set additional styles when the screen is less than 500 px:

@media screen and (max-width: 500px){
   ...
}

The realization of animation effect has learned the 2048 course of Mu Course Net, which is also a new way of thinking.

 

Other effects:

· Sliding Operation on Mobile Phone

· Page zoom-in and zoom-out grids follow the movement

 

 

II. Major Implementation Functions

Only the main code is posted here, and annotations are added as much as possible so that you can better understand the implementation logic. The complete project code can be clone in the github address at the end of the article.

1. Logic of Moving, Take Left Moving as an Example

//Determine whether an array of board s with 4*4 corresponding lattices can be moved
function canMoveLeft(){
    for (let i = 0; i<4; i++){
        for (let j = 1; j<4; j++){//The leftmost grid cannot be moved without consideration
            if(board[i][j] != 0)//Must be a grid with numbers
                //Are adjacent cells on the left equal in number or space?
                if (board[i][j-1] == 0 || board[i][j-1] == board[i][j])
                    return true
        }
    }
    return false
}

function moveLeft() {
    if(!canMoveLeft())//Judging whether to move left
        return;
    for(let x = 0; x<4; x++){
        //Merged arrays correspond to four lattices of the row to determine whether they have been merged and avoid merging [2,2,2,2] into [8,0,0,0].
        var merged = [false,false,false,false];
        for(let y = 1; y<4; y++) {
            if (board[x][y] !=0){//Looking for numeric points in the current row from left to right
                var currentnum = board[x][y]; //Number of Current Moving Points
                var last = y; //Record the current location in the process of moving the current point or looking for a merge
                for(var n = y-1; n>=0; n--){//Starting from the adjacent lattice on the left of the current point, look left for blanks or combinable lattices
                    if(board[x][n] == 0){
                        board[x][n] = currentnum;
                        board[x][last] = 0;
                        last = n;
                        continue;
                    }
                    else if(board[x][n] == currentnum && !merged[n]){
                        board[x][n] = currentnum * 2;
                        score+= currentnum * 2;
                        board[x][last] = 0;
                        last = n;
                        merged[n] = true;
                        continue;
                    }
                    else
                        break;//Neighboring lattices cannot be moved and merged to end directly
                }
                moveAnimation(x,y,x,n+1,merged[n+1])//Mobile animation
            }
        }
    }
    setTimeout("updateBoardView()",200) //Update View after Moving
    setTimeout("ranNumber()",200)//Waiting for the mobile animation to be completed to regenerate new numbers
}

 

2. Realization of animation effect

The idea is that 16 div cells originally written in html are only used to achieve visual effects. Actually, they are not operated on. Instead, 16 divs (number-cell) with position=absolute are generated every time according to the data recorded by the two-dimensional array board. When number-cell is not displayed, the size is 0, and the location is in the center of the real grid-cell, where the number or cell is generated. When moving, animate method is used to operate number-cell. After animation, the view is updated. The code is as follows:

function updateBoardView() { //update display
    $(".number-cell").remove();
    for (let i =0; i < 4; i++)
        for (let j = 0; j<4; j++){
            $(".grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');
            var theNumberCell = $('#number-cell-'+i+'-'+j);
            if(board[i][j] == 0){
                theNumberCell.css('width','0px');
                theNumberCell.css('height','0px');
                theNumberCell.css('top',getPosTop(i)+cellSize/2);
                theNumberCell.css('left',getPosLeft(j)+cellSize/2);
            }//cellSize is the length and width of each lattice. cellSpace is the spacing between each lattice.
            else {
                theNumberCell.css('width',cellSize);
                theNumberCell.css('height',cellSize);
                theNumberCell.css('top',getPosTop(i));
                theNumberCell.css('left',getPosLeft(j));
                theNumberCell.css('background-color',getCellColor(board[i][j]));
                theNumberCell.css('color',getNumColor(board[i][j]));
                theNumberCell.text(board[i][j]);
            }
        }
}

Mobile Animation Code:

//Input starting point coordinates, end point coordinates and whether they are merging points?
function moveAnimation(fromx,fromy,tox,toy,merged) { //Mobile animation
    var numberCell = $('#number-cell-'+fromx+'-'+fromy);
    numberCell.animate({
        top:getPosTop(tox),//Determining top Distance Based on the Number of Rows
        left:getPosLeft(toy)//Determining left Distance Based on Column Number
    },100)
    if (merged){ //The process of merging animation expansion and restoring
        numberCell.animate({
            width:cellSize+cellSpace*2,
            height:cellSize+cellSpace*2,
            top:getPosTop(tox)-cellSpace,
            left:getPosLeft(toy)-cellSpace
        },50)
        numberCell.animate({
            width:cellSize,
            height:cellSize,
            top:getPosTop(tox),
            left:getPosLeft(toy)
        },50)
    }
}

 

 

Three, summary

The whole game will take a long time to realize the logic of the whole game. Another difficulty is the realization of animation. Fortunately, the tutorial of Mu Course Net gives a solution. In general, 2048 is a relatively simple project.

Project full code github address: https://github.com/GaoMinjian/2048

Project Online Experience Address 1: https://gaominjian.github.io/2048/index.html

Project Online Experience Address II: http://112.74.53.108/2048/