JS与HTML、CSS实现2048小游戏（二）

前篇链接

JS与HTML、CSS实现2048小游戏（一）

游戏主逻辑——更新游戏newgame方法

在前面的文章中，已经带大家做好了2048的基本html内容框架，接下来便要开始编写JS程序实现这个游戏。
首先，咱们来编写newgame()方法用于开始新游戏。因为这个是引用在主页面中的逻辑，所以咱们在游戏主逻辑文件main.js下进行编写。这个一步不太好描述，咱们先看代码再来分析。

//页面进入时执行此方法
$(function () {
    newgame();
});

//初始化模块
function newgame() {

    //初始化棋盘格
    init();
    //随机生成两个数
    generateOneNumber();
    generateOneNumber();
}

上述代码中，先是使用$()来检测页面的变量用以在进入页面时便使用newgame()方法来初始化游戏。接着咱们便要开始编辑newgame()方法。而在开始新游戏过程中，咱们有两个步骤需要完成，第一个是初始化游戏的16个格子，这一步咱们在这里先调用一个init()函数来进行初始化，具体的函数逻辑则放在之后进行编辑。第二个则是在随机两个格子中生成两个数字，这里咱们采用generateOneNumber()方法在随机一个空格子中生成一个数字。
现在的这个步骤，就是先按照咱们预先设计好的思路来进行需要使用的方法的编写，在函数写出之前，先在需要的内容中写出这个函数的名称，之后在进行补充编写，不用去考虑函数的先后顺序，JS都可以自动调用。而函数的命名则是直接由步骤的英文名来命名的。

1、 初始化棋盘格init()方法

这样newgame()的大致内容就写好了，咱们再来编写初始化棋盘格的init()方法。在写这个方法前咱们先来看看咱们的棋盘格，如图，咱们需要用的是一个4乘4的方格所以咱们需要使用一个二维数组来表示。

但是在JS中无法直接创建一个二维数组，所以需要采用其他方法来实现二维数组。咱们就先声明一个一位数组board，然后再声名init()方法。在init()方法中，咱们采用一个循环次数为4的for循环，在循环中令board的每一个元素都等于一个新的数组，这样便形成了一个二维数组。

//定义一个JS数组
var board = new Array();
for(var i=0;i<4;i++){
        //定义一个二维数组
        board[i] = new Array();
}

接着，在写一层循环次数为4的for循环，令每个格子的初始值为0。因为咱们做的这个游戏是数字游戏，在后续会更改他的数值，这样初始化之后再写其他的逻辑会更容易判断。

//棋盘初始化函数
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;
}

可是光这样一部仅仅是将格子的内容设定好了，对于在界面上依旧只会有一个小格子孤零零的呆在那里，接下来咱们便要来处理小格子的页面效果了。首先咱们要定义一个变量gridcell来获取到每一个小格子。在前面html页面布局时，咱们使用的id是-i-j的形式，再结合声名二维数组时使用的双重循环，就可以精确的控制每一个小格子了。代码如下：

//获取到每一个小格子
var gridCell = $("#grid-cell-"+i+"-"+j);

接着咱们便要使用.css方法来设置每个格子的样式，在设置之前咱们先要来分析一下咱们想要的布局。咱们需要的是一个包含16个小格子的游戏界面，在其中每个小格子的位置都存在一定的规律，例如：最外侧每个小格子到大格子的距离是固定的，每个小格子之间的间距是固定的。通过这两个规律，咱们就可以把小格子最左端和最右端的距离抽离成一个数学方法进行计算，通过这个方式来设定小格子的位置。通常，咱们用来定位使用的左间距和上间距，所以我就使用了getPosTop()和getPosLeft()两个方法来获取左间距和上间距的具体数值。

//用getPosTop()设置每个格子据顶端的距离
gridCell.css("top",getPosTop(i,j));
//通过getPosLeft()设置每个格子距左端的距离
gridCell.css("left",getPosLeft(i,j));

接着就要来编写这两个方法，因为这个两个获取位置的方法可能在其他地方也会使用到，咱们便将它写在基础逻辑文件support.js中。然后再来看他们的距离关系，每一个小格子距离左边的格子，不管是大格子还是小格子，距离都设置为20，那这样第一个格子到大格子的距离就是20px，第二个则是20px+第一个小格子的长度+20px，第三个则是20px+第一个小格子的长度+20px+第二个小格子长度+20px，以此类推。这样就可以得到，每个格子左侧到大格子的距离就是自己横向序号i*（小格子长度+一个间距的长度）+一个间距的长度。同理，获取到顶部的距离也是如此。这样咱们就可以将16个小格子呈现出来了。

//距离操作界面顶部坐标获取函数
function getPosTop(i,j) {
    return 20+i*120;
}
//距离操作界面左侧坐标获取函数
function getPosLeft(i,j) {
    return 20+j*120
}

这样咱们初始化棋盘格的任务就完成了，效果如下：

2、 数字格初始化

棋盘格已经初始化完成，咱们接下来便要来想办法显示出数字来。而用来显示数字的格子应该在棋盘格的基础之上，所以要在初始化棋盘格的init()方法的最后使用初始化数字格的updateBoardView()方法。之所以要用这个方法，是因为咱们显示数字的格子是在棋盘格之上再覆盖上了一个新的格子来实现的，所以还需要重新再创建16格小格子来达成效果。
同样先在init()方法最后先调用updateBoardView()，然后再init()方法之后再创建updateBoardView()方法。再来看这个方法的内容：显示要创建一个4*4的格子，所以还需要像上面一样使用两次循环。
循环写完之后咱们需要重新创建一个div来显示数字的内容，先是获取到大格子，再使用append函数往里添加div元素，这个方法比较基础就不多做讲解。代码如下：

//数字初始化函数
function updateBoardView(){
    for (var i = 0 ; i < 4; i ++){
        for (var j = 0 ;j < 4;j++){
        	//向棋盘上增加 数字格
            $("#grid-container").append("<div class='number-cell' id='number-cell-"+i+"-"+j+"'></div>");
        }
    }

光加上这些内容还不行，这样是无法显示的，咱们还需要去添加一些样式。在这个过程中，我采用了一个if-else结构，来赋予格式。大家先来看代码：

var numberCell = $("#number-cell-"+i+"-"+j);
//如果棋盘格为0，设置数字格高度和长度皆为零
if (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);
}
//如果棋盘格高度不为零
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]);
}

我分出了两种情况，一种是格子的board的值为0的情况，一种是值不为0的情况。为什么设置值不为0的情况，一会儿在做讲解。先看值为0的情况，在这里小编先让值为0的小格子长宽都为0，接着再设定每个新的小格子都位于底层小格子的中间位置（就是+50达成的效果，小格子长度的一半是50），但是这时候，没法看到它是否显示出来了，需要进入浏览器查看时使用F12来查看新的小格子是否创建完毕。如果成功就会出现下图所示的情况。

然后，还要给这个数字格赋予字体的格式，并且因为此方法在重置游戏时也要使用，还要在方法开头加上清除之前的数字格的作用。最终就会得到如下代码：

//数字初始化函数
function updateBoardView(){
    //清空之前游戏的数字格
    $(".number-cell").remove();
    for (var i = 0 ; i < 4; i ++){
        for (var j = 0 ;j < 4;j++){
            //向棋盘上增加 数字格
            $("#grid-container").append("<div class='number-cell' id='number-cell-"+i+"-"+j+"'></div>");
            var numberCell = $("#number-cell-"+i+"-"+j);
            //如果棋盘格为0，设置数字格高度和长度皆为零
            if (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);
            }
            //如果棋盘格高度不为零
            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]);
            }
    }
    $(".number-cell").css("line-height","100px");
    $(".number-cell").css("font-size","45px");
}