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

小游戏（六）"/>

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

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

• • 前篇链接
  • gameover界面优化
  • 重新开始——restartgame()

前篇链接

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

gameover界面优化

在前面的五篇文章中，我带大家完成了网页版2048小游戏的基本游戏逻辑。但是在游戏结束的gameover()方法中咱们只是简单的通过alert来弹出一些信息，这样的话只能出现下图的效果。这样的游戏，不管是设计者还是玩家都是十分难以接受的。所以咱们今天再来讲讲对于gameover界面的优化。

在开始编写之前，大家可以去玩一玩原版本的手机游戏，看一下原版的游戏效果。在那个游戏中gameover的界面是在16个小格子上面生成一个透明的格子，并显示出gameover、这次游戏所得的分数和restart重新开始的按钮（如下图所示）。

这样通过这个设计好效果，咱们就可以来编写代码了。首先这个是在大格子上出现的一个覆盖式的界面，那咱们就先来添加上这个界面。使用$获取到大格子的信息然后添加一个新的div使用ID命名为gameover。Div中则是加上本次得分的文本段并显示出score的数值。最后再添加一个数值并使用一个重新开始的方法restartgame()对点击事件进行响应。

对于这个按钮，可以和newgame方法一样使用超文本链接标签a来创建，再通过href来引用方法。也可以通过button使用onclick方法对restartgame()进行调用。在这里我为了节省代码编写量，就直接使用a标签进行命名，这样写好之后标签就会直接响应CSS文件中样式，不用再进行一次设置。

function gameover(){$("#grid-contain").apeend("<div id='gameover' class='gameover'><p>本次得分<p/><span>"+score+"</span><a href='javascript:newgame();' id='restartgamebutton'>restart</a></div>");
}

这样就建好了gameover的显示界面，然后咱们就要gameover的div进行设置了。这里同样就先设定了一个变量获取到gameove的div，再用.css进行设置。我在这里设置时，使用了和大格子一样的宽高，这样才能让这个gameover界面彻底覆盖再游戏界面之上。而在设置背景颜色时，我使用了一个0.5的参数，这个是让背景颜色呈现一种半透明的样式。这样才能既显示出16个小格子的数字状态，又呈现出一个深色背景覆盖的情况。

function gameover(){$("#grid-contain").apeend("<div id='gameover' class='gameover'><p>本次得分<p/><span>"+score+"</span><a href='javascript:newgame();' id='restartgamebutton'>restart</a></div>");var gameover=$("#gameover");gameover.css("x-index",1);gameover.css("width","520px");gameover.css("height","520px");gameover.css("background-color","rgba(0,0,0,0.5)");
}

重新开始——restartgame()

这样就只剩下新引用的一个重新开始的方法还没有编写，因为也是对于主页面进行操作，所以咱们继续在main.js中进行编写。

这个方法就比较简单了，咱们只需要将新生成的这个gameover的div移除，再让游戏分数归0，数字格、棋盘格全部初始化，就可以解决这个问题了。我就直接调用了初始化分数的updateScore方法和newgame方法了。

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

这样一来，最后对于游戏gameover界面的简单优化就完成了。可是，我又发现了一个问题，如果再gameover出现之后，我直接点击了newgame按钮，这样就会出现数字格初始化完成，可是上面的gameover界面并没有消失（如下图）。

如果仅仅做到这种程度，那这个游戏还不够严谨，所以我我就要在newgame方法最前面添加一个gameover的div移除的方法，这样就可以说基本上将这个游戏还原完成了。

如果想看我写的2048项目的源代码，请给文章点个赞，并在下方评论区留下邮箱，我将打包好的代码发送到你的邮箱中。