jQuery制作《2048》

《2048》是比较流行的一款数字游戏，在初始的16个方格中会随机出现基础数字2和4，使用上下左右四个快捷键来移动数字块，相同的数字会叠加在一起，直到游戏出现[2048]数字即为游戏的通关。今天为大家奉上使用‘面向过程’写的《2048》小游戏。

游戏源码：2048游戏源码
1.构建页面
创建一个html文件用于编写静态页面，分别设置游戏的标题，开始游戏按钮，分数和16个小方格。
2.初始化棋盘格
创建一个main.js文件用来初始化棋盘格，在棋盘格上随机的生成两个数字，2和4
由于棋盘格是一个4*4的16方格所以我们需要创建一个二维数组来表示棋盘上的所有方格。

var board = new Array();//定义一个数组
function init() {
        for (var i = 0; i < 4; i++) {
            board[i] = new Array();
            for (var j = 0; j < 4; j++) {
                board[i][j] = 0;
        //此处设置方格的css样式
        }
    }
}

这样初始化的棋盘格二维数组就创建出来了。
3.初始化数字格
初始化方格后需要为数字格做准备，数字格里面需要有内容，并且数字格的位置是随机生成的
1定义一个函数用于初始化数字格，初始化数字格之前首先清除原来存在的数字格布局和内容以免对下一次随机生成的数字格造成影响。

 $(".number-cell").remove();

2创建另一个二维数组用于存放合并的数字格，并且设置数字格的宽高和随机的位置（top，left）

for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            //将创建的数字格添加到此处

            //如果棋盘格的值为0；设置数字格宽高都为0
            if (board[i][j] == 0) {
                numberCell.css({
                    width: 0,
                    height: 0,
                    top: getPosTop(i, j) + 50,
                    left: getPosLeft(i, j) + 50
                });
            } else {
                numberCell.css({
                    width: 100,
                    height: 100,
                    top: getPosTop(i, j),
                    left: getPosLeft(i, j),
                }).text(board[i][j]);
            }
            hasBug[i][j] = false;
        }
    }

3在随机生成的方格中随机的生成两个数字2和4 首先判断一下当前的数字格是否为空，如果不为空返回false，否则返回true。

if (nospace(board)) {
        return false;
    }
    return true;

4随机生成一个格子

    //随机一个x坐标的位置
    var randx = parseInt(Math.floor(Math.random() * 4));
    //随机一个y坐标的位置
    var randy = parseInt(Math.floor(Math.random() * 4));
    //定义一个死循环,完成生成随机空格子
    while (true) {
        //如果当前格子的值为0,满足条件
        if (board[randx][randy] == 0) {
            break;
        }
        //否则重新随机一个位置
        var randx = parseInt(Math.floor(Math.random() * 4));
        var randy = parseInt(Math.floor(Math.random() * 4));
    }

5随机一个数字（只能随机出现2和4）

 var randNumber = Math.random() < 0.5 ? 2 : 4;

6在随机格子中显示随机的数字

board[randx][randy] = randNumber;

4.初始化基础逻辑
1使用getPosTop()方法和getPosLeft()方法来完成距顶端和距左端的距离设置。

function getPosTop(i, j) {
    return 20 + i * 120;
}
function getPosLeft(i, j) {
return 20 + j * 120;
}

2编写函数来设置方格的背景色和前景色
3定义一个函数来判断当前格子是否为空。

 for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            if (board[i][j] == 0) {
                return false;
            }
        }
    }
    return true;

5.初始化动画逻辑
当随机的位置方格随机出现时加入自己喜欢的动画，并为数字格添加背景色和前景色。
6.游戏逻辑
1捕获键盘事件 游戏是用上下左右四个键来控制的因此需要给对应的键盘添加事件
使用keydown来监听是哪个键盘被按下了并使用keycode来判断需要做哪些事情。

$(document).keydown(function (event) {
    switch (event.keyCode) {
        case 37://left
            break;
        case 38://up
            break;
        case 39://right
            break;
        case 40://down
            break;
        default :
            break;
    }
});

2给对应键盘添加函数来使得方格能够移动，这里以向左为例。需要判断向左移动的方格左边是否有不为0的数字，如果有并且已经靠边了，就不能移动，如果数字能够叠加则可以移动。如果待移动的方格与已经靠边的方格中间无方格那么也可以移动。

//向左移动
function moveLeft() {
    if (!canMoveLeft(board)) {
        //当前格子 无法移动
        return false;
    }
    //完成向左移动的逻辑
    for (var i = 0; i < 4; i++) {
        //由于第一列不能再移动了 所以j从1开始
        for (var j = 1; j < 4; j++) {
            //数字格有值才可以移动
            if (board[i][j] != 0) {
                //向左移动
                for (var k = 0; k < j; k++) {
                    if (board[i][k] == 0 && noBlokHorizontalCol(i, k, j, board)) {
                        showMoveAnimation(i, j, i, k);
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    }
                    else if (board[i][k] == board[i][j] && noBlokHorizontalCol(i, k, j, board) && !hasBug[i][k]) {
                        //move
                        showMoveAnimation(i, j, i, k);
                        //累加数字
                        board[i][k] += board[i][j];
                        board[i][j] = 0;

                        //增加分数
                        score += board[i][k];
                        updateScore(score);

                        hasBug[k][j] = true;
                        continue;
                    }
                }

            }
        }
    }
    setTimeout( updateBoard,200);
    return true;
}

7.游戏收尾
1关于游戏何时结束
棋盘中无空余的方格
棋盘中无可移动的方格
棋盘中无可以叠加的方格
那么游戏可以结束了
编写gameOver函数

function gameover() {
    alert("游戏结束!");
}

整个游戏的流程大致就这样了。由于使用面向过程编写，代码比较繁琐，有能力的小伙伴可以使用面向对象来优化代码。