javascript - 俄罗斯方块2D阵列逻辑

我试图用矩阵而不是 Sprite 在JS中编写俄罗斯方块。
基本上是要更好地可视化二维数组。

我通过转置块的矩阵数据然后反转行来旋转块。
但是因为块的宽度和高度没有完全填满这个4x4矩阵
旋转导致块移动，而不是原地旋转。

我看不到它，我已经花了超过两天的时间尝试让tetris这样简单的游戏正常工作，从头开始重新启动了几次。
我需要帮助，我真的很想能够编写游戏程序，而我唯一能做的就是打井字游戏。我花了比我更多的时间。

这是完整的js代码。单击 Canvas 将旋转作品。

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 600;

// game object
var G = {};
var current = 0;
var x = 0;
var y = 0;

//GRID
G.grid = [];
G.gridColumns = 10;
G.gridRows = 15;
for (var i = 0; i < G.gridColumns; i++) {
  G.grid[i] = [];
  for (var j = 0; j < G.gridRows; j++) {
    G.grid[i][j] = 0;
  }
}

// Array with all different blocks
G.blocks = [];
//block constructor
function block() {};
G.blocks[0] = new block();
G.blocks[0].matrix = [
  [1, 0, 0, 0],
  [1, 1, 0, 0],
  [0, 1, 0, 0],
  [0, 0, 0, 0]
];
G.blocks[0].width = 2;
G.blocks[0].height = 3;

function transpose(m) {
  // dont understand this completely, but works because j<i
  for (var i = 0; i < m.matrix.length; i++) {
    for (var j = 0; j < i; j++) {
      var temp = m.matrix[i][j];
      m.matrix[i][j] = m.matrix[j][i];
      m.matrix[j][i] = temp;
    }
  }
}

function reverseRows(m) {
  for (var i = 0; i < m.matrix.length; i++) {
    m.matrix[i].reverse();
  }
}

function rotate(m) {
  transpose(m);
  reverseRows(m);
}

function add(m1, m2) {
  for (var i = 0; i < m1.matrix.length; i++) {
    for (var j = 0; j < m1.matrix[i].length; j++) {
      m2[i + x][j + y] = m1.matrix[i][j];
    }
  }
}

function draw(matrix) {
  for (var i = 0; i < matrix.length; i++) {
    for (var j = 0; j < matrix[i].length; j++) {
      if (matrix[i][j] === 1) {
        ctx.fillRect(j * 20, i * 20, 19, 19);
      }
    }
  }
  ctx.strokeRect(0, 0, G.gridColumns * 20, G.gridRows * 20);
}


window.addEventListener("click", function(e) {
  rotate(G.blocks[current]);
});

function tick() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  add(G.blocks[current], G.grid);
  draw(G.grid);
}
setInterval(tick, 1000 / 30);

<canvas id="c"></canvas>

请忽略我代码中的一些小问题，因为我是自己学习编程的。
提前致谢 :)

最佳答案

我认为您的问题是，您始终假设自己的作品宽4格。您可能需要将矩阵收缩包装到仍然是正方形的最小空间。对于您的Z/S块，它将为3x3。这样，您旋转的中心便会正确运行。

现在的问题是旋转可以正常工作，但是积木的中心在单元格(2，2)而不是(1，1)(假设基数为0)。 C是围绕其应用旋转的引用框架。

[x][ ][ ][ ][ ]      [ ][ ][X][X][ ]
[X][X][ ][ ][ ]      [ ][X][X][ ][ ]
[ ][X][C][ ][ ]  =>  [ ][ ][C][ ][ ]
[ ][ ][ ][ ][ ]      [ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ]      [ ][ ][ ][ ][ ]

如果可以收缩包裹形状，则可以应用旋转并实现以下功能:

[x][ ][ ]      [ ][X][X]
[X][C][ ]  =>  [X][C][ ]
[ ][X][ ]      [ ][ ][ ]

关于javascript - 俄罗斯方块2D阵列逻辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38594574/