Detailed process of implementing the 2048 mini game in WeChat applet

Rendering

Example Code

Today we are going to use the WeChat applet to implement the 2048 game. The effect diagram is shown above. The rules of the game are very simple. You need to control all the blocks to move in the same direction. Two blocks with the same numbers will merge into their sum after colliding. After each operation, a 2 or 4 will be randomly generated. You win if you finally get a "2048" block.

 // Construct an empty matrix [[null,..,size.length],[]]
    empty: function() {
        var cells = [];

        for (var x = 0; x < this.size; x++) {
            var row = cells[x] = [];

            for (var y = 0; y < this.size; y++) {
                row.push(null);
            }
        }

        // [[{x:0,y:0},{x:0,y:1}],[]]
        return cells;
    },

The first thing we need to do is divide the main body of the game into 16 grids. Use Grid to represent these grids, and then these grids have the following operations:

   // Randomly select a cell from the empty cells randomAvailableCell: function() {
    
    // Get the fillable grid coordinates availableCells: function() {
    
    // Is there an empty cell cellsAvailable: function() 
    
    /* 
     * Get cell content * @param {object} cell {x:0,y:0} cell coordinates */
    cellContent: function(cell) {

The above functions are all designed to make subsequent development easier, so that they can be operated directly.

 // Initialize data addStartTiles: function() {
        for (var x = 0; x < this.startTiles; x++) {
            this.addRandomTiles();
        }
    },

    // Randomly fill a random cell with 2 or 4
    addRandomTiles: function() {

        if (this.grid.cellsAvailable()) {
            var value = Math.random() < 0.9 ? 2 : 4;
            var cell = this.grid.randomAvailableCell();
            var tile = new Tile(cell, value);
            this.grid.insertTile(tile); // insert a cell}

    },

Initially, the data is initialized to generate 2 with a 90% probability and 4 with a 10% probability.

touchStart: function(events) {

        // Multi-finger operation this.isMultiple = events.touches.length > 1;
        if (this.isMultiple) {
            return;
        }

        var touch = events.touches[0];

        this.touchStartClientX = touch.clientX;
        this.touchStartClientY = touch.clientY;

    },

    touchMove: function(events) {
        var touch = events.touches[0];
        this.touchEndClientX = touch.clientX;
        this.touchEndClientY = touch.clientY;
    },

    touchEnd: function(events) {
        if (this.isMultiple) {
            return;
        }

        var dx = this.touchEndClientX - this.touchStartClientX;
        var absDx = Math.abs(dx);
        var dy = this.touchEndClientY - this.touchStartClientY;
        var absDy = Math.abs(dy);

        if (Math.max(absDx, absDy) > 10) {
            var direction = absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0);

            var data = this.GameManager.move(direction) || {
                grids: this.data.grids,
                over: this.data.over,
                won: this.data.won,
                score: this.data.score
            };

        }

The game gesture starts and ends the movement. The above section mainly determines the direction of finger movement. Finally, the direction is determined and passed to this.GameManager.move(direction) for movement.

The difficulty here lies in the construction of the data structure, which is relatively easy as long as you understand the grid. Then comes the judgment of finger sliding, which is clearly shown in the above code.

Summarize

This is the end of this article about how to implement the 2048 game in WeChat Mini Program. For more information about the 2048 game in WeChat Mini Program, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: