Web version of the 2048 game tutorial-complete the game logic

1. Capturing keyboard events
"2048" The operation of the game mainly depends on the keyboard on the top, bottom, left and right to complete, first we need to capture the keyboard response in the Game.js file event.

$ (document). KeyDown (function (event) {switch (event.keycode) {case 37://leftbreak;case 38://upbreak;case 39:// Rightbreak;case 40://downbreak;default:break;    }});

After the keyboard event is captured, we need to complete the specific game logic. First of all, let's move to the left as an example to analyze the logical contents of things to the left.
First, we need to determine if we can move to the left, where we use the IF judgment statement to complete.

$ (document). KeyDown (function (event) {switch (event.keycode) {case 37://leftif (MoveLeft ()) {}break;case 38://upbreak; Case 39://rightbreak;case 40://downbreak;default:break;    }});

If we can, we need to do two things: one is to generate two new random numbers, this logic we use the Generateonenumber () method previously written to complete, one is to determine when the game is finished after the move, this logic we write the Isgameover () method to complete.

$ (document). KeyDown (function (event) {switch (event.keycode) {case 37://leftif (MoveLeft ()) {               generateonenumber () ;               Isgameover ();            } Break;case 38://upbreak;case 39://rightbreak;case 40://downbreak;default:break;    });

2. Complete the Move logic
Let's move to the left as an example to explain the specific moving logic content and complete the MoveLeft () method logic. First, we need to determine if we can move to the left, and we use the Canmoveleft () method to do it.

function MoveLeft () {if (!canmoveleft (board)) {return false;    } return true;}

If you can move to the left, the first step is to traverse the number lattice and determine which number is not 0, except for the first column.

function MoveLeft () {if (!canmoveleft (board)) {return false;    } Moveleftfor (var i = 0; i < 4; i++) {for (var j = 1; j < 4; J + +) {if (board[i][j]! = 0) {            }        }    }return true;}

The second step is to traverse the number grid to the left of the numeric grid with the current value not being 0.

function MoveLeft () {if (!canmoveleft (board)) {return false;    } Moveleftfor (var i = 0; i < 4; i++) {for (var j = 1; j < 4; J + +) {if (board[i][j]! = 0) {for (var k = 0; K < J ; k++) {                }            }        }    }return true;}

The third step, the left to move the logic is also divided into two cases, one is the current value is not 0 the number of the left of the number lattice must be a value of 0 and the middle of the number grid must also be 0, a number of the current value is not 0 is equal to the number of the left and the middle of the number grid must be 0

The number cell to the left of the number grid that is not 0 is determined to have a value of 0 and the median number must also be 0if (board[i][k] = = 0 && Noblokhorizontalcol (i, K, J, board)) {continue;} The number with the current value not 0 is equal to the number on the left and the median must also be 0else if (board[i][k] = = Board[i][j] && noblokhorizontalcol (i, K, J, board ) {continue;}

If the number grid to the left of the current value is not 0 must be a value of 0 and the median number must also be a value of 0, the exact logic is as follows:

Moveshowmoveanimation (i, J, I, k); Board[i][k] = board[i][j];board[i][j] = 0;

If the number with the current value is not 0 is equal to the value on the left and the median number must also be 0, the logic is as follows:

Moveshowmoveanimation (i, J, I, k);//addboard[i][k] + = board[i][j];board[i][j] = 0;//add Scorescore + = Board[i][k]; Updatescore (score);

When we finish moving the logic to the left, we need to reinitialize the number grid layout.

Updateboardview ();

3. Basic game Logic
When we finished moving the logic code, we used the Canmoveleft () method to determine whether we could move to the left. We define this method in the Suppot.js file.

function Canmoveleft (board) {for (var i = 0, i < 4; i++) {for (var j = 1; j < 4; J + +) {if (board[i][j]! = 0) {if "Bo Ard[i][j-1] = = 0 | | Board[i][j-1] = = Board[i][j]) {return true;}}}    return false;}

When we finished moving the logic code, we used the Noblokhorizontalcol () method to determine if the number lattice to the left of the current number lattice is 0.

function Noblokhorizontalcol (row, col1, col2, board) {for (var i = col1 + 1; i < col2; i++) {if (board[row][i]! = 0) {R Eturn false;        }    } return true;}

4. Game Animation logic
When we finished moving the logic code, we used the Showmoveanimation () method to implement the animation logic for the movement of the numbers, which we defined in the Animation.js file.

function Showmoveanimation (FROMX, fromy, Tox, toy) {var Numbercell = $ ("#number-cell-" + FromX + "-" + fromy);    Numbercell.animate ({        top:getpostop (Tox, toy),        Left:getposleft (Tox, toy)    }, 200);}