网页版《2048游戏》教程 - 完成游戏逻辑

1.     捕获键盘事件
《2048》游戏的操作主要是依靠键盘的上、下、左、右来完成，首先我们需要在game.js文件中捕获键盘响应的事件。

$(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;
    }
});

键盘事件捕获到后，我们需要完成具体的游戏逻辑。首先，我们以向左移动为例，分析一下向左的事情逻辑内容。
首先，我们需要判断是否可以向左移动，这里我们使用if判断语句完成。

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

如果可以的话，我们需要做两件事情：一件是生成两个新的随机数字，这个逻辑我们使用之前编写的generateOneNumber()方法完成；一件是判断当移动之后游戏是否结束，这个逻辑我们编写isgameover()方法完成。

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

2.     完成移动逻辑
下面我们以向左移动为例，来讲解具体的移动逻辑内容，完成moveLeft()方法逻辑。首先，我们需要判断是否可以向左移动，我们使用canMoveLeft()方法来完成。

function moveLeft() {
if (!canMoveLeft(board)) {
return false;
    }
return true;
}

如果可以向左移动的话，第一步，遍历数字格，判断除第一列外有哪些数字格的值是不为0的。

function moveLeft() {
if (!canMoveLeft(board)) {
return false;
    }
//moveLeft
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] != 0) {
            }
        }
    }
return true;
}

第二步，遍历当前值不为0的数字格左边数字格。

function moveLeft() {
if (!canMoveLeft(board)) {
return false;
    }
//moveLeft
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] != 0) {
for ( var k = 0; k < j; k++) {
                }
            }
        }
    }
return true;
}

第三步，向左移动逻辑还要分成两种情况，一种是当前值不为0的数字格左边的数字格必须值为0并且中间的数字格必须值也为0，一种是当前值不为0的数字格与左边的数字格值相等并且中间的数字格必须值也为0。

//判断当前值不为 0的数字格左边的数字格必须值为 0并且中间的数字格必须值也为 0
if (board[i][k] == 0 && noBlokHorizontalCol(i, k, j, board)) {
continue;
}
//判断当前值不为 0的数字格与左边的数字格值相等并且中间的数字格必须值也为 0
else if (board[i][k] == board[i][j] && noBlokHorizontalCol(i, k, j, board)) {
continue;
}

如果是当前值不为0的数字格左边的数字格必须值为0并且中间的数字格必须值也为0，具体逻辑如下：

//move
showMoveAnimation(i, j, i, k);
board[i][k] = board[i][j];
board[i][j] = 0;

如果是当前值不为0的数字格与左边的数字格值相等并且中间的数字格必须值也为0，具体逻辑如下：

//move
showMoveAnimation(i, j, i, k);
//add
board[i][k] += board[i][j];
board[i][j] = 0;
//add score
score += board[i][k];
updateScore(score);

当完成向左移动逻辑之后，我们需要重新初始化数字格布局。

updateBoardView();

3.     游戏基础逻辑
在完成移动逻辑代码时，我们使用了canMoveLeft()方法来判断是否可以向左移动。我们将此方法定义在suppot.js文件中。

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

在完成移动逻辑代码时，我们使用了noBlokHorizontalCol()方法来判断当前数字格左边的数字格是否值为0。

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

4.     游戏动画逻辑
在完成移动逻辑代码时，我们使用了showMoveAnimation()方法来实现数字格移动的动画逻辑，此方法我们定义在animation.js文件中。

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

网页版《2048游戏》教程 - 完成游戏逻辑,古老的榕树,5-wow.com