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

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

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

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

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

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

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

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

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

下面这个链接中，有小编编写的2048网页版的代码，大家可以参考一下。

链接：https://pan.baidu.com/s/1CWFWtWfPVYk-X8cl1dcLPg

提取码：6a4r

最后，小编再介绍一下设计游戏的一些小思路：

1、大家要去体验不同的游戏，但不是作为玩家去体验，而是从开发者的角度去体验。

2、在体验游戏的过程中要思考下面这几个方面的内容：

① 游戏的布局。

② 游戏的逻辑。

③ 如何优化游戏。

④ 如何做出咱们自己想要的效果。

3、自己做游戏时，则需要考虑如何完成游戏画面的布局：

① 游戏的样式。

② 如何叠加图片。

③ 游戏的开场动画：视频、CG之类的。

4、再者要考虑如何完成游戏的交互功能：

① 比较简单的可以使用脚本语言来实现。

② 比较复杂的则是需要使用专门的游戏引擎来完成，像是html和JavaScript的游戏引擎。

5、最关键的则是要学习游戏的算法和逻辑：

① 最开始的便是计算机的一些基础算法

② 然后就是各种2D、3D、圆等图像的算法。

6、最后则是要考虑怎么将这个游戏移植到其他平台上。

这就是一个制作游戏的大致流程，希望大家读过之后能有所收获，如果大家有什么想法欢迎大家在公众号上留言讨论，或是加入咱们凌云网络的QQ群大家一起学习各种计算机知识。

小编：池毓浩

排版：马淑芳

长按扫码和我们做朋友吧