网页版《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); }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。