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

1. 构建游戏界面

1.1 项目结构

index.html：游戏界面文件

index.css：游戏样式文件

main.js：游戏主逻辑文件

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

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

你们先把文件按照这个结构建立好，名字本身命名也能够，可是index.html里面也要跟着修改。

1.2 构建页面

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

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

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

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

因此咱们rem.js文件须要添加内容：

(function (doc, win) {var docEl = doc.documentElement;
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;
            docEl.style.fontSize = (clientWidth / 77) + 'px';
        };if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

1.2.1 游戏玩法说明区域

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

index.html：

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

index.css：

@CHARSET "UTF-8";
*{padding: 0;margin: 0;
}
 .readme{position:absolute;left: 5%;top:9rem /* 100/25 */;width: 12rem /* 300/25 */;
 }.readme span{
  font-size: 1.28rem /* 32/25 */;
  text-align:center;
  color: red;
  font-weight: 800;
  display: block;
  margin-bottom: .8rem /* 20/25 */;
}.readme p{
  display: block;
  font-size: 1.2rem /* 30/25 */;
  text-indent: .8rem /* 20/25 */;
  color: #000000;
}

运行index.html：

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

1.2.2 游戏区域

而后咱们开始作游戏区域部分，先作上面的游戏标题和分数。

index.html：

<header><h1>2048</h1><div class="text">分数:<span id="score">0</span> 分 </div></header>

index.css：

header{
  display:block;
  margin:0 auto;
  width:  25rem /* 400/16 */;
  text-align:center;
}
 header h1{
  font-family:Arial, Helvetica, sans-serif;
  font-size:3.2rem /* 80/25 */;
  font-weight:bold;
  margin-top: .4rem /* 10/25 */;
  margin-bottom: .4rem /* 10/25 */;
}header .text{
  font-family:Arial, Helvetica, sans-serif;
  font-size: .8rem /* 20/25 */;
}header .text #score {
  color: red;
}

保存刷新网页：

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

而后就是中间的游戏窗口，是个4×4的格子，因此咱们用div包裹div来实现就好了。

index.html：

<div id="grid-container"><div class="grid-cell" id="grid-cell-0-0"></div><div class="grid-cell" id="grid-cell-0-1"></div><div class="grid-cell" id="grid-cell-0-2"></div><div class="grid-cell" id="grid-cell-0-3"></div><div class="grid-cell" id="grid-cell-1-0"></div><div class="grid-cell" id="grid-cell-1-1"></div><div class="grid-cell" id="grid-cell-1-2"></div><div class="grid-cell" id="grid-cell-1-3"></div><div class="grid-cell" id="grid-cell-2-0"></div><div class="grid-cell" id="grid-cell-2-1"></div><div class="grid-cell" id="grid-cell-2-2"></div><div class="grid-cell" id="grid-cell-2-3"></div><div class="grid-cell" id="grid-cell-3-0"></div><div class="grid-cell" id="grid-cell-3-1"></div><div class="grid-cell" id="grid-cell-3-2"></div><div class="grid-cell" id="grid-cell-3-3"></div></div>

index.css：

#grid-container{
  width:18.4rem /* 460/25 */;
  height:18.4rem /* 460/25 */;
  padding:.8rem /* 20/25 */;
  margin:1.6rem /* 40/25 */ auto;
  background:#bbada0;
  border-radius:.4rem /* 10/25 */;
  position:relative;
}
 
.grid-cell{
  width:4rem /* 100/25 */;
  height:4rem /* 100/25 */;
  border-radius:.24rem /* 6/25 */;
  background:#ccc0b3;
  position:absolute;
}

保存刷新网页：

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

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

index.html：

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

index.css：

#newgamebutton{
  margin: 0 auto;
  display: block;
  width:6rem /* 150/25 */;
  padding:.8rem /* 20/25 */;
  text-align: center;
  font-size: .8rem /* 20/25 */;
  background:#8f7a66;
  font-family:Arial, Helvetica, sans-serif;
  color:white;
  border-radius:.6rem /* 15/25 */;
  text-decoration:none;
  cursor: pointer;
}#newgamebutton:hover{
  background:#9f8b77;
}

保存刷新网页：

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

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

index.html：

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

index.css：

.history{
  width: 21rem;
  height: 20rem;
  position: absolute;
  top: 9rem;
  right: 3rem;
}.history .title{
  font-size: 1.28rem;
  text-align: center;
  font-weight: 800;
  margin-bottom: .8rem /* 20/25 */;
  color: red;
}

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

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