1

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

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

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

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

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

这是我的尝试

const arrays = [
  [2, 2, 2, 0], //  [4,2,0,0]
  [2, 2, 2, 2], // [4,4,0,0]
  [2, 0, 0, 2], // [4,0,0,0]
  [2, 2, 4, 16] // [4,4,16,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, 2, 2]，输出是[4,2,2,0]预期输出时[4,4,0,0]

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

顺便说一句，我在代码审查堆栈交换中发现了一个似乎正在工作的 python 实现。但是，我并不真正了解 Python，也不了解函数式编程范式。如果有人可以看看它，看看它是否可以翻译成 JavaScript，我将不胜感激

4

3 回答 3

0

你可以试试这个。

const arrays = [
  [2, 2, 2, 0], //  [4,2,0,0]
  [2, 2, 2, 2], // [4,4,0,0]
  [2, 0, 0, 2], // [4,0,0,0]
  [2, 2, 4, 16] // [4,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)));

于 2021-02-15T04:02:36.570 回答
0

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

const zeroFill = xs => 
  xs .concat ([0, 0, 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, 2, 0], [2, 2, 2, 2], [2, 0, 0, 2], [2, 2, 4, 16], [0, 8, 2, 2], [0, 0, 0, 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, 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 shiftRow = (ns) => 
  shift (ns) .concat ([0, 0, 0, 0]) .slice (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, 0, 2, 0], [8, 0, 8, 8], [2, 2, 4, 8], [0, 0, 4, 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上映射。首先反转行，调用然后再次反转它们。 和逆时针旋转棋盘分别调用和，然后顺时针旋转棋盘。shiftRowshiftRightshiftLeftshiftUpshiftDownshiftLeftshiftRight

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

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

于 2021-02-15T16:09:55.833 回答
0

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

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, 2, 2, 0], // [4,2,0,0]
  [2, 2, 2, 2], // [4,4,0,0]
  [2, 0, 0, 2], // [4,0,0,0]
  [2, 2, 4, 16] // [4,4,16,0]
];

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

解释

for循环将包含的从endIndex1 增加到 3。该索引表示需要移动和/或合并的潜在值。

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

所以现在我们在 whereendIndex指的是一个非零值的情况下。在两种情况下，该值需要发生一些事情：

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

  • at 的值startIndex等于 atendIndex的值：在这种情况下，at 的值endIndex也必须移动到startIndex，但添加已经存在的值。

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

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

在一种情况下，我们确实想进入下一个endIndex：即何时startIndex变得等于endIndex：在该算法中绝不应该允许这种情况。

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

if (target > 0) startIndex++;
于 2021-02-15T16:44:32.323 回答