2048小游戏

在慕课网学习制作了2048小游戏，代码放在Github，效果图如下

效果图

<a href="#p1">一、 初始化棋盘格（绝对定位）</a>
<a href="#p2">二、并随机两个2/4 数字，显示在棋盘格中的随机位置</a>
<a href="#p3">三、按下方向键，执行对应的方向移动函数，如果可以移动，则移动后随机一个新数，并判断游戏是否结束</a>
<a href="#p4">四、避免在一次移动操作中，同一个单元格发生超过一次相加</a>
<a href="#p5">五、移动端响应式</a>
<a href="#p6">六、移动端操作</a>
<a href="#p7">七、定制——小白成长记</a>
<h3>一、初始化棋盘格（绝对定位）</h3>

1. 实现棋盘格布局。二维循环获取HTML中的十六个单元格#grid-cell-i-j，根据单元格的行号确定绝对定位的top值，根据列号确定绝对定位的left值。
2. 创建一个二维数组board[i][j]，并将其中的16个数组项全部初始化赋值为0。
3. 更新二维数组board中的内容。二维循环创建十六个数字容器number-cell并append到单元格容器grid-container中；获取每个数值容器number-cell中的值并判断，如果为零，则根据二维索引值绝对定位在对应位置（本来就不显示，是不是可以省略位置的设置，测试发现不可以，如果不先绝对定位到相应位置，后面随机数显示就会像是从棋盘左上角产生后移动到随机位置的感觉，不是原版中的在随机单元格中间产生），宽高设为0，不显示；非零，则根据二维索引值绝对定位在对应位置，并根据非零数值确定文本和背景颜色，并将board[i][j]赋值到对应的number-cell-i-j。

<h3 id="p2">二、随机两个2/4 数字，显示在棋盘格中的随机位置</h3>

• Math.random()随机0~1数值乘4得到0<=a<4，向上取整得到1<=a<=4，再转成整型得到1,2,3,4。作为随机位置的下标值。如果采用一直随机直到找打一个空格子的思路实现，则随着空格子的减少，随机的时间越来越久，体验很不好；改进为随机50次，如果找到空格子就随机赋值2/4，如果50次后没找到空格子，则通过遍历找到空格子并赋值。

<h3 id="p3">三、按下方向键，执行对应的方向移动函数；如果可以移动，则移动后随机一个新数，并判断游戏是否结束</h3>
<i>注：当出现滚动条时，按下方向键默认是滚动滚动条，这时就会同时发生滚动条滚动和上下左右移动操作，为了避免这种情况，在每次按下方向键时都阻止此方向键的默认行为。</i>
</br>
<b>左移为例，其他方向类似</b>

1. 先判断是否可以左移（循环遍历每一行，遍历右侧三列，如果当前位置非0，如果当前位置左侧数值为0，或者与左侧位置相等，则可以左移），不可以返回false，可以则执行左移后返回true。
2. 执行左移。遍历每一行，遍历右侧三列，如果当前位置非空，遍历当前位置左侧单元格，如果当前位置左侧单元格为0，且两者之间没有非空单元格，则将当前位置直接移动到左侧空单元格，board值也左移；如果当前位置与左侧位置值相同，且两者之间没有非空单元格，则相加后左移，并计算、更新得分。
3. 为了避免在动画执行前执行更新board显示内容，延时执行updateBoardView函数，返回true。
4. 左移成功后，随机一个新数，并判断游戏是否结束。为了避免出现随机数和判断游戏是否结束发生在移动完成前，将这两个函数延时执行。
5. 判断isgameover。如果board中没有空格子，且当前棋盘无法移动。

<h3 id="p4">四、避免在一次移动操作中，同一个单元格发生超过一次相加</h3>

• 通过二维数组hasConflicted初始化每个单元格的相加状态为false，当发生相加后修改其状态为true，每次相加前判断hasConflicted的状态。

<h3 id="p5">五、移动端响应式</h3>

• 获取设备屏幕宽度，如果大于500，则采用固定宽度。否则，采用屏幕宽度的百分比确定。

<h3 id="p6">六、移动端操作</h3>
<i>移动设备上x轴正方向向右，y轴正方向向下。</i>

• 监听移动设备的tochstart和tochend事件，记录两次事件的坐标值，计算tochstart和tochend坐标值在x、y轴上的差值deltax、deltay，对差值取绝对值Math.abs(deltax)、Math.abs(deltay)，如果Math.abs(deltax)大于等于Math.abs(deltay)则判断为x轴方向上的滑动，再根据deltax值的正负判断是左滑还是右滑（大于零是右滑，小于零是左滑）；如果Math.abs(deltax)小于Math.abs(deltay)则判断为y轴方向上的滑动，再根据deltay值的正负判断是上滑还是下滑（大于零是下滑，小于零是上滑）。
• 因为屏幕点击事件也会触发tochstart和tochend事件，为了避免对点击事件的误判断，给触摸起止位移设定一个范围值，超过这个范围才判断为滑动操作，否则判断为误操作，不动作。

<h3 id="p7">七、定制——小白成长记</h3>

• 新建一个二维数组myShow，根据二维数组board中的值来确定myShow的值，再将myShow的值赋值到棋盘格。