Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how WeChat Mini Programs realizes 2048 games". In daily operation, I believe many people have doubts about how WeChat Mini Programs realizes 2048 games. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how WeChat Mini Programs realizes the 2048 game"! Next, please follow the editor to study!

1. Use wxml+wxss to generate chessboard view

2. Render the data to each cell with wx:for

Logical realization

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

2. Judge the sliding direction of the user

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

Use the touchMove event function to obtain the destination location touchEndX, 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: bottom, 3: left var direction = absdisX > absdisY? (disX < 0? 1: 3): (disY < 0? 2: 0)

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

The chessboard of 2048 is generated into a two-dimensional array list of 4 to 4, with blank spaces represented by 0.

/ / for example, chessboard data var grid = [[2,2,0,0], [0,0,0,0], [0,8,4,0], [0,0,0,0]]

Generate 4x4 two-dimensional array according to sliding direction

Var list = [0,0,2,2], / / Note that 0022 is not 2200, so push from the right into the array [0,0,0,0], [0,4,8,0], [0,0,0,0] because it slides to the right.

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

FormList (dir) {/ / generate four arrays of list based on the incoming sliding direction 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-1ripj] [I]); break Case 3: list [I] .push (this.board.grid [I] [j]); break;}} return list;}

Bring the number in each decimal array of list to the front, and 0 to the end.

List2 = [[2,2,0,0], [0,0,0,0], [4,8,0,0], [0,0,0,0]]

Corresponding code:

ChangeItem (item) {/ / change [0,2,0,2] to [2,2,0,0] var cnt = 0; for (var I = 0; I < item.length; items+) if (item [I]! = 0) item [cnt++] = item [I]; for (var j = cnt; j < item.length; junk +) item [j] = 0; return item;}

Add up the cells of 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]]

Corresponding code:

Combine (list) {/ / the same merge for (var I = 0; I < list.length; iTunes +) / / Digital side list [I] = this.changeItem (list [I]); for (var I = 0; I < this.size; iTunes +) {for (var j = 1; j < this.size) List [I] [j]! = 0) {list [I] [jmur1] + = list [I] [j]; list [I] [j] = 0;}} for (var I = 0; I < list.length) List +) / / move the number to the side again to avoid list [I] = this.changeItem (list [I]); return list;} when 0220 becomes 0400

Roll back list2 to list and render the data to the chessboard view

List = [

[0, 0, 0, 4]

[0, 0, 0, 0]

[0, 0, 8, 4]

[0, 0, 0, 0]

]

Corresponding code:

Move (dir) {/ / 0: top, 1: right, 2: bottom, 3: left var curList = this.formList (dir); var list = this.combine (curList); var result = [[], []]; for (var I = 0; I < this.size; iTunes +) for (var j = 0; j < this.size) 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 (); / / randomly populate two cells return result;} with 2 or 4 after a move

4. Repeat step 1

5. Judge whether the game is over or not

Judging standard: a cell that is full and any cell has no the same value at the top and bottom.

IsOver () {/ / whether the game is over, the ending condition: the available grid is empty and the left and right values of all the lattices are different for (var I = 0; I < this.size; I +) / / unequal for (var j = 1; j < this.size; j +) {if (this.board.grid [I] [j] = = this.board.grid [I] [j]) return false;} for (var j = 0) J < this.size; jacks +) / / unequal for (var I = 1; I < this.size; I +) {if (this.board.grid [I] [j] = = this.board.grid [I-1] [j]) return false;} return true;}

6. Give corresponding hints according to the results of the game.

At this point, the study on "how to achieve 2048 games by WeChat Mini Programs" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.