JS与HTML、CSS实现2048小游戏（五）

前篇链接

JS与HTML、CSS实现2048小游戏（一）
JS与HTML、CSS实现2048小游戏（二）
JS与HTML、CSS实现2048小游戏（三）
JS与HTML、CSS实现2048小游戏（四）

计数器

在前面的文章中咱们完成了格子移动的逻辑，可是在游戏的最上方还有一个分数score咱们并没有处理，下面小编就来讲讲怎么处理这个分数。

首先咱们要在JS中定义一个变量来当作分数的计数器，这里小编就直接采用score来当作计数器了。因为是主页面的显示，小编就在游戏主逻辑文件main.js中创建了这个变量并赋予初始值0。

//计数器变量
var score=0;

更新分值——updateScore()

接着咱们要来看分数变化的设置逻辑：在游戏中当两个相同数重叠的时候，分数会增加新生成的那个数的数值，即前文所说的目标格子和当前格子的值相等的情况下，分数才会变化。这个逻辑清楚了，咱们就可以让它产生变化了。咱们再每一个移动方法的第二种if，即board[i][j]==board[i][k]的情况中，加入score增加的算式。然后在使用updateScore(score)方法来初始化分数，令主页中的score值产生变化。

这个分数的变化是页面的动画效果之一，所以咱们也放在动画逻辑文件animation.js中进行编写。这个方法也十分简单只用一句话，取到之前用ID命名的score的标签，然后令他的文本text变成变量score即可。

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

但是仅仅这样来调整分数的话，咱们再点击newgame()方法时并不能更新分数的数值，咱们便需要再newgame()方法或者其中的某个函数上进行更改。小编选择了在init()中进行了调整，在方法最后令score初始化为0，并截取到score标签令其显示为0。

游戏结束判定——isgameover()

这样子分数的问题就处理完了，而在之前编写移动的方法时咱们还有一个判断游戏结束的isgameover方法没有讲解，下面咱们就来编写这个方法。

游戏结束逻辑

同样，先来看看游戏结束的几种条件：

		 1. 没有空格可以生成新的数字块
		 2. 是没有方块可以移动，也就是每个格子四周没有一样的格子了

满足这两个条件，那游戏就gameover了。

函数内容

这样咱们就可以来编写isgameover了，同样，这个游戏逻辑也写在game.js中。咱们通过if中套用nospace和nomove两个方法判断是否达成gameover条件。

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

接着在support.js中来编写nospace()和nomove()这两个方法。这两个方法就比较简单了，前者传入board这个参数然后直接遍历所有格子查看是否有空格子就行，后者则将每一个方向判断能否移动的canMove方法连接在一起进行判断即可。

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

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

再接着就是要编写gameover()方法来弹出游戏结束界面了，比较简陋的格式，咱们便直接使用alert方法弹出你想要的数据就好。到这里为止，咱们游戏的逻辑已经比较完善了，但是还可以在进行一些优化。

游戏优化

比如说：在正版游戏中，如果出现在一次游戏中出现了，4，2，2这个顺序的格子，如果你选择向右移动的话，它需要向右移动两次，最后产生一个8的格子。但是咱们的游戏逻辑中仅一次就会产生一个8的数字块，这样与原版并不想符合，而咱们是想要达到原版的效果，因此就需要优化代码来实现这个效果。

这里小编创建了一个hasConflicted的二维数组来控制这个状况。和board创建在main.js中并在init()中初始化值为false。

同样在数字格的初始化中也要让每一个hasConflicted的值变为false。这样在每一个移动后也不会让它的值因为变化影响游戏。然后再判断两个数字格的值相同时就要加上一个判断条件，判断当前格子是否合并过了，没合并就可以进行判断，同时让对应的目标格子的hasConflicted变成true，这样及不会出现一步合成的情况了。

到现在为止，咱们所编写的游戏就已经和原版的游戏大致相同了，后面一篇文章小编就带大家来优化一下游戏gameover界面的优化，再向大家展示一下小编对于上下右移动方法的编写。

后续文章

JS与HTML、CSS实现2048小游戏（六）