前几天看了慕课里的制作2048小游戏课程->>> 指路：https://www.imooc.com/learn/76

这个游戏适合我这种前端入门的小白作为第一个游戏项目，做完还挺有成就感、

虽然是跟着视频做，但是还是经常出错

做完以后收获挺大，但是还有一些不太理解。现在开始复盘，把每一步都认真归纳总结

希望能通过一步一步理解透彻里面的原理，分享出来也希望能帮到你

该游戏需要有HTML、CSS、JS和JQ基础

边做边思考每一步的来由

2048小游戏（一）

开始做这个游戏之前请先弄懂整个游戏架构，弄懂游戏架构之前，一定要先玩几盘

2048在线小游戏指路：https://newdoku.com/zh/2048.php

玩法我就不多说了，自己体会

MVC分别表示：

M：Model 数据层，是存储游戏的数据的

V：View 视图层，是用户操作的页面

C：control 控制层，根据用户在视图层输入的指令，调取数据层的信息，进而产生响应操作

程序无论复杂与否，都能分成这三个层次。

游戏的UI界面：由HTML/CSS去控制

游戏的逻辑：由JS/JQ来控制

弄清之后我们正式开始我们的2048小游戏编程之旅~

1.1 创建引入css文件和js文件

做这个游戏，我们需要创建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>

<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="main2048.js"></script>
<script type="text/javascript" src="showanimation2048.js"></script>
<script type="text/javascript" src="support2048.js"></script>
<link rel="stylesheet" type="text/css" href="2048.css">

在【2048.html】一共需要引入5个文件

需要控制的经常会改变的数，我们把他们定义在js里，因为 js可以操作一切html和css元素

在【main2048.js】中，我们需要先定义一个数组Array，用来存储游戏盘上的16个格子，定义score来存储分数

var board = new Array();

var score = 0;

1.2 UI设计

先大致想好界面设计

这个界面分成两个部分，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>

1.3 构建页面元素

棋盘宽高都为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;  }

2.1 游戏逻辑

具体每个小格子的位置，需要用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：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="main2048.js"></script>
    <script type="text/javascript" src="showanimation2048.js"></script>
    <script type="text/javascript" src="support2048.js"></script>
    <link rel="stylesheet" type="text/css" href="2048.css">
</head>
<body>
    <header>
        <h1>2048</h1>
        <a href="javascript:newgame();" id="newgamebutton">New Game</a>
        <p>score：<span id="score">0</span></p>
    </header>

    <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>
</body>
</html>

css：

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


#grid-container{
    width: 460px;
    height: 460px;
    padding: 20px;

    margin: 50px auto;
    background-color: #bbada0;

    border-radius: 10px;
    position: relative;
    left: 0;
    top:0;
}

.grid-cell{
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background: #ccc0b3;

    position: absolute;
}

main2048.js

var board = new Array();
var score = 0;

$(document).ready(function() { 
    newgame();
 });

function newgame() { 

    // 1.初始化棋盘
    init();

    // 2.随机两个格子生成数字

  }

function init() { 
    for(var i = 0; i < 4; i++)
        for(var j = 0; j < 4; j++)
        {
            var gridCell = $("#grid-cell-"+i+"-"+j);
            gridCell.css('top', getPosTop(i,j));
            gridCell.css('left', getPosLeft(i,j));
        }
   }

support2048.js

function getPosTop(i,j){
    return 20 + i*120;
}
function getPosLeft(i,j){
    return 20 + j*120;
}

这一小节先到这里，本人也是小白一枚，有一些解释不清楚的地方，欢迎大家指正，谢谢~~

html+css+js适合前端小白的实战全解（超详细）——2048小游戏（一）