2048游戏实现 d2

格子/小格子的CSS设定

#grid-container{
    width: 460px;
    height: 460px;
    padding: 20px;
    
    margin: 50px auto;
    background-color: #bbada0;

    border-radius: 10px;
    position: relative;
}

grid-cell{
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background-color: #ccc0b3;

    position: absolute;
}
number-cell {
    border-radius: 6px;
    font-family: Arial;
    font-weight: bold;
    font-size: 60px;
    line-height: 100px;
    position: absolute;
}

视图：
主逻辑 main2048.js

function init(){
    for(var i = 0 ;i < 4;i++){
        for(var j = 0;j < 4;j++){
            var gridCell = $("#grid-cell-"+i+"-"+j);
            gridCell.css('top',getPosTop(i,j));
            gridCell.css('left',getPosLeft(i,j);
        }
    }
}

计算位置

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

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


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 '#edcc1';
            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 '#776a6';
    return 'white';
}

给方块赋值，JS对单双引号没有区分。

for (var i = 0; i < 4; i++) {
    board[i] = new Array();
    for (var j = 0; j < 4; j++)
        board[i][j] = 0;
}

updateBoardView();

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 theNumberCell = $('#number-cell-' + i + '-' + j);
        }
        if (board[i][
            [j]
        ] == 0) {
        theNumberCell.css('width', '0px');
        theNumberCell.css('height', '0px');
        theNumberCell.css('top', getPosTop(i, j) + 50);
        theNumberCell.css('left', getPosLeft(i, j) + 50);
    } else {
        theNumberCell.css('width', '100px');
        theNumberCell.css('height', '100px');
        theNumberCell.css('top', 'getPosTop(i,j)' + 50);
        theNumberCell.css('left', 'getPosLeft(i,j)' + 50);
        theNumberCell.css('background-color', getNumberBackgroundColor(board[i][j]));
        theNumberCell.css('color', getNumberColor(board[i][j]));
        theNumberCell.text(board[i][j]);

    }
}

生成随机数，判断是否为空

function generateOneNumber() {
    if (nospace(board)) {
        return false;
    } else {
        return true;
    }
}

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

生成新数字，位置

function generateOneNumber() {
    if (nospace(board)) {
        return false;
    } else {
        return true;
    }

    var randx = parseInt(Math.floor(Math.random() * 4));
    var randx = parseInt(Math.floor(Math.random() * 4));

    while (true) {
        if (board[ranx][randy] == 0);
        break;
        randx = parseInt(Math.floor(Math.random() * 4));
        randx = parseInt(Math.floor(Math.random() * 4));
    }

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

    board[randx][randy] = randomNumber;
    showNumberWithAnimation(randx, randy, randomNumber);

    return true;

}

展示动画：

function showNumberWithAnimation(i, j, randNumber) {

    var numberCell = $('#number-cell-' + i + "-" + j);

    numberCell.css('background-color', getNumberBackgroundColor(randNumber));
    numberCell.css('color', getNumberColor(randNumber));
    numberCell.text(randNumber);

    numberCell.animate({
        width: "100px",
        height: "100px",
        top: getPosTop(i, j),
        left: getPosLeft(i, j)
    }, 50);
}

使用Jquery判断玩家按键（基于玩家响应的游戏进程）

$(document).keydown(function(event) {
    switch (event.keyCode) {
        case 37:
            if (moveLeft()) {
                generateOneNumber();
                isgameover();
            }
            break;
        case 38:
            if (moveUp()) {
                generateOneNumber();
                isgameover();
            }
            break;
        case 39:
            if (moveRight()) {
                generateOneNumber();
                isgameover();
            }
            break;
        case 40:
            if (MoveDown()) {
                generateOneNumber();
                isgameover();
            }

        default:
            break;
    }
    break;
});
for (var i = 0; i < 4; i++)
        for (var j = 0; j < 4; j++) {
            if (board[i][j] != 0) {
                for (var k = 0; k < j; k++) {
                    if (board[i][k] == 0 && noBlockHorizontal(i, k, j, board)) {
                        board[i][k] = board[i][j];
                        board[i][j] = 0;
                        continue;
                    } else if (board[i][k] == board[i][j] && noBlockHorizontal(i, k, j, board)) {
                        //move
                        showMoveAnimation(i, j, i, k);
                        board[i][k] += board[i][j];
                        board[i][j] = 0;
                        continue;
                        //add

                    }
                }
            }
        }

    return true;
}

移动函数：

function canMoveLeft(board) {
    for (var i = 0; i < 4; i++)
        for (var j = 1; j < 4; j++)
            if (board[i][j] != 0)
                if (board[i][j - 1] == 0 || board[i][j - 1] == board[i][j]) //左边第二列为空，或者并过去的块是相同的，那必然可以继续移动。
                    return true;
    return false;
}

进行一次判断是否是空block

function noBlockHorizontal(row, col1, col2, board) {
    for (var i = col1 + 1; i < col2; i++)
        if (board[row][i] != 0)
            return false;
    return true;
}

更新一下动画：

function showMoveAnimation(fromx, fromy, tox, toy) {
    var numberCell = $("#number-cell-" + fromx + '-' + fromy);
    numberCell.animate({
        top: getPosTop(tox, toy),
        left: getPosLeft(tox, toy)
    }, 200);
}

最后的游戏结束：

function isgameover() {
    if (nospace(board) && nomove(board)) {
        gameover();
    }
}

function gameover() {
    alert('i love you');
}

function nomove(board){
    if(canMoveLeft(board)||
        canMoveRight(board)||
        canMoveDown(board)||
        canMoveUp(board))
        return false;
    return true;
}

Score部分