(源码地址见文章末尾)
算法
生成4*4棋盘视图
随机生成2或4填充两个单元格
记录用户touch时的起始位置和结束位置,以此判断滑动方向
根据滑动方向移动单元格,并进行相同值合并
用户一次滑动完成后重复执行步骤...for将数据渲染到每个单元格
逻辑实现
1、页面加载完毕随机用数字2或4填充两个单元格
2、判断用户滑动方向
使用touchStart事件函数获取起始位置touchStartX、touchStartY...2 : 0);
3、根据滑动方向(假设向右滑动)移动表格以及相同项合并
将2048的棋盘生成4*4的二维数组list,为空的空格用0表示
// 比如棋盘数据如下
var grid = [
[2,...0, 0, 2, 2], // 注意是0022不是2200,因为像右滑动所以从右边push入数组
[0, 0, 0, 0],
[0, 4, 8, 0],
[0, 0, 0, 0...4填充两个单元格
return result;
}
4、重复步骤1
5、判断游戏是否结束
判断标准:4*4单元格填满且任意一个单元格上下左右没有相同值的单元格
isOver() { //