網頁版《2048遊戲》教程 - 完成遊戲邏輯

標籤：2048   網頁遊戲   javascript   java   程式員   

1.     捕獲鍵盤事件
《2048》遊戲的操作主要是依靠鍵盤的上、下、左、右來完成，首先我們需要在game.js檔案中捕獲鍵盤響應的事件。

$(document).keydown(function (event) {switch (event.keyCode) {case 37://leftbreak;case 38://upbreak;case 39://rightbreak;case 40://downbreak;default :break;    }});

鍵盤事件捕獲到後，我們需要完成具體的遊戲邏輯。首先，我們以向左移動為例，分析一下向左的事情邏輯內容。
首先，我們需要判斷是否可以向左移動，這裡我們使用if判斷陳述式完成。

$(document).keydown(function (event) {switch (event.keyCode) {case 37://leftif (moveLeft()) {}break;case 38://upbreak;case 39://rightbreak;case 40://downbreak;default :break;    }});

如果可以的話，我們需要做兩件事情：一件是產生兩個新的隨機數字，這個邏輯我們使用之前編寫的generateOneNumber()方法完成；一件是判斷當移動之後遊戲是否結束，這個邏輯我們編寫isgameover()方法完成。

$(document).keydown(function (event) {switch (event.keyCode) {case 37://leftif (moveLeft()) {               generateOneNumber();               isgameover();            }break;case 38://upbreak;case 39://rightbreak;case 40://downbreak;default :break;    }});

2.     完成移動邏輯
下面我們以向左移動為例，來講解具體的移動邏輯內容，完成moveLeft()方法邏輯。首先，我們需要判斷是否可以向左移動，我們使用canMoveLeft()方法來完成。

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

如果可以向左移動的話，第一步，遍曆數字格，判斷除第一列外有哪些數字格的值是不為0的。

function moveLeft() {if (!canMoveLeft(board)) {return false;    }//moveLeftfor (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;    }//moveLeftfor (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並且中間的數字格必須值也為 0if (board[i][k] == 0 && noBlokHorizontalCol(i, k, j, board)) {continue;}//判斷當前值不為 0的數字格與左邊的數字格值相等並且中間的數字格必須值也為 0else if (board[i][k] == board[i][j] && noBlokHorizontalCol(i, k, j, board)) {continue;}

如果是當前值不為0的數字格左邊的數字格必須值為0並且中間的數字格必須值也為0，具體邏輯如下：

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

如果是當前值不為0的數字格與左邊的數字格值相等並且中間的數字格必須值也為0，具體邏輯如下：

//moveshowMoveAnimation(i, j, i, k);//addboard[i][k] += board[i][j];board[i][j] = 0;//add scorescore += 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);}