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界面的优化,再向大家展示一下小编对于上下右移动方法的编写。