纯js2048游戏，2018游戏实现原理，有道具的2048游戏

[hch126163]

自己学了几年js.开始尝试自己写小游戏。个人认为小游戏的逻辑多比工作中的大多数小型项目逻辑复杂。

今天说说我写2048的分享及遇到的问题。请大家多多指教。

2048游戏的实现，如果不考虑数字滑动的动画效果，就很简单了。稍难的是数字滑动的动画效果。


2048游戏规则简单，一共个6个格子，可以4个方向滑动，相同的数字相遇就合并，一个数字翻倍，一个数字清0，清0的腾出一个格子。

当没有空白格子，用来出现新的数字时，游戏结束。


分析2018游戏的数字移动规则，4行(列)，4个方向的移动，其实逻辑都一样，不一样的是要移动的方向和，要移动的数字。

我把16个数字放一个数组，索引0-15。0 表示UI不显示，表示没有数字。

4个方向，每个方向4行(列)的数字移动逻辑一样，只需要对一个方向，一行的移动做分析就可以了。其他的逻辑一致。

一个方向，一行就最多只有4个数字。我用从右到左，第一行来分析。
从右到左，第一行的4个数字索引：0,1,2,3
我把0当作初始索引index，他不用动，其他的3个数字向他移动，其他3个数字的索引递增值n,写一个函数处理一个方向，一行的数字合并及移动。

我用的方法比较笨，用了一个临时数组保存合并后的数字及合并前的索引。

再根据合并后的索引和合并前的索引来计算每个数字应该移动的格子数。

应该有更好的方法来实现，不需要3个循环，或许一个循环就OK。好在每个循环最多4次。性能影响不大。
这个问题，大家有什么好的算法，请不吝赐教！
game.line=function(index,n)
{
var tmp=[];
for(var i=index,c=0;c<4;i+=n,c++)
{
if(game.nums[i])
tmp.push({"index":i,"v":game.nums[i]});
}
for(var c=0;c<tmp.length-1;c++)
{
if(tmp[c].v==tmp[c+1].v && tmp[c].v>0 ){
tmp[c].v*=2;
tmp[c+1].v=-1;
game.nums[tmp[c].index] = tmp[c].v;
game.nums[tmp[c+1].index]=tmp[c].v;
game.curScore+=10;
}
}
var count=0;
for(var c=0;c<tmp.length;c++){
if(game.nums[tmp[c].index])
{
if(tmp[c].v<0){count++;}
setTimeout(( function(e,to){
return function (){game.move(e.index, to);};
})(tmp[c],index+n*(c-count)),1);
}
}
};
有了每个方向，每一行的处理，其他的就简单了，定义一个数组配置 初始索引index和下一个数子索引递增值x，下一行初始索引递增值y，就可以循环处理所有4个方向，4行的处理了。


// fx 左0 上1 右2 下3
// x： 同一行下一个数子索引递增值x， index +x 后为此行的下一个元素，
// 下一行初始索引递增值y, index +y 后为下一行的第一个元素，
var p=[{index:0,x:1,y:4},{index:0,x:4,y:1},
{index:3,x:-1,y:4},{index:12,x:-4,y:1}][fx];
for(var i=0;i<4 ;i++)
{
//p.index+i*p.y 一个指定方向的4行的初始索引

game.line(p.index+i*p.y,p.x);//
}
核心代码就这些了，数字移动用css3动画。游戏不设置2048的上限。增加道具炸弹，一个炸弹一次可以炸掉任意一个数字。

手机上面，实现滑屏操作，宽度自适应。

试玩及源码： 【右键查看源代码，2048.js 就是源码了】

电脑：无上限的2048游戏，有道具的2048游戏 http://www.cyfhw.top/game/2048/

手机：无上限的2048游戏，有道具的2048游戏 http://m.cyfhw.top/game/2048/

[KK3K2005]

我手机上 要2个手指 才能滑动 而且滑动方向不一致

[hch126163]

引用 3 楼 KK3K2005 的回复:

我手机上 要2个手指 才能滑动 而且滑动方向不一致

我测试了UC，苹果自带，小米自带浏览器 ，百度浏览器 没发现这个问题 请问是什么浏览器?

[KK3K2005]

引用 4 楼 hch126163 的回复:

[quote=引用 3 楼 KK3K2005 的回复:] 我手机上 要2个手指 才能滑动 而且滑动方向不一致

我测试了UC，苹果自带，小米自带浏览器 ，百度浏览器 没发现这个问题 请问是什么浏览器?[/quote] 6s微信浏览器 系统自带safair浏览器 2个一样 感觉 手指滑动操作没有正确执行

[hch126163]

game.con.ontouchstart=function(e){ e=e||event;preventDefault(e); if (! e.touches.length || game.isRun) return; game._p = e.touches[0]; }; game.con.ontouchmove=function(e){e=e||event; preventDefault(e); if (! e.touches.length || game.isRun) return; if(game.isEnd()){return;} var p = e.touches[0]; var k = p.pageX-game._p.pageX <-70 ? 0 :p.pageX-game._p.pageX >70 ? 2 : p.pageY-game._p.pageY <-70 ? 1 :p.pageY-game._p.pageY >70 ? 3 :-1; if(k>=0&&k<4){ game.isRun =1; game.doRun(k);} }; 我写的滑动事件，先判断水平方向，在判断垂直方向，且滑动70px 才有效。 逻辑有点问题，应该判断 水平和垂直方向，那个方向滑动的距离大，为那个方向 多谢 @KK3K2005

[EdenYfb]

不错，我玩了一会儿。

[zhanShanCheng]

有个BUG 玩到一半的时候 左上角有个数字2 不管怎么合并都不能消除