2048：数字移动的逻辑实现原理
前言：
本文主要讲解2048的游戏实现原理，包括游戏数字移动部分的游戏逻辑实现。
本人目前还处于 Cocos Cerator 游戏引擎的学习阶段，我做了个2048游戏的项目，看似简单，但整个游戏开发也学习了很多。
在网上搜索关于2048游戏实现原理的文章中，很多是直接给出一个界面的当前状态，触摸操作后运行处理只得到一个终态，2048在手指滑动同时界面直接变化，用户体验感觉不佳。
那么，怎么能在处理数字移动合并的同时，将数字移动的部分记录下来呢？
问题解决：
游戏的存储方式是什么？
游戏在存储结构上采用1维数组来实现数据存储，为方便后面统一称‘数字数组’。
并且，想要让数字能够体现移动效果，那么还需要有数据来存储每个数字的移动，这里也用1维数组来存储，其中，每个索引存储的是数字数组对应索引上移动的格数，为方便统一称为‘移动数组’。代码如下：
//数字数组
let numArray = [
0, 2, 2, 0,
4, 0, 2, 2,
2, 2, 0, 4,
0, 4, 0, 2];
//移动数组
let moveArray = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0];
游戏的逻辑原理是什么？
数字数组如何移动和合并呢？
在方法里上下左右四个方向一样操作，变换数组索引（起始位置和下一数字索引步长）就行。
比方说向右滑动，方向上是横向的，分为4行处理，第一行起始点索引为0，步长为1；第二行起始点为4，步长为1。向上滑动，方向上是纵向的，分为4行处理，第一列起始点索引为0，步长为4。
例如向右滑动，分4行处理，从右边到左边依次判断，每个数字先移动，右方有空位向右移动，直至不能移动位置后再合并：数字左方依次判断，不为空并且相等就合并。
我写了一个方法来处理数字数组，并按对应的起始点索引和步长处理数字移动，并修改传入的移动数组。代码如下：
move(ks: number, bc: number, numArray: number[], moveArray: number[]) {
let newNumArray = numArray.slice();
for (let i = 3; i >= 0; i--) {//为空跳过判断
if (newNumArray[ks + i * bc] !== 0) {
for (let j = i; j < 4; j++) {//先移位,将移动的数值加入移动数组moveArray，更新数字数组numArray
if (j < 3 && newNumArray[ks + (j + 1) * bc] === 0) {
moveArray[ks + i * bc] += bc > 0 ? -1 : 1;
newNumArray[ks + (j + 1) * bc] = newNumArray[ks + j * bc];
newNumArray[ks + j * bc] = 0;
continue;
}
else if (j >= 3 || newNumArray[ks + (j + 1) * bc] !== 0) {//在角落或不能移位后就合并
for (let k = j; k > 0; k--) {
if (newNumArray[ks + (k - 1) * bc] !== 0) {//不为空判断，为空跳过
if (newNumArray[ks + (k - 1) * bc] === newNumArray[ks + j * bc]) {//合并，数组更新，将移动的数值加入移动数组moveArray
newNumArray[ks + (k - 1) * bc] = 0;
newNumArray[ks + j * bc] = newNumArray[ks + j * bc] * 2;
moveArray[ks + (k - 1) * bc] += (bc > 0 ? -1 : 1) * (j - (k - 1));
}
break;
} else {
continue;
}
}
break;
}
}
}
}
}
例子：调用向右滑动
//数字数组
let numArray = [
0, 2, 2, 0,
4, 0, 2, 2,
2, 2, 0, 4,
0, 4, 0, 2];
//移动数组
let moveArray = [
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0,
0, 0, 0, 0];
cc.log('-传入数字数组如下-');
for (let x = 0; x < 4; x++) {
cc.log(numArray[x * 4] + ' '
+ numArray[x * 4 + 1] + ' '
+ numArray[x * 4 + 2] + ' '
+ numArray[x * 4 + 3]);
}
//向右滑动
this.move(0, -1, numArray, moveArray);
this.move(4, -1, numArray, moveArray);
this.move(8, -1, numArray, moveArray);
this.move(12, -1, numArray, moveArray);
cc.log('-修改移动数组如下-');
for (let x = 0; x < 4; x++) {
cc.log(moveArray[x * 4] + ' '
+ moveArray[x * 4 + 1] + ' '
+ moveArray[x * 4 + 2] + ' '
+ moveArray[x * 4 + 3]);
}
结果如下：
最后，用移动数组将每个移动的数字节点先移动到对应的位置，再将同个位置下重复的数字节点一个消除一个数字加倍，就能得到移动的效果了。
游戏图（动图太麻烦）：
