// 判断游戏是否结束 function wheGameOver(checkerboard){ if(!canMoveLeft(checkerboard) && !canMoveUp(checkerboard) && !canMoveRight(checkerboard) && !canMoveDown(checkerboard) ){ showGameOver(); } }
// 显示游戏结束 function showGameOver(){ $('#container').append("<div><p>最终得分</p><span>"+ score +"</span><a href='javascript:resert();'>重新开始游戏</a></div> ") } // 重新开始游戏 function resert(){ $('#gameover').remove(); newgame(); }
最后优化
1、游戏中会出现一次移动，一个数会被累加很多次
在原游戏中，每个数在每次操作中只能累加一次，所以我们在定义一个4x4的值为false的数组，与中间层的数组一一对应，专门用来防止一个数的多次累加，如果是false则可以累加，并将值改为false，否则不可以累加
2、结束死循环
由于在设置随机数的时候用到了一个死循环，但是在游戏结束后，该循环还在，所以我们在死循环中在添加一个条件，如果游戏结束就跳出循环
3、最后的结束游戏提示不执行
case 37://左 if(canMoveLeft(checkerboard)){ // 如果可以向左移动 MoveLeft(); // 向左移动 setTimeout(function(){ wheGameOver(checkerboard) },300); // 判断游戏是否结束,这里设置延时是因为要等到随机产生数字后再进行判断，如果不加 // 延时，则最后一次的判断因为canMoveLeft(checkerboard)为false就不会再执行了 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break;
从代码中可以看出，判断游戏是否结束是在随机产生一个数字前执行的，所以在判断游戏结束时，总是有一个空的格子，所以代码执行后认为游戏没有结束，但是当这个随机数字产生后，所有的格子不能移动，当我们按键时，if条件不通过，判断游戏是否结束的函数不能执行。所以我们要给判断游戏结束的函数设置定时器，让他在随机产生一个数字后再进行判断
4、在移动端可以执行
由于原作者没有写有关移动端的操作，所以我在网上找的判断移动端触屏手机滑动位置的代码，加入了游戏的事件就可以执行了
//返回角度 function GetSlideAngle(dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI; } //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动 function GetSlideDirection(startX, startY, endX, endY) { var dy = startY - endY; var dx = endX - startX; varresult = 0; //如果滑动距离太短 if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { returnresult; } var angle = GetSlideAngle(dx, dy); if(angle >= -45 && angle < 45) { result = 4; }else if (angle >= 45 && angle < 135) { result = 1; }else if (angle >= -135 && angle < -45) { result = 2; } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; } return result; } //滑动处理 var startX, startY; document.addEventListener('touchstart',function (ev) { startX = ev.touches[0].pageX; startY = ev.touches[0].pageY; }, false); document.addEventListener('touchend',function (ev) { var endX, endY; endX = ev.changedTouches[0].pageX; endY = ev.changedTouches[0].pageY; var direction = GetSlideDirection(startX, startY, endX, endY); switch(direction) { case 0: //没滑动 break; case 1: if(canMoveUp(checkerboard)){ // 如果可以向上移动 MoveUp(); // 向上移动 setTimeout(function(){ wheGameOver(checkerboard) },300); // 判断游戏是否结束 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break; case 2: if(canMoveDown(checkerboard)){ // 如果可以向下移动 MoveDown(); // 向下移动 setTimeout(function(){ wheGameOver(checkerboard) },300); // 判断游戏是否结束 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break; case 3: if(canMoveLeft(checkerboard)){ // 如果可以向左移动 MoveLeft(); // 向左移动 setTimeout(function(){ wheGameOver(checkerboard) },300); // 判断游戏是否结束,这里设置延时是因为要等到随机产生数字后再进行判断，如果不加 // 延时，则最后一次的判断因为canMoveLeft(checkerboard)为false就不会再执行了 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break; case 4: if(canMoveRight(checkerboard)){ // 如果可以向右移动 MoveRight(); // 向右移动 setTimeout(function(){ wheGameOver(checkerboard) },300); // 判断游戏是否结束 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break; default: } }, false);
总结
总体来说这个游戏实现起来并不是太难，就是许多小的操作集合起来