2048 游戏（h5游戏更新中）

2048 游戏的逻辑

在9102年的最后一个月终于想起来了去年这个时候写的 2048 游戏！！！可见去年是没有写出来，哈哈哈。刚好最近手头的工作比较少，那就重新揭开尘逢的记忆，重新整理思路，直击惨不忍睹的…代码。话不多说，我们这就开始吧。（以下提到的小游戏并非微信小游戏哦~）

功能实现

1、4x4地图（网格）
2、初始化 在随机的两个格子 中 分别随机 生成数值小于2 的数字
3、上、下、左、右方向 操作 合并格子

核心逻辑

核心逻辑就是实现上述功能 3 实现的逻辑。首先我们说一下 去年的思路吧。参考大多数小游戏用到的数组管理对象池的做法，可能是考虑不周全，虽有数组参与，非但没有清晰明了反而更加的绕人。即创建一个二维数组 (如下：)

上下左右操作就直接控制数组元素值的改变，之后在页面中显示出来 。这样子也清晰的，在改变数组元素值的环节出了问题，也导致最后出来的效果没有达到预期而被搁置了。ok~，现在我们康康 这一次想到的方法，在这里先说一下我的代码编辑中除了 js 还有 creatJs ，并没有太大影响的。（因为我逐条表述的话可能会让大家产生迷惑，接下来我们就直接放图和代码！原谅我的表述差）我们先看一张程序初始化的图（左上角的数字 可参考为该个网格的id 值）

接下来我们在上一下控制源码
function top () //（每列向上合并）
{
for (var i = 0; i < 4; i++) //列：每一列的第一个（0、1、2、3）
{
for (var j = i; j <= i + 12; j += 4)//行（0、4、8、12）
{
for (k = j; k >= 4; k -= 4)
{
//找到 网格中 id 对应的k-4个元素 和 k 个元素
combine(S.itemBox.getChildAt(k - 4),S.itemBox.getChildAt(k));
}
}
}
}
function bottom () //（每列向下合并）
{
for (var i = 0; i < 4; i++)
{
for (var j = i + 12; j >= i; j -= 4)
{
for (var k = j; k < 12; k += 4)
{
//找到 网格中 id 对应的k+4个元素 和 k 个元素
combine(S.itemBox.getChildAt(k + 4),S.itemBox.getChildAt(k));
}
}
}
}
function left () //（每行向左合并）
{
for (var i = 0; i < 13; i += 4) //行：每一行的第一个（0、4、8、12）
{
for (var j = i; j <= i + 3; j++)
{
for (var k = j; k > i; k–)
{
//找到 网格中 id 对应的k-1个元素 和 k 个元素
combine(S.itemBox.getChildAt(k - 1),S.itemBox.getChildAt(k));
}
}
}
},
function right ()
{
for (var i = 0; i < 13; i += 4)
{
for (var j = i + 3; j >= i; j–)
{
for (var k = j; k < i + 3; k++)
{
//找到 网格中 id 对应的k+1个元素 和 k 个元素
combine(S.itemBox.getChildAt(k + 1),S.itemBox.getChildAt(k));
}
}
}
}
//移动合并检测函数
function combine(before, after) {
//检查 网格before中的数值 以及 网格after中的数值
//移动
if (before.txt.text == “” && after.txt.text != “”) {
before.txt.text = after.txt.text;
after.txt.text = “”;
}
//合并
if (before.txt.text != “” && before.txt.text == after.txt.text) {
before.txt.text *= 2;
after.txt.text = “”;
}else{
console.log(“什么情况”)
}
好，到这里能我们结束了。是不是很简单讷~~~当然，如果有更好的方法，也希望您能分享给我哦~，谢谢讷