如何实现 2048

问题描述

我正在尝试使用 JavaScript 实现 the game 2048。我使用二维数组来表示板。对于每一行，它使用一个整数数组表示。

在这里，我专注于实现左合并功能，即在用户按下键盘上的左键后发生的合并。

这是我想出的一组测试用例

const array1 = [2,2,0] //  [4,0]
const array2 = [2,2] // [4,4,0]
const array3 = [2,0]
const array4 = [2,16] // [4,16,0]

注释部分是merge left发生后的预期结果。

这是我的尝试

const arrays = [
  [2,0],//  [4,0]
  [2,2],// [4,0]
];

function mergeLeft(array) {
  let startIndex = 0
  let endIndex = 1
  while (endIndex < array.length) {
    if (array[startIndex] === array[endIndex]) {
      array[startIndex] = array[startIndex] + array[endIndex]
      array[endIndex] = 0
      startIndex++
    }
    endIndex++
  }
  return shift(array,'left')
}

function shift(array,dir) {
  if (dir === 'left') {
    for (let i = 0; i < array.length - 1; i++) {
      if (array[i] === 0) {
        [array[i],array[i + 1]] = [array[i + 1],array[i]]
      }
    }
  }
  // omitting when dir === 'right','up','down' etc.
  return array
}

arrays.forEach(a => console.log(mergeLeft(a)));

所以这里的想法是我合并数组，然后将非零项向左移动。

对于这种特殊情况，我当前的解决方案有问题 - 当数组为 [2,2] 时，当预期输出为 [4,0] 时，输出为 [4,0]

我知道我的实现也不优雅。所以我很想看看如何以（更好）的方式实现这一点。

顺便说一下，我在代码审查堆栈交换中发现有一个似乎正在运行的 Python 实现。但是，我并不真正了解 Python 或函数式编程范式。如果有人可以take a look at it看看是否可以将其翻译成 JavaScript，我将不胜感激

解决方法

你可以试试这个。

const arrays = [
  [2,2,0],//  [4,0]
  [2,2],// [4,4,16] // [4,16,0]
];


function shiftLeft(array) {
    op = []
    while(array.length!=0){
        let v1 = array.shift();
        while(v1==0 && array.length>0){
            v1 = array.shift();
        }

        if(array.length==0){
            op.push(v1);
        }else{
            let v2 = array.shift();
            while(v2==0 && array.length>0){
                v2 = array.shift();
            }

            if(v1==v2){
                op.push(v1+v2);
            }else{
                op.push(v1);
                array.unshift(v2);
            }
        }
    }

    while(op.length!=4){
        op.push(0);
    }
  return op
}

arrays.forEach(a => console.log(shiftLeft(a)));

,

我认为递归版本在这里最简单：

const zeroFill = xs => 
  xs .concat ([0,0]) .slice (0,4)

const shift = ([n0,n1,...ns]) =>
  n0 == undefined
    ? []
  : n0 == 0
    ? shift ([n1,...ns])
  : n1 == 0
    ? shift ([n0,...ns])
  : n0 == n1
    ? [n0 + n1,... shift (ns)]
  : [n0,...shift ([n1,... ns])]

const shiftLeft = (ns) => 
  zeroFill (shift (ns))

const arrays = [[2,[2,16],[0,8,0]];

arrays .forEach (
  a => console.log(`${JSON .stringify (a)}: ${JSON .stringify (shiftLeft (a))}`)
)

我们的基本 shift 用 zeroFill 包裹，它向数组添加尾随零，使其长度为四。

主要函数是 shift，它执行一行的左移，但如果我要构建一个完整的 2048，我会将它用于所有移位，只需将方向转换为所需的索引即可。它是这样工作的：

• 如果我们的数组为空，我们返回一个空数组
• 如果第一个值为零，我们忽略它并继续数组的其余部分
• 如果第二个值为零，我们将其删除并使用余数（包括第一个值）重复执行
• 如果前两个值相等，我们将它们合并为第一个点并在余数上重复
• 否则，我们保留第一个值，然后在其他所有值（包括第二个值）上重复执行

尽管我们可以移除包装器，将零填充合并到主函数中，这样，例如在第二种情况下，我们将返回 shift([n1,...ns]) 而不是返回 zeroFill(shift([n1,...ns]))。但这意味着无缘无故地多次调用零填充。

更新

评论要求澄清我将如何使用它来向各个方向移动板。这是我的第一个想法：

// utility functions
const reverse = (xs) => 
  [...xs] .reverse();

const transpose = (xs) => 
  xs [0] .map ((_,i) => xs .map (r => r[i]))

const rotateClockwise = (xs) =>
  transpose (reverse (xs))

const rotateCounter = (xs) => 
  reverse (transpose (xs))

// helper functions
const shift = ([n0,... shift ([n1,... ns])]

const shiftRow = (ns) => 
  shift (ns) .concat ([0,4)

// main functions
const shiftLeft = (xs) => 
  xs .map (shiftRow)

const shiftRight = (xs) => 
  xs .map (x => reverse (shiftRow (reverse (x))))

const shiftUp = (xs) =>
  rotateClockwise (shiftLeft (rotateCounter (board)))  

const shiftDown = (xs) =>
  rotateClockwise (shiftRight (rotateCounter (board)))  

// sample data
const board = [[4,[8,8],4]]

// demo
const display = (title,xss) => console .log (`----------------------\n${title}\n----------------------\n${xss .map (xs => xs .map (x => String(x).padStart (2,' ')) .join(' ')).join('\n')}`)

display ('original',board)
display ('original shifted left',shiftLeft (board))
display ('original shifted right',shiftRight (board))
display ('original shifted up',shiftUp (board))
display ('original shifted down',shiftDown (board))

.as-console-wrapper {max-height: 100% !important; top: 0}

我们从反转数组副本的函数开始，并在主对角线上（西北到东南）转置网格。我们将这两者结合起来以创建顺时针和逆时针旋转网格的函数。然后我们包含上面讨论的函数，稍微重命名，并内联零填充助手。

使用这些，我们现在可以很容易地编写我们的方向移位函数。 shiftLeft 只是在行上映射 shiftRow。 shiftRight 首先反转行，调用 shiftLeft 然后再次反转它们。 shiftUp 和shiftDown 逆时针旋转棋盘，分别调用shiftLeft 和shiftRight，然后顺时针旋转棋盘。

请注意，这些主要函数都不会改变您的数据。每个返回一个新板。这是函数式编程最重要的原则之一：将数据视为不可变的。

这不是一个完整的 2048 系统。它不会向板随机添加新的 2 或 4，也没有任何用户界面的概念。但我认为对于游戏的功能版本来说，它可能是一个相当可靠的核心..

,

这是一个在一个循环中执行合并和移位的函数：

function mergeLeft(array) {
    let startIndex = 0;
    for (let endIndex = 1; endIndex < array.length; endIndex++) {
        if (!array[endIndex]) continue;
        let target = array[startIndex];
        if (!target || target === array[endIndex]) { // shift or merge
            array[startIndex] += array[endIndex];
            array[endIndex] = 0;
        } else if (startIndex + 1 < endIndex) {
            endIndex--; // undo the next for-loop increment
        }
        startIndex += !!target;
    }
    return array;
}

// Your tests:
const arrays = [
  [2,0]
];

for (let array of arrays) console.log(...mergeLeft(array));

说明

for 循环将 endIndex 从 1 增加到 3。此索引代表需要转移和/或合并的潜在价值。

如果该索引指向一个空槽（值为 0），那么它不需要发生任何事情，因此我们continue 进行循环的下一次迭代。

所以现在我们遇到了 endIndex 指的是非零值的情况。有两种情况需要使用该值发生某些事情：

• startIndex 处的值为零：在这种情况下，endIndex 处的值必须移动到 startIndex

• startIndex 处的值等于 endIndex 处的值：在这种情况下，endIndex 处的值也必须移动到 startIndex，但要加上什么已经在那里了。

这些案例非常相似。在第一种情况下，我们甚至可以说 endIndex 处的值被添加到 startIndex 处的值，因为后者为零。所以这两种情况在一个 if 块中处理。

如果我们不是这两种情况中的任何一种，那么我们知道 startIndex 处的值是非零的，并且与 endIndex 处的值不同。在这种情况下，我们应该保持 startIndex 的值不变，然后继续。但是，我们应该在下一次迭代中再次重新考虑这个 endIndex 的值，因为它可能需要静止不动。所以这就是为什么我们这样做 endIndex-- 是为了消除循环的 endIndex++ 将在一瞬间发生。

有一种情况我们确实想要去下一个endIndex：那就是当startIndex变得等于endIndex时：那不应该在这个算法中是允许的。

最后，当 startIndex 最初具有非零值时，它会增加。但是，如果在此迭代开始时为零，则应在循环的下一次迭代中重新考虑。所以我们不加1。 startIndex += !!target 只是另一种方式：

if (target > 0) startIndex++;