为什么俄罗斯方块会一次全部掉落而不是一次掉落？答案

【问题标题】：Why does a tetris piece fall all at once instead of one at a time?为什么俄罗斯方块会一次全部掉落而不是一次掉落？
【发布时间】：2020-02-26 19:40:27
【问题描述】：

我正在用 JS 制作俄罗斯方块。当方块下落时，它会在一次绘制中使方块到达屏幕底部，而不是慢慢接近底部。我尝试创建一个变量来存储要进行的更改，以便它只查看当前板，但没有运气。在检查了输出变量是否为== 到board 之后，board 似乎在发生变化，因为它返回true。怎么回事？

编辑：我已成功制作了数组的浅表副本。不过，它仍然立即跌至谷底。这是怎么回事？

var data = [];
          function array(x, text) {
              var y = [];
              for (var i = 0; i < x-1; i++) {y.push(text);}
              return y;
          }          
for (var i=0; i<20; i++){data.push(array(10, "b"));}
function draw(){
    var j;
    var i;
    var dataOut = [...data];
    for (i = 0; i < data.length - 1; i++){
        for (j = 0; j < data[i].length; j++){
            if (data[i][j] == "a" && data[i + 1][j] == "b" && i < data.length - 1) {
                
                dataOut[i][j] = "b";
                dataOut[i + 1][j] = "a";
               
            }
        }
    }
    data = dataOut;
}
data[0][4] = 'a';
draw();
console.log(data);

【问题讨论】：

每次循环遍历一行时，都会将a 推送到下面的行。然后，在下一行，你又遇到了a，所以你把它推到下面。然后，在那下一行，你又遇到了……它掉到了底部
@blex 阅读问题。看起来应该是这样，但是我将它放在一个单独的阵列上，并在循环结束后将主板设置为辅助阵列，因此在实际更改之前应该注意要更改的内容。
你的逻辑在我看来不错。问题是所有这些代码都将同步运行——它将在一个动画帧的空间中运行，所以除了最终产品之外你永远看不到任何东西。在我看来，您需要使用 setTimeout() 或类似的基于 css 或基于 JavaScript（和异步）的动画，或者更好但更复杂的 requestAnimationFrame()。
@JSScratchDouble 在 JS 中，数组和对象是通过引用而不是值传递的。所以当你这样做时：var dataOut = data;，它们是同一个数组。使用任一参考修改它都会得到相同的结果
@avocadatoria 我正在使用requestAnimationFrame。在这种情况下它应该只运行一次！

标签： javascript arrays loops deep-copy tetris

【解决方案1】：

在 JavaScript 中，数组和对象是通过引用传递的。所以当你这样做时：

var dataOut = data;

这两个引用都指向同一个数组。您可以每次都克隆数组：

var dataOut = JSON.parse(JSON.stringify(data));

或者简单地恢复你的循环，从底部到顶部。我冒昧地重命名了变量以使这一点更清楚。在下面试试：

var chars = {empty: '.', block: '#'},
    grid = createEmptyGrid(10, 20);

function createEmptyGrid(width, height) {
  var result = [], x, y;
  for (y = 0; y < height; y++) {
    var row = [];
    for (x = 0; x < width; x++) {
      row.push(chars.empty);
    }
    result.push(row);
  }
  return result;
}

function draw() {
  var x, y;
  for (y = grid.length - 1; y > 0; y--) {
    for (x = 0; x < grid[y].length; x++) {
      if (grid[y][x] === chars.empty && grid[y - 1][x] === chars.block) {
        grid[y][x] = chars.block;
        grid[y - 1][x] = chars.empty;
      }
    }
  }
}

// Just for the demo
var t = 0, loop = setInterval(function () {
  draw();
  if (grid[0].includes(chars.block)) {
    clearInterval(loop);
    grid[9] = 'GAME OVER!'.split('');
  }
  document.body.innerHTML = '<pre style="font-size:.6em">'
                          +   grid.map(row => row.join(' ')).join('\n')
                          + '</pre>';
  if (t % 20 === 0) {
    grid[0][Math.floor(Math.random() * 10)] = chars.block;
  }
  t++;
}, 20);

【讨论】：