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