网页版《2048游戏》教程 - 游戏优化

1.     GameOver部分
下面我们来分析游戏是如何结束的。一种情况是棋盘格中没有空的格子了，一种情况是棋盘格中没有可以移动的格子了。
首先，完成isgameover()方法的逻辑。

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

其次，完成棋盘格中没有空的格子。

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

再次，完成棋盘格中没有可以移动的格子。

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

最后，完成游戏结束的逻辑。

function gameover() {
    alert("gameover!" );
}

2.     加入Score
下面，我们增加游戏分数。首先，我们需要在main.js文件定义board变量后，定义score变量来表示游戏分数。
在移动数字格时，如果两个数字格的值相等的话，我们就需要更新游戏分数（游戏分数为两个数字格的数字值相加）。我们以向左移动为例，下面的代码就是增加对应的游戏分数：

//add score
score += board[i][k];
updateScore(score);

在完成移动逻辑代码时，我们使用了updateScore()方法来实现游戏分数值的更新动画逻辑，此方法我们同样定义在animation.js文件中。

function updateScore(score) {
    $("#score" ).text(score);
}

5.3.     让游戏和原版一致
到此，我们的《2048》游戏中，还有一个bug。就是当一行的4个格子的值为2、2、4、8的时候，如果向左移动，原版游戏的结果为4、4、8，而我们现在的游戏为16。导致这个问题的原因是2和2合并后为4,4又和第三个格子中的4进行合并为8,8再和第四个格子里的8进行合并。而原版游戏中，只能合并一次。所以，我们还需要加以控制。
首先，我们在main.js文件中，同样定义一个二维数组hasConflicted。

var hasConflicted = new Array();

其次，我们在init()方法中，将hasConflicted数组定义为二维数组，并初始化为false。

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

其三，我们需要在初始化数字格updateBoardView()方法中，将每一个数字格的hasConflicted的值设置为false。

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 numberCell = $( "#number-cell-" + i + "-" + j);
if (board[i][j] == 0) {
            } else {
            }
            hasConflicted[i][j] = false;
        }
    }
}

其四，当我们真正移动数字格，如果两个数字格的值相等时，我们需要增加当前格子是否合并后的判断。

else if (board[i][k] == board[i][j] && noBlokHorizontalCol(i, k, j, board)&&!hasConflicted[i][k])

如果当前两个数字格合并之后，需要将hasConflicted值设置为true，表示当前这个数字格不能再合并。

else if (board[i][k] == board[i][j] && noBlokHorizontalCol(i, k, j, board)&&!hasConflicted[i][k]) {
//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);
hasConflicted[i][k] = true;
continue ;
}

5.4.     优化GameOver
之前的GameOver，我们只是弹出提示框。效果上并不很好。现在，我们来优化一下GameOver部分，让游戏结束变得更漂亮一些。
首先，我们来修改一下gameover()方法。

function gameover() {
    $("#grid-container").append( "<div id='gameover' class='gameover'><p>本次得分 </p><span>"+score+"</span><a href='javascript:restartgame();' id='restartgamebutton'>Restart</a></div>");
var gameover = $( "#gameover");
    gameover.css("width", "500px");
    gameover.css("height", "500px");
    gameover.css("background-color", "rgba(0, 0, 0, 0.5)");
}

然后，我们来设置一下游戏结束提示的样式。

.gameover{
display: block ;
margin: 0 auto;
width: 500px ;
text-align: center ;
vertical-align: middle ;
position: absolute ;
}
.gameover p {
font-family: Arial ;
font-size: 50px ;
color: white ;
margin: 20px auto;
margin-top: 150px ;
}
.gameover span {
font-family: Arial ;
font-size: 50px ;
color: white ;
margin: 20px auto;
}
#restartgamebutton {
display: block ;
margin: 20px auto;
width: 180px ;
padding: 10px 10px;
background-color: #8f7a66 ;
font-family: Arial ;
font-size: 30px ;
color: white ;
border-radius: 10px ;
text-decoration: none ;
}
#restartgamebutton:hover {
background-color: #9f8b77 ;
}

其次，我们来完成restartgame()方法的逻辑。

function restartgame(){
    $("#gameover").remove();
    updateScore(0);
    newgame();
}

网页版《2048游戏》教程 - 游戏优化,古老的榕树,5-wow.com