2048小游戏(JavaScript版) (2) 构建游戏界面

作者：@小灰灰
本文为作者原创，转载请注明出处：https://www.cnblogs.com/liuhui0308/p/14416039.html

---

阅读目录(Content)

• 1. 构建游戏界面
  • 1.1 项目结构
  • 1.2 构建页面
    • 1.2.1 游戏玩法说明区域
    • 1.2.2 游戏区域

回到顶部(go to top)

1. 构建游戏界面

1.1 项目结构

index.html：游戏界面文件

index.css：游戏样式文件

main.js：游戏主逻辑文件

support.js：游戏基本逻辑文件

showanimation.js：游戏动画逻辑文件

大家先把文件按照这个结构创建好，名字自己命名也可以，但是index.html里面也要跟着修改。

1.2 构建页面

首先在index.html引入样式文件和逻辑文件：

1. <link rel="stylesheet" type="text/css" href="css/index.css">
2. <script type="text/javascript" src="js/support.js"></script>
3. <script type="text/javascript" src="js/showanimation.js"></script>
4. <script type="text/javascript" src="js/main.js"></script>
5. <script type="text/javascript" src="js/rem.js"></script>

游戏界面使用左中右布局，左边是游戏玩法说明区域，中间是游戏区域，游戏区域又使用上中下布局，上面是游戏标题和分数，中间是游戏窗口，下面是重新开始按钮，右边则是历史记录区域。

这里样式我们采用rem布局，来确保在如何pc端浏览器都能正常显示。

所以我们rem.js文件需要添加内容：

1. (function (doc, win) {
2. var docEl = doc.documentElement;
3. resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
4. recalc = function () {
5. var clientWidth = docEl.clientWidth;
6. if (!clientWidth) return;
7. docEl.style.fontSize = (clientWidth / 77) + 'px';
8. };
9.  
10. if (!doc.addEventListener) return;
11. win.addEventListener(resizeEvt, recalc, false);
12. doc.addEventListener('DOMContentLoaded', recalc, false);
13. })(document, window);

1.2.1 游戏玩法说明区域

让我们开始最简单的部分，直接上代码。

index.html：

1. <div class="readme">
2. <span>玩法说明:</span>
3. <p>
4. 键盘上下左右控制移动，相同格子会累积加起来重叠为新的格子，
5. 当所有格子均占有并且不能移动游戏结束。点击重新开始游戏将会重置。
6. </p>
7. </div>

index.css：

1. @CHARSET "UTF-8";
2. *{
3. padding: 0;
4. margin: 0;
5. }
6.  
7. .readme{
8. position:absolute;
9. left: 5%;
10. top:9rem /* 100/25 */;
11. width: 12rem /* 300/25 */;
12. }
13. .readme span{
14. font-size: 1.28rem /* 32/25 */;
15. text-align:center;
16. color: red;
17. font-weight: 800;
18. display: block;
19. margin-bottom: .8rem /* 20/25 */;
20. }
21. .readme p{
22. display: block;
23. font-size: 1.2rem /* 30/25 */;
24. text-indent: .8rem /* 20/25 */;
25. color: #000000;
26. }

运行index.html：

游戏玩法说明区域就完成了。

1.2.2 游戏区域

然后我们开始做游戏区域部分，先做上面的游戏标题和分数。

index.html：

1. <header>
2. <h1>2048</h1>
3. <div class="text">分数:<span id="score">0</span> 分 </div>
4. </header>

index.css：

1. header{
2. display:block;
3. margin:0 auto;
4. width: 25rem /* 400/16 */;
5. text-align:center;
6. }
7.  
8. header h1{
9. font-family:Arial, Helvetica, sans-serif;
10. font-size:3.2rem /* 80/25 */;
11. font-weight:bold;
12. margin-top: .4rem /* 10/25 */;
13. margin-bottom: .4rem /* 10/25 */;
14. }
15.  
16. header .text{
17. font-family:Arial, Helvetica, sans-serif;
18. font-size: .8rem /* 20/25 */;
19. }
20. header .text #score {
21. color: red;
22. }

保存刷新网页：

这样游戏区域上部分就处于布局中上位置了。

然后就是中间的游戏窗口，是个4×4的格子，所以我们用div包裹div来实现就行了。

index.html：

1. <div id="grid-container">
2. <div class="grid-cell" id="grid-cell-0-0"></div>
3. <div class="grid-cell" id="grid-cell-0-1"></div>
4. <div class="grid-cell" id="grid-cell-0-2"></div>
5. <div class="grid-cell" id="grid-cell-0-3"></div>
6.  
7. <div class="grid-cell" id="grid-cell-1-0"></div>
8. <div class="grid-cell" id="grid-cell-1-1"></div>
9. <div class="grid-cell" id="grid-cell-1-2"></div>
10. <div class="grid-cell" id="grid-cell-1-3"></div>
11.  
12. <div class="grid-cell" id="grid-cell-2-0"></div>
13. <div class="grid-cell" id="grid-cell-2-1"></div>
14. <div class="grid-cell" id="grid-cell-2-2"></div>
15. <div class="grid-cell" id="grid-cell-2-3"></div>
16.  
17. <div class="grid-cell" id="grid-cell-3-0"></div>
18. <div class="grid-cell" id="grid-cell-3-1"></div>
19. <div class="grid-cell" id="grid-cell-3-2"></div>
20. <div class="grid-cell" id="grid-cell-3-3"></div>
21. </div>

index.css：

1. #grid-container{
2. width:18.4rem /* 460/25 */;
3. height:18.4rem /* 460/25 */;
4. padding:.8rem /* 20/25 */;
5. margin:1.6rem /* 40/25 */ auto;
6. background:#bbada0;
7. border-radius:.4rem /* 10/25 */;
8. position:relative;
9. }
10.  
11. .grid-cell{
12. width:4rem /* 100/25 */;
13. height:4rem /* 100/25 */;
14. border-radius:.24rem /* 6/25 */;
15. background:#ccc0b3;
16. position:absolute;
17. }

保存刷新网页：

？？？为什么只显示了一个呢，按道理应该是十六个都显示啊。为什么会是这样的呢，因为所有的div格子全部叠在一起了，下一章我会用js将棋盘初始化，那时候才能看到十六个格子。

接下来就是下面的重新开始按钮了，我这边不打算使用button来写，而用a标签来直接实现，利用a标签的href来完成js方法的调用。

index.html：

1. <a href="javascript:newgame();" id="newgamebutton">重新开始</a>

index.css：

1. #newgamebutton{
2. margin: 0 auto;
3. display: block;
4. width:6rem /* 150/25 */;
5. padding:.8rem /* 20/25 */;
6. text-align: center;
7. font-size: .8rem /* 20/25 */;
8. background:#8f7a66;
9. font-family:Arial, Helvetica, sans-serif;
10. color:white;
11. border-radius:.6rem /* 15/25 */;
12. text-decoration:none;
13. cursor: pointer;
14. }
15. #newgamebutton:hover{
16. background:#9f8b77;
17. }

保存刷新网页：

重新开始按钮就做好了， newgame()方法留到后面再编写。

终于到了最后一个部分了，那就是历史记录区域了，这个功能可以将每次的记录保存到浏览器，只保留前八名，只要不清除网站数据，记录就不会消失。

index.html：

1. <div class="history">
2. <div class="title">历史记录(前八)</div>
3. <div class="score-list"></div>
4. </div>

index.css：

1. .history{
2. width: 21rem;
3. height: 20rem;
4. position: absolute;
5. top: 9rem;
6. right: 3rem;
7. }
8.  
9. .history .title{
10. font-size: 1.28rem;
11. text-align: center;
12. font-weight: 800;
13. margin-bottom: .8rem /* 20/25 */;
14. color: red;
15. }

先完成最基本的样式，后面有需要再添加。

这样我们的游戏界面就构建好了！