Web version of 2048 games tutorial-game initialization

3.1. Initialize the Checkerboard
In the Main.js file, we create the Newgame () method to start a new game. To start a new game, you need to do two things, one is to initialize the checker, and one is to generate two numbers in a random two grid.

$ (function () {    newgame ();}); function Newgame () {//Initialize    the checkerboard init ();//Generate a digital generateonenumber () in random two lattices;    Generateonenumber ();}

We do the initialization of the checker by writing the Init () method. The checker is a 4-by-4 block of 16 squares, so we need to create a two-bit array to represent it.

var board = new Array (), function init () {//i = row for 4 times 4 in the grid for (var i = 0; i < 4; i++) {         Board[i] = new Array ();//j represents 4 by 4 of the column for (var j = 0; J < 4; J + +) {//The value of each lattice is initialized to 0            board[i][j] = 0;//by double traversal to get each lattice element var Gridcell = $ ("#grid-ce ll-"+ i +"-"+ j);//Getpostop () method to set the distance            gridcell.css (" Top ", Getpostop (i, J)) of the top of each lattice, and/or through Getposleft () method sets the distance            gridcell.css ("left", Getposleft (i, J)) of each lattice from the right side of the grid;}}    

By completing the above steps, we have completed the initialization of the checker.

3.2. Initialize the number grid
Just initializing the checker is not enough, we also need a 4-by-4 grid to display the numbers. The grid used to display the numbers should be based on the checkerboard, so the initialization of the Updateboardview () should be performed at the end of the Init () method of the initialization checker.

function Updateboardview () {//First empties the contents of the previous number grid to $ (". Number-cell"). Remove (); for (var i = 0; i < 4; i++) {for (var j = 0; J < 4; J + +) {//Add a number to the checkerboard $ ("#grid-container"). Append ("<div class= ' Number-cell ' id= ' number-cell-" + i + "-" + j + "' &G                T;</div> ") var Numbercell = $ (" #number-cell-"+ i +"-"+ j);//If the checkerboard has a value of 0, set the number to aspect 0if (board[i][j] = = 0) {                Numbercell.css ("width", "0px");                Numbercell.css ("height", "0px");                Numbercell.css ("Top", Getpostop (i, j) + 100);            Numbercell.css ("Left", Getposleft (i, j) + 100);                }//if the value of the checker is not 0, set the number grid to aspect to 75 and set the background and foreground color and the numeric value else {numbercell.css ("width", "100px");                Numbercell.css ("height", "100px");                Numbercell.css ("Top", Getpostop (i, j));                Numbercell.css ("Left", Getposleft (i, j));                Numbercell.css ("Background-color", Getnumberbackgroundcolor (Board[i][j])); NUMBERCELL.CSS ("Color", Getnumbercolor (Board[i][j]));            Numbercell.text (Board[i][j]);    }}}//set the font style of the numeric value $ (". Number-cell"). CSS ("Line-height", "100px"); $ (". Number-cell"). CSS ("Font-size", "60px");}

We also need to set some styles in the 2048.css style file for the Number-cell number lattice.

. number-cell {border-radius:6px; font-family:arial; font-weight:bold; font-size:60px; line-height:100px; Text-align: Center;p Osition:absolute;}

After the number lattice is initialized, we are not visible on the page effect. So, we're going to use Firefox's Firebug tool to see if the initialization was successful.

3.3. Randomly generated numbers
After the initialization of the digital lattice, all we need to do is generate two random numbers in two random numbers. This requirement I use the Generateonenumber () method to complete, the completion of this method requires four steps to complete:
The first step is to determine if the current lattice is empty and return FALSE if not NULL, otherwise true.

function Generateonenumber () {if (Nospace (board)) {return false;    } return true;}

The second step is a random lattice.

function Generateonenumber () {//random x-coordinate position var randx = parseint (Math.floor (Math.random () * 4));//random one y-coordinate position var Randy = pa  Rseint (Math.floor (Math.random () * 4));//define a dead loop, complete generating random empty lattice while (true) {//If the value of the current lattice is 0, the condition if (board[randx][randy] = = 0) {break;        } Otherwise re-randomly a position var randx = parseint (Math.floor (Math.random () * 4)); var randy = parseint (Math.floor (Math.random () * 4)); 
   
    }}
   

The third step is a random number.

function Generateonenumber () {//random a number var randnumber = Math.random () < 0.5? 2:4;}

The fourth step shows random numbers in random squares.

function Generateonenumber () {//random number displayed in random position    Board[randx][randy] = randnumber;//animation    for random digital display Shownumberwithanimation (Randx, Randy, Randnumber);}

3.4. Initializing the underlying logic
We used the Getpostop () method and the Getposleft () method to set the distance between the top and the left side when initializing the checkerboard and the grid.

function Getpostop (i, j) {return + I * 120;} function Getposleft (i, j) {return + J * 120;}

When we initialize the numbers, we use the Getnumberbackgroundcolor () method to set the background color of the numbers and use the Getnumbercolor () method to set the foreground color of the numbers.

function Getnumberbackgroundcolor (number) {switch (number) {case 2:return "#eee4da"; break;case 4:return "#ede0c8"; Break;case 8:return "#f2b179"; Break;case 16:return "#f59563"; Break;case 32:return "#f67c5f"; Break;case 64:return "#f65e3b"; Break;case 128:return "#edcf72"; Break;case 256:return "#edcc61"; Break;case 512:return "#9c0", Break;case 1024:return "#33b5e5"; Break;case 2048:return "#09c", Break;case 4096:return "#a6c"; break;case 8192:return "#93c"; break;    }} function Getnumbercolor (number) {if (number <= 4) {return "#776e65"}return "White"    ;}

When generating random numbers, we use the Nospace () method to determine whether the current lattice is empty.

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;}

3.5. Initializing animation logic
When generating random numbers, we use the Shownumberwithanimation () method to complete the animation logic of random digital display.

function Shownumberwithanimation (i, J, Randnumber) {//Gets the current number of cells var Numbercell = $ ("#number-cell-" + i + "-" + j);//Set Current number    numbercell.css ("Background-color", Getnumberbackgroundcolor (Randnumber)) of the background color and foreground color and numeric value of the lattice;    NUMBERCELL.CSS ("Color", Getnumbercolor (Randnumber));    Numbercell.text (Randnumber);//sets the display animation    numbercell.animate ({        width: "100px",        Height: "100px") of the current number grid,        Top:getpostop (i, J),        Left:getposleft (i, J)    }, 50);}