关于javascript:2048小游戏JavaScript版-1-游戏介绍构建游戏界面

1. 游戏介绍

当初开始学编程的，基本上都过手机游戏 2048 吧，那么这个游戏的玩法置信很多人都相熟，我在这里再给大家回顾下吧。

1.1 游戏规则

每次管制所有方块向同一个方向静止，两个雷同数字的方块撞在一起之后合并成为他们的和，每次操作之后会在空白的方格处随机生成一个 2 或者 4，一直的组合让分数进步，在手机上有分数排行榜，那些大佬的分数真的令人叹服。如果 16 个格子全副填满并且相邻的格子都不雷同也就是无奈挪动的话，那么祝贺你，gameover。

1.2 游戏根本准则

1. 最大的数肯定要放到角落
2. 数字要按程序紧邻排序
3. 保障最大数和次大数那一行 / 列是满的

这就是我给老手玩家分享的教训，恪守这几个规定，能够保障达到几万分的水准。

1.3 次要实现性能

而后就要来剖析一下咱们须要实现的性能了：

1. 初始化界面，并且随机生成两个数字为 2 或者 4 的格子
2. 方块挪动和合并适宜的成果，方块的色彩要随着值的扭转而扭转
3. 判断在某个方向上是否能够挪动，不能挪动就不变动
4. 在后续生成随机数字的时候判断是否还有空间，有则生成下一块，没有则判断四个方向是否都无奈挪动，都满足时提醒 gameover 并完结游戏
5. 在任意两个格子合并后，分数都要加上值为合并后格子的值
6. 判断每个格子挪动到什么地位，会不会合并

实现思路：

用向右方向挪动为例，先判断格子是否可能向右方向挪动，如果能够，循环每一个格子。如果这个格子的值不为 0，遍历格子右侧的元素，判断落脚的地位是否为空以及落脚地位的数字是否和原本的数字相等。如果落脚的地位为空 && 两头没有障碍物，更新款式，将落脚地位格子的值设为挪动格子的值，原格子值设为空。如果落脚地位的数字和原本的数字相等 && 两头没有障碍物，更新款式，将落脚地位格子的值设为挪动格子值与落脚地位格子值相加后的值，原格子值设为空。

1.4 应用技术

HTML

CSS

JavaScript

jQuery

Vue

我筹备做三个版本的，原生 JavaScript 版、jQuery 版以及 Vue 版。

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.   };

10.   if (!doc.addEventListener) return;
11.   win.addEventListener(resizeEvt, recalc, false);
12.   doc.addEventListener('DOMContentLoaded', recalc, false);
13.  })(document, window);
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.   };

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.  }

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.  }

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.  }

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>

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>

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>

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.  }

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.  }

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.  }

先实现最根本的款式，前面有须要再增加。

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