- A+
所属分类：Web前端
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; }
先完成最基本的样式，后面有需要再添加。
这样我们的游戏界面就构建好了！
