2048小游戏是当下比较流行的益智游戏了，而它最关键的模块莫过于当手指滑过或鼠标按下后如何确定更新的值。
首先该游戏可以看作一个4*4的二维数组的更新游戏，玩家通过控制数组内元素的合并来不断产生更大的数字，当方向确定时，每一行或每一列的计算方式实际上是一样的，例如，当我确定方向为向左时，每一行的计算方式都是一样的，这样，我们就可以将二维数组的计算简化为一维数组的计算了，然后通过循环计算其他行即可。
而一维数组中主要就是寻找相邻的两个非空值进行合并，相关函数可表示如下：
// 一维数组合并相邻非空项
function mergeArrayElement(arr) {
var newArr = []
var index = -1 // index为-1表示未找到一个非空值
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
if (index != -1) {
if (arr[index] == arr[i]) {
newArr.push(arr[index] * 2)
index = -1
} else {
newArr.push(arr[index])
index = i
}
} else {
index = i
}
}
}
if (index != -1) newArr.push(arr[index])
// 如果新数组长度不足4，补0
while (newArr.length < 4) {
newArr.push(0)
}
return newArr
}
其他方向也都大同小异，稍微对数组加工一下即可获取到更新后的二维数组值，这里贴出完整代码供参考
var arr = [
[1, 1, 2, 2],
[1, 2, 2, 2],
[1, 0, 0, 2],
[1, 2, 2, 4],
]
console.log(get2048NewArray(arr, ))
console.log(get2048NewArray(arr, ‘left‘)) // [ [ 2, 4, 0, 0 ], [ 1, 4, 2, 0 ], [ 1, 2, 0, 0 ], [ 1, 4, 4, 0 ] ]
console.log(get2048NewArray(arr, ‘right‘)) // [ [ 0, 0, 2, 4 ], [ 0, 1, 2, 4 ], [ 0, 0, 1, 2 ], [ 0, 1, 4, 4 ] ]
console.log(get2048NewArray(arr, ‘up‘)) // [ [ 2, 2, 0, 0 ], [ 1, 4, 0, 0 ], [ 4, 2, 0, 0 ], [ 4, 2, 4, 0 ] ]
console.log(get2048NewArray(arr, ‘down‘)) // [ [ 0, 0, 2, 2 ], [ 0, 0, 1, 4 ], [ 0, 0, 2, 4 ], [ 0, 2, 4, 4 ] ]
function get2048NewArray(arr, direction) {
var arrT = arrayTransposition(arr)
var newArr = []
switch (direction) {
// 向上
case ‘up‘:
for (var i = 0; i < 4; i++) {
newArr[i] = mergeArrayElement(arrT[i])
}
break
// 向下
case ‘down‘:
for (var i = 0; i < 4; i++) {
newArr[i] = mergeArrayElement(arrT[i].reverse()).reverse()
}
break
// 向右
case ‘right‘:
for (var i = 0; i < 4; i++) {
// 为了不影响原数组，slice复制一下
newArr[i] = mergeArrayElement(arr[i].slice().reverse()).reverse()
}
break
case ‘left‘:
default:
// 向左
for (var i = 0; i < 4; i++) {
newArr[i] = mergeArrayElement(arr[i])
}
}
return newArr
// 一维数组合并相邻非空项
function mergeArrayElement(arr) {
var newArr = []
var index = -1 // index为-1表示未找到一个非空值
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
if (index != -1) {
if (arr[index] == arr[i]) {
newArr.push(arr[index] * 2)
index = -1
} else {
newArr.push(arr[index])
index = i
}
} else {
index = i
}
}
}
if (index != -1) newArr.push(arr[index])
// 如果新数组长度不足4，补0
while (newArr.length < 4) {
newArr.push(0)
}
return newArr
}
// 二维数组转置
function arrayTransposition(arr) {
var newArr = [
[],
[],
[],
[]
]
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[0].length; j++) {
newArr[i][j] = arr[j][i]
}
// console.log(newArr[0][0])
}
return newArr
}
}
var arr = [
[1, 1, 2, 2],
[1, 2, 2, 2],
[1, 0, 0, 2],
[1, 2, 2, 4],
]
console.log(get2048NewArray(arr, ))
console.log(get2048NewArray(arr, ‘left‘)) // [ [ 2, 4, 0, 0 ], [ 1, 4, 2, 0 ], [ 1, 2, 0, 0 ], [ 1, 4, 4, 0 ] ]
console.log(get2048NewArray(arr, ‘right‘)) // [ [ 0, 0, 2, 4 ], [ 0, 1, 2, 4 ], [ 0, 0, 1, 2 ], [ 0, 1, 4, 4 ] ]
console.log(get2048NewArray(arr, ‘up‘)) // [ [ 2, 2, 0, 0 ], [ 1, 4, 0, 0 ], [ 4, 2, 0, 0 ], [ 4, 2, 4, 0 ] ]
console.log(get2048NewArray(arr, ‘down‘)) // [ [ 0, 0, 2, 2 ], [ 0, 0, 1, 4 ], [ 0, 0, 2, 4 ], [ 0, 2, 4, 4 ] ]
function get2048NewArray(arr, direction) {
var arrT = arrayTransposition(arr)
var newArr = []
switch (direction) {
// 向上
case ‘up‘:
for (var i = 0; i < 4; i++) {
newArr[i] = mergeArrayElement(arrT[i])
}
break
// 向下
case ‘down‘:
for (var i = 0; i < 4; i++) {
newArr[i] = mergeArrayElement(arrT[i].reverse()).reverse()
}
break
// 向右
case ‘right‘:
for (var i = 0; i < 4; i++) {
// 为了不影响原数组，slice复制一下
newArr[i] = mergeArrayElement(arr[i].slice().reverse()).reverse()
}
break
case ‘left‘:
default:
// 向左
for (var i = 0; i < 4; i++) {
newArr[i] = mergeArrayElement(arr[i])
}
}
return newArr
// 一维数组合并相邻非空项
function mergeArrayElement(arr) {
var newArr = []
var index = -1 // index为-1表示未找到一个非空值
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
if (index != -1) {
if (arr[index] == arr[i]) {
newArr.push(arr[index] * 2)
index = -1
} else {
newArr.push(arr[index])
index = i
}
} else {
index = i
}
}
}
if (index != -1) newArr.push(arr[index])
// 如果新数组长度不足4，补0
while (newArr.length < 4) {
newArr.push(0)
}
return newArr
}
// 二维数组转置
function arrayTransposition(arr) {
var newArr = [
[],
[],
[],
[]
]
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr[0].length; j++) {
newArr[i][j] = arr[j][i]
}
// console.log(newArr[0][0])
}
return newArr//.reverse()
}
}
原文地址：https://www.cnblogs.com/chuanzi/p/11638376.html