Web version of 2048 games tutorial-game Optimizer

1. Gameover section
Let's analyze how the game ends. One case is that there are no empty squares in the checkerboard, and one case is that there are no movable grids in the checkerboard.
First, complete the logic of the Isgameover () method.

function Isgameover () {if (Nospace (board) && Nomove (board)) {        gameover ();}    }

Next, complete the grid without empty squares.

function Nospace (board) {for (var i = 0, i < 4; i++) {for (var j = 0; J < 4; J + +) {if (board[i][j] = = 0) {return FAL Se;}}    } return true;}

Again, there is no movable lattice to complete the checkerboard.

function Nomove (board) {if (Canmovedown (board) | | Canmoveleft (Board) | | Canmoveright (Board) | | Canmoveup (board)) {return false;    } return true;}

Finally, complete the logic of the end of the game.

function Gameover () {    alert ("gameover!");}

2. Join Score
Below, we increase the game score. First, we need to define the score variable to represent the game score after defining the board variable in the Main.js file.
When moving a number lattice, if the values of the two numbers are equal, we need to update the game score (the game score is added to the numeric value of the two-digit grid). Let's move to the left as an example, the following code is to add the corresponding game score:

Add Scorescore + = Board[i][k];updatescore (score);

When we finished moving the logic code, we used the Updatescore () method to implement the updated animation logic for the game score value, which we also defined in the Animation.js file.

function Updatescore (score) {    $ ("#score"). Text (score);}

5.3. Match the game to the original
In this, we have a bug in our "2048" game. That is, when the value of a row of 4 squares is 2, 2, 4, 8, if you move to the left, the result of the original game is 4, 4, 8, and we now have a game of 16. The cause of this problem is that 2 and 2 are combined to 4, 4, and 4 in the third lattice to merge as 8,8 and 8 in the fourth lattice. In the original game, you can merge only once. So we need to be in control.
First, we also define a two-dimensional array hasconflicted in the Main.js file.

var hasconflicted = new Array ();

Second, in the Init () method, we define the hasconflicted array as a two-dimensional array and initialize to False.

function init () {for (var i = 0; i < 4; i++) {        Board[i] = new Array ();        Hasconflicted[i] = new Array (); for (var j = 0; J < 4; J + +) {            board[i][j] = 0;            HASCONFLICTED[I][J] = false;}}}    

Thirdly, we need to set the value of the hasconflicted of each number cell to false in the initialization of the number Updateboardview () method.

function Updateboardview () {    $ (". Number-cell"). Remove (); for (var i = 0; i < 4; i++) {A for (var j = 0; J < 4; J + +) {            $ ("#grid-container"). Append ("<div class= ' Number-cell ' id= ' number-cell-' + i +"-"+ j +" ' ></div> "); v AR Numbercell = $ ("#number-cell-" + i + "-" + j); if (board[i][j] = = 0) {            } else {            }            hasconflicted[i][j] = FAL Se;}}    }

The four, when we really move the number lattice, if the values of the two numbers are equal, we need to increase whether the current lattice is combined after the judgment.

else if (board[i][k] = = Board[i][j] && noblokhorizontalcol (i, K, J, Board) &&!hasconflicted[i][k])

If the current two numbers are merged, you need to set the hasconflicted value to true to indicate that the current number grid cannot be merged.

else if (board[i][k] = = Board[i][j] && noblokhorizontalcol (i, K, J, Board) &&!hasconflicted[i][k]) {// Moveshowmoveanimation (i, J, I, k);//addboard[i][k] + = board[i][j];board[i][j] = 0;//add Scorescore + = Board[i][k]; Updatescore (score); hasconflicted[i][k] = true;continue;}

5.4. Optimize Gameover
Before the Gameover, we just pop up the cue box. The effect is not very good. Now, let's refine the Gameover section to make the game end more beautiful.
First, let's revise the Gameover () method.

function Gameover () {    $ ("#grid-container"). Append ("<div id= ' gameover ' class= ' Gameover ' ><p> this score < /p><span> "+score+" </span><a href= ' javascript:restartgame (); ' id= ' Restartgamebutton ' >Restart </a></div> "), var Gameover = $ (" #gameover ");    Gameover.css ("width", "500px");    Gameover.css ("height", "500px");    Gameover.css ("Background-color", "Rgba (0, 0, 0, 0.5)");

Then, let's set the style of the end of the game tip.

. gameover{display:block; margin:0 auto;width:500px; Text-align:center vertical-align:middle;p Osition:absolute;}. Gameover p {font-family:arial; font-size:50px; color:white; margin:20px auto;margin-top:150px;}. Gameover span {font-family:arial; font-size:50px; color:white; margin:20px Auto;} #restartgamebutton {display:block; margin:20px auto;width:180px;p adding:10px 10px;background-color: #8f7a66; font-fa mily:arial; font-size:30px; color:white; border-radius:10px; text-decoration:none;} #restartgamebutton: hover {background-color: #9f8b77;}

Next, let's complete the logic of the Restartgame () method.

function Restartgame () {    $ ("#gameover"). Remove ();    Updatescore (0);    Newgame ();}