前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.com/learn/76
这个游戏适合我这种前端入门的小白作为第一个游戏项目，做完还挺有成就感、
虽然是跟着视频做，但是还是经常出错
做完以后收获挺大，但是还有一些不太理解。现在开始复盘，把每一步都认真归纳总结
希望能通过一步一步理解透彻里面的原理，分享出来也希望能帮到你
该游戏需要有HTML、CSS、JS和JQ基础
边做边思考每一步的来由
开始做这个游戏之前请先弄懂整个游戏架构，弄懂游戏架构之前，一定要先玩几盘
2048在线小游戏指路：https://newdoku.com/zh/2048.php
玩法我就不多说了，自己体会
M：Model 数据层，是存储游戏的数据的
V：View 视图层，是用户操作的页面
C：control 控制层，根据用户在视图层输入的指令，调取数据层的信息，进而产生响应操作
程序无论复杂与否，都能分成这三个层次。
游戏的UI界面：由HTML/CSS去控制
游戏的逻辑：由JS/JQ来控制
弄清之后我们正式开始我们的2048小游戏编程之旅~
做这个游戏，我们需要创建3个js文件，1个css文件，1个html文件
2048.html
2048.css
main2048.js
support2048.js
showanimation2048.js
还需要引入一个jQury文件，你也可以使用一个在线的（直接复制可用）
<script src="http://code.jquery.com/jquery-latest.js"></script>
在【2048.html】一共需要引入5个文件
需要控制的经常会改变的数，我们把他们定义在js里，因为 js可以操作一切html和css元素
在【main2048.js】中，我们需要先定义一个数组Array，用来存储游戏盘上的16个格子，定义score来存储分数
- var board = new Array();
- var score = 0;
先大致想好界面设计
这个界面分成两个部分，header和container
header里有标题h1，newgame按钮a，点击会跳到函数newgame(); 这个函数后面再定义
p标签存放成绩，因为数值会变，里面放置span标签控制score的变化
- <header>
- <h1>2048</h1>
- <a href="javascript:newgame();" id="newgamebutton">New Game</a>
- <p>score：<span id="score">0</span></p>
- </header>
给header部分附上样式，先整体，后局部
- body{
- font-family: Arial; }
- header{
- display: block;
- margin: 0 auto;
- width: 500px;
- text-align: center; }
- header h1{
- font-size: 60px;
- font-weight: bold; }
- header #newgamebutton{
- display: block;
- margin: 20px auto;
- width: 100px;
- padding: 10px;
- background-color: #8f7a66;
- color: #fff;
- border-radius: 10px;
- text-decoration: none; }
- header #newgamebutton:hover{
- background-color: #9f8b77; }
- header p{
- font-size: 25px;
- margin: 20px auto; }
再来布局container部分，取名“grid-container”
棋盘上有16个格子，每个格子样式一样，可以用类别来控制样式，统一取名class="grid-cell"，但每个格子效果不一样，都要取一个id，便于给他们定位
于是采用 grid-cell-i-j 形式命名
- <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-233"></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>
棋盘宽高都为500px，每个格子100px，留有20px的padding
先给棋盘和格子做UI样式
最后16个小格子的位置各不相同，采用定位，故棋盘grid-container需要相对定位relative
- #grid-container{
- width: 460px;
- height: 460px;
- padding: 20px;
- margin: 50px auto;
- background-color: #bbada0;
- border-radius: 10px;
- position: relative; }
- .grid-cell{
- width: 100px;
- height: 100px;
- border-radius: 6px;
- background: #ccc0b3;
- position: absolute; }
具体每个小格子的位置，需要用js来控制
在【main2048.js】中设计当整个程序加载完毕后，运行的主函数
对于整个游戏来说，主函数只做一件事情，就是开始一个新游戏。
开始一个新游戏，需要
1. 初始化棋盘
2. 在随机两个格子里生成2或4
之前a标签开始新游戏定义的函数就是newgame()
newgame()里，我们先定义一个初始化棋盘的内函数init()
2.11 init函数
我们用init()来初始化棋盘格
- function init() {
- for(var i = 0; i < 4; i++)
- for(var j = 0; j < 4; j++)
- {
- var gridCell = $("#grid-cell-"+i+"-"+j); //因为前面我们定义了grid-cell-i-j
- gridCell.css('top', getPosTop(i,j));
- gridCell.css('left', getPosLeft(i,j));
- }
- }
2.12 定义getPosTop(i,j)和getPosLeft(i,j)函数
这个函数是为了获得每个小格子的top值和left值
使用两个getPosTop和getPosLeft，传入i和j计算出小格子的top和left值。
因为最上面的一个格子，top=20px ( padding=20px )
第二个格子，top：20+20+100 = 20 +120
第三个：20+2*(20+100)
所以 top = 20 + i*120 ，与j无关
同理，left = 20 + j*120，与i无关
定义getPosTop(i,j)和getPosLeft(I,j)，放在【support2048.js】里
- function getPosTop(i,j){
- return 20 + 120*i; }
- function getPosLeft(i,j){
- return 20 + 120*j; }
此时，运行一下html，可以出现这个界面
像我第一次照着视频边敲边学的时候，对着敲的代码也能敲错
敲错了十分奔溃，不知道自己哪里出错了，金刚眼都难发现
此时附上这一小节的完整的代码，节约一些无助找自己答案哪里出错的时间
html：
css：
main2048.js
support2048.js
这一小节先到这里，本人也是小白一枚，有一些解释不清楚的地方，欢迎大家指正，谢谢~~
- 》》》点击链接直接跳转下一节《《《-