用jquery制作2048小游戏（超详细）

先放个效果图吧

首先，先把html结构搭好。新建一个html文件，设置好标题2048，按钮New Game以及score:0，这里按钮是用a标签来将javascript中的newgame函数给传进来，score后面的分数由于是动态的，所以给它添加一个span标签，并加上一个id，代码如下

    <header>
        <h1>2048</h1>
        <a href="javascript:newgame();" id="newgamebutton">New Game</a> <!-- 点击a标签后，执行一个js的自定义函数newgame() -->
        <a href="javascript:undo();" id="undobutton">Undo</a> <!-- 点击a标签后，执行返回上一步的操作 -->
        <p>score: <span id="score">0</span></p>
    </header>

然后将所有的格子布置好，这里是用div标签来表示每个格子，后续将会用相对定位，绝对定位以及js中的函数来编写每个格子的位置。代码如下

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

现在html结构已经搭完了，开始编写css样式。新建一个css文件，这里css样式其实没什么好讲的，各块内容多大字号，什么背景颜色，padding，margin为多少都是看自己喜好，该居中的居中，我设的大盒子长宽为500px，每个格子长宽为100px，代码如下

header {
   
   
    margin: 0 auto;
    width: 500px;
    text-align: center;
}

header h1 {
   
   
    font-family: Arial;
    font-size: 40px;
    font-weight: bold;
}

#newgamebutton {
   
   
    /* 为了设置各方向的padding和margin，将其变成块元素 */
    display: block;
    margin: 20px auto;
    width: 100px;
    color: white;
    background-color: #8f7a66;
    text-decoration: none;
    padding: 10px;
    border-radius: 10px;
    font-family: Arial;
}

#newgamebutton:hover {
   
   
    background-color: #9f8b77;
}

#undobutton {
   
   
    display: inline-block;
    margin: 5px 20px;

    width: 100px;
    padding: 10px 10px;
    background-color: #8f7a66;

    font-family: Arial;
    color: white;

    border-radius: 10px;

    text-decoration: none;
}

#undobutton:hover {
   
   
    background-color: #9f8b77;
}

header p {
   
   
    font-family: Arial;
    font-size: 25px;
    margin: 20px auto;
}

#grid_container {
   
   
    width: 460px;
    height: 460px;
    padding: 20px;
    margin: 30px auto;
    border-radius: 10px;
    background-color: #bbada0;
    /* 给大盒子设置相对定位 */
    position: relative;
}

.grid_cell {
   
   
    width: 100px;
    height: 100px;
    border-radius: 6px;
    background-color: #ccc0b3;
    /* 给小盒子设置绝对定位 */
    position: absolute;
}

css样式设置完后，就可以开始编写js程序了，新建一个js文件。

首先先想清楚我们需要设置什么。从头开始看，我们用a标签定义了一个按钮，在a标签中调用了一个js的函数newgame，那么点击New Game按钮会发生什么呢？初始化，以及产生两个随机数。

初始化中又有什么功能？每一个格子的数字全部初始化为0（0这个数字可以自己随便取），那么我们就需要定义一个数组专门存放数字。并且分数score也归零。

var board = []; //存放数字的数组
var score = 0; //存放得分
var hasConflicted = []; //存放是否冲突的数组
let preValue = [];//存放每一步时每个格子的值
let preScore = [];//存放每一步时的得分

此处我们定义了一个数组hasConflicted ，现在先不讲，等到最后所有功能完成了我们再讲。另外我们之前给每个格子设置了绝对定位，但是还没设置具体的位置，那么在此处一并设置了。代码如下

$(function () {
   
   
    newgame();
})

// 初始化
function newgame() {
   
   
    for (var i = 0; i < 4; i++) {
   
   
        for (var j = 0; j < 4; j++) {
   
   
            var gridCell = $("#grid_cell_" + i + "_" + j); // 定义变量gridCell来编写每个格子的位置
            gridCell.css("top", getPosTop(i, j));
            gridCell.css("left", getPosLeft(i, j)); //只需定义格子的左上角即可
        }
    }

    for (var i = 0; i < 4; i