JavaScript小游戏--2048（PC端）

1.初始化棋局

$(document).ready(function() {
    prepare_for_mobile();   //适配移动端
    new_game();
});

2.开始新游戏

function new_game() {
    back = [];
    //初始化棋盘
    init();
    //在随机两个格子生成数字
    generate_one_number();
    generate_one_number();
}

3.初始化

function init() {
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
            var grid_cell = $(\'#grid_cell_\' + i + \'_\' + j);
            grid_cell.css(\'top\', get_pos_top(i, j) + \'rem\');//每个格子距离顶部和左边的距离；
            grid_cell.css(\'left\', get_pos_left(i, j) + \'rem\');
        }
    }
    for (var i = 0; i < 4; i++) {
        board[i] = new Array();
        has_conflicted[i] = new Array();
        for (var j =0; j < 4; j++) {
            board[i][j] = 0;//生成二维数组，每个格子的数字初始化为0；
            has_conflicted[i][j] = false;
        }
    }


    update_board_view();
    score = 0;
    update_score(score);
}

4.更新棋局（改数字大小、数字背景、设置数字宽度、高度、位置）

 数字为0、 数字大于100、数字大于1024获取不同的数字大小及背景；

function update_board_view() {
    $(\'.number_cell\').remove();//？？number_cell
    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 number_cell = $(\'#number_cell_\' + i + \'_\' + j);
            if (board[i][j] == 0) {
                number_cell.css({
                    \'width\': \'0\',//宽度、高度为0
                    \'height\': \'0\',
                    \'top\': get_pos_top(i, j) + 2.5 + \'rem\',//这是每个数字的位置，其相对于每个格子的位置还要加2.5rem（每个格子高度、宽度为5rem）
                    \'left\': get_pos_left(i, j) + 2.5 +\'rem\',
                    \'line-height\': \'5rem\',
                    \'font-size\': \'3rem\'
                });

            }else if(board[i][j] >= 1024){
                console.log(board[i][j]);
                number_cell.css({
                    \'width\': \'5rem\',
                    \'height\': \'5rem\',
                    \'top\': get_pos_top(i, j) + \'rem\',
                    \'left\': get_pos_left(i, j) + \'rem\',
                    \'background-color\': get_number_background_color(board[i][j]),//改变背景颜色
                    \'color\': get_number_color(board[i][j]),//改变数字颜色
                    \'line-height\': \'5rem\',
                    \'font-size\': \'2rem\'//字体变小
                });
                number_cell.text(board[i][j]);
            }else if(board[i][j] >= 100){
                number_cell.css({
                    \'width\': \'5rem\',
                    \'height\': \'5rem\',
                    \'top\': get_pos_top(i, j) + \'rem\',
                    \'left\': get_pos_left(i, j) + \'rem\',
                    \'background-color\': get_number_background_color(board[i][j]),
                    \'color\': get_number_color(board[i][j]),
                    \'line-height\': \'5rem\',
                    \'font-size\': \'2.5rem\'
                });
                number_cell.text(board[i][j]);
            }else {//小于100
                number_cell.css({
                    \'width\': \'5rem\',
                    \'height\': \'5rem\',
                    \'top\': get_pos_top(i, j) + \'rem\',
                    \'left\': get_pos_left(i, j) + \'rem\',
                    \'background-color\': get_number_background_color(board[i][j]),
                    \'color\': get_number_color(board[i][j]),
                    \'line-height\': \'5rem\',
                    \'font-size\': \'3rem\'
                });
                number_cell.text(board[i][j]);//.text（）方法设置或返回被选元素的文本内容
            }
            has_conflicted[i][j] = false;
        }
    }


}

5.随机在一个格子生成数字

function generate_one_number() {
    if (nospace(board)) {//若nospace(board)返回true，说明没有空格子；
        return false;
    }
    //随机一个位置
    var randx = parseInt(Math.floor(Math.random() * 4));
    var randy = parseInt(Math.floor(Math.random() * 4));//在124行调用
    var time = 0;
    while (time < 50) {//time？？50？？
        if (board[randx][randy] == 0) {//看看随机选的位置上数字是否为0，为0则可用，跳出循环，不为0，则重新找位置。
            break;
        }
        randx = parseInt(Math.floor(Math.random() * 4));//当board[randx][randy]不为0，则重新选位置。
        randy = parseInt(Math.floor(Math.random() * 4));
        time++;
    }
    if (time == 50) {//如果连续找了50次都没找到数字为0的位置，则按二维数组挨个去找，直到找到第一个数字为0的格子；
        for (var i = 0; i < 4; i++) {
            for (var j = 0; j < 4; j++) {
                if (board[i][j] == 0) {
                    randx = i;
                    randy = j;
                }
            }
        }
    }
    //随机一个数字
    var rand_number = Math.random() < 0.5 ? 2 : 4;
    //在随机位置显示随机数字
    board[randx][randy] = rand_number;
    show_number_with_animation(randx, randy, rand_number);//动画显示数字格子
    save_status(board); //每生产一个数字，保存状态（以便撤回），模拟快照，每一步生成一个对象，调用support.js中函数
    return true;
}

6.监听键盘的上下左右移动

keyCode（键码），指定与引发事件的键关联的Unicode的键码。此属性旨在与所述的onkeydown，的onkeyup和onkeypress事件的事件中使用。

键盘上下左右 方向键的键码（keyCode）是38、40、37和39

$(document).keydown(function(event) {
    if ($(\'#score\').text() == success_string) {//一按下键盘首先判断是否成功。324行判断数字是否到达2048，若等于2048则调用showanimation.js中的更新分数函数；
        new_game();
        return;
    }
    switch (event.keyCode) {//键盘上下左右 方向键的键码（keyCode）是38、40、37和39
        case 37: //left
            event.preventDefault();
            if (move_left()) {
                setTimeout(\'generate_one_number()\', 200);//在指定的毫秒数后调用函数或计算表达式，setTimeout() 只执行 code 一次；
                setTimeout(\'is_gameover()\', 300);
            }
            break;
        case 38: //up
            event.preventDefault();
            if(move_up()){
                setTimeout(\'generate_one_number()\',200);
                setTimeout(\'is_gameover()\', 300);
            }
            break;
        case 39: //right
            event.preventDefault();
            if(move_right()){
                setTimeout(\'generate_one_number()\',200);
                setTimeout(\'is_gameover()\', 300);
            }
            break;
        case 40: //down
            event.preventDefault();
            if (move_down()){
                setTimeout(\'generate_one_number()\',200);
                setTimeout(\'is_gameover()\', 300);
            }
            break;
        default:
            break;
    }
});

7.向左移动 （向右移动、向上移动、向下移动类似）

function move_left() {//判断能否左移，调用support.js
    if (!can_move_left(board)) {
        return false;
    }
    //move left
    for (var i = 0; i < 4; i++) {
        for (var j = 1; j < 4; j++) {  //j=1
            if (board[i][j] != 0) {
                for (var k = 0; k < j; k++) {
                    if (board[i][k] == 0 && no_block_horizontal(i, k, j, board)) {//（i，k）为0且（i，k）到（i，j）之间都是0
                        show_move_animation(i, j, i, k);//格子移动时有动画效果，从（i，j）到（i，k）
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                        break;//跳出的只是199行的for循环，外面还有两层循环
                    } else if (board[i][k] == board[i][j] && no_block_horizontal(i, k, j, board) && !has_conflicted[i][k]) {//可合并的情况，（i，k）和（i，j）数字相等且（i，k）到（i，j）之间都是0
                        show_move_animation(i, j, i, k);
                        board[i][k] += board[i][j];
                        board[i][j] = 0;
                        //add score
                        score += board[i][k];
                        update_score(score);
                        has_conflicted[i][k] = true;//？？
                        break;
                    }
                }
            }
        }
    }
    setTimeout(\'update_board_view()\', 200);
    return true;
}

8.判断游戏是否成功

function is_gameover() {
    for(var i=0; i<4; i++){
        for(var j=0; j<4; j++){
            if (board[i][j] == 2048){
                update_score(success_string);
                return;
            }
        }
    }
    if (nospace(board) && nomove(board)) {//没有空格子，且各个方向不能移动合并；
        gameover();
    }
}

function gameover() {
   alert("走投无路啦");
}

9.保存状态

function save_status(board) {
    var o = new Object();
    var n = 1;
    for(var i=0; i<4; i++){
        for(var j=0; j<4; j++){
            o[n] = score+ \',\' + board[i][j];//每个o长度为16
            n ++;
        }
    }
    back.push(o);   //调用一次save_status(board)，back长度加1.
}

10.撤销状态（回退）

function come_back() {
    if (back.length<=2){//back数组长度小于2
        return;
    }
    var o = back[back.length-2];//结合support.js中保存状态的函数理解，back数组长度减2，back[]取减2后的位置上的值，（每生成一个数字会保存一次状态，back数组长度加1）
    var n = 1;
    //o[n]遍历对象
    for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {//把存的score和board[i][j]取出
            board[i][j]  = parseInt(o[n].substr(o[n].lastIndexOf(\',\')+1));//lastIndexOf从右向左出现某个字符或字符串的首个字符索引值，该索引值加1，即可去到，的后半部分
            score = parseInt(o[n]);//逗号前面的
            n++;
        }
    }
    update_score(score);
    back.pop();
    setTimeout(\'update_board_view()\',200);
}