1. 构建游戏界面
index.html：游戏界面文件
index.css：游戏样式文件
main.js：游戏主逻辑文件
support.js：游戏基本逻辑文件
showanimation.js：游戏动画逻辑文件
大家先把文件按照这个结构创建好，名字自己命名也可以，但是index.html里面也要跟着修改。
首先在index.html引入样式文件和逻辑文件：
游戏界面使用左中右布局，左边是游戏玩法说明区域，中间是游戏区域，游戏区域又使用上中下布局，上面是游戏标题和分数，中间是游戏窗口，下面是重新开始按钮，右边则是历史记录区域。
这里样式我们采用rem布局，来确保在如何pc端浏览器都能正常显示。
所以我们rem.js文件需要添加内容：
让我们开始最简单的部分，直接上代码。
index.html：
index.css：
运行index.html：
游戏玩法说明区域就完成了。
然后我们开始做游戏区域部分，先做上面的游戏标题和分数。
保存刷新网页：
这样游戏区域上部分就处于布局中上位置了。
然后就是中间的游戏窗口，是个4×4的格子，所以我们用div包裹div来实现就行了。
？？？为什么只显示了一个呢，按道理应该是十六个都显示啊。为什么会是这样的呢，因为所有的div格子全部叠在一起了，下一章我会用js将棋盘初始化，那时候才能看到十六个格子。
接下来就是下面的重新开始按钮了，我这边不打算使用button来写，而用a标签来直接实现，利用a标签的href来完成js方法的调用。
重新开始按钮就做好了， newgame()方法留到后面再编写。
终于到了最后一个部分了，那就是历史记录区域了，这个功能可以将每次的记录保存到浏览器，只保留前八名，只要不清除网站数据，记录就不会消失。
先完成最基本的样式，后面有需要再添加。
这样我们的游戏界面就构建好了！