javascript - 俄罗斯方 block 二维数组逻辑

标签 javascript arrays matrix multidimensional-array

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

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

我看不到它,我已经花了两天多的时间试图让俄罗斯方 block 这样简单的游戏工作,从头开始几次..
我需要帮助,我真的很想能够编写游戏,而我唯一能做的就是井字游戏。我花了比我应该更多的时间。

这是完整的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>


请忽略我代码中的小怪癖,我是自学编程的。
提前致谢 :)

最佳答案

旋转

实际旋转的一个问题是,即使考虑到矩阵的宽度,它们中的一些看起来也不会那么好。让我们看看 I 的旋转会发生什么情况。形状:

. X . .        . . . .        . . X .        . . . .
. X . .   =>   X X X X   =>   . . X .   =>   . . . .
. X . .        . . . .        . . X .        X X X X
. X . .        . . . .        . . X .        . . . .

从游戏玩法的 Angular 来看,您会期望第 3 和第 4 形状分别与第 1 和第 2 形状相同。但这不是通用旋转算法会发生的事情。您可以通过使用非方阵 (5x4) 来解决上述问题,但该算法将变得比您最初预期的要复杂。

实际上,我敢打赌,大多数俄罗斯方 block 的实现都不会费心以编程方式进行旋转,而是简单地对四联骨牌的所有不同可能形状进行硬编码,以使旋转看起来尽可能好和“公平”。这样做的好处是您不必再担心它们的大小了。您可以将它们全部存储为 4x4。

正如我们将在此处看到的,这可以以非常紧凑的格式完成。

将 tetromino 编码为位掩码

因为 tetromino 基本上是一组可以打开或关闭的“大像素”,所以将其表示为位掩码而不是整数矩阵是非常合适和有效的。

让我们看看如何编码 S 的两个不同的旋转。形状:
X . . .     1 0 0 0
X X . .  =  1 1 0 0  =  1000110001000000 (in binary)  =  0x8C40 (in hexadecimal)
. X . .     0 1 0 0
. . . .     0 0 0 0

. X X .     0 1 1 0
X X . .  =  1 1 0 0  =  0110110000000000 (in binary)  =  0x6C00 (in hexadecimal)
. . . .     0 0 0 0
. . . .     0 0 0 0

其他两个旋转对于这个是相同的。所以,我们可以完全定义我们的 S形状:
[ 0x8C40, 0x6C00, 0x8C40, 0x6C00 ]

对每个形状和每次旋转都做同样的事情,我们最终会得到类似的结果:
var shape = [
  [ 0x4640, 0x0E40, 0x4C40, 0x4E00 ], // 'T'
  [ 0x8C40, 0x6C00, 0x8C40, 0x6C00 ], // 'S'
  [ 0x4C80, 0xC600, 0x4C80, 0xC600 ], // 'Z'
  [ 0x4444, 0x0F00, 0x4444, 0x0F00 ], // 'I'
  [ 0x44C0, 0x8E00, 0xC880, 0xE200 ], // 'J'
  [ 0x88C0, 0xE800, 0xC440, 0x2E00 ], // 'L'
  [ 0xCC00, 0xCC00, 0xCC00, 0xCC00 ]  // 'O'
];

画他们

现在,我们将如何用这种新格式绘制四联牌?而不是使用 matrix[y][x] 访问矩阵中的值,我们将测试位掩码中的相关位:
for (var y = 0; y < 4; y++) {
  for (var x = 0; x < 4; x++) {
    if (shape[s][r] & (0x8000 >> (y * 4 + x))) {
      ctx.fillRect(x * 20, y * 20, 19, 19);
    }
  }
}

演示

下面是一些使用这种方法的演示代码。

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

var shape = [
  [ 0x4640, 0x0E40, 0x4C40, 0x4E00 ], // 'T'
  [ 0x8C40, 0x6C00, 0x8C40, 0x6C00 ], // 'S'
  [ 0x4C80, 0xC600, 0x4C80, 0xC600 ], // 'Z'
  [ 0x4444, 0x0F00, 0x4444, 0x0F00 ], // 'I'
  [ 0x44C0, 0x8E00, 0xC880, 0xE200 ], // 'J'
  [ 0x88C0, 0xE800, 0xC440, 0x2E00 ], // 'L'
  [ 0xCC00, 0xCC00, 0xCC00, 0xCC00 ]  // 'O'
];

var curShape = 0, curRotation = 0;
draw(curShape, curRotation);

function draw(s, r) {
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, 100, 100);
  ctx.fillStyle = 'black';

  for (var y = 0; y < 4; y++) {
    for (var x = 0; x < 4; x++) {
      if (shape[s][r] & (0x8000 >> (y * 4 + x))) {
        ctx.fillRect(x * 20, y * 20, 19, 19);
      }
    }
  }
}

function next() {
  curShape = (curShape + 1) % 7;
  draw(curShape, curRotation);
}

function rotate() {
  curRotation = (curRotation + 1) % 4;
  draw(curShape, curRotation);
}
<canvas id="c"></canvas>
<button onclick="rotate()">Rotate</button>
<button onclick="next()">Next shape</button>

关于javascript - 俄罗斯方 block 二维数组逻辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38594574/

相关文章:

javascript - 我正在尝试在设置的窗口宽度之间启用/禁用Slick Slider(响应)

javascript - 如果元素有类,则什么都不做,运行匿名函数

javascript - JavaScript库是否可在2D文本数组上进行类似矩阵的转换?

R逐行乘法 - 重新设计?

iOS:是否可以创建 NSObjects 矩阵?

javascript - 在学习 Ajax 之前我需要知道什么?

javascript - 如何在事件绑定(bind)中访问对象方法

c++ - 实现数组初始化器

c - 指向接收不需要的垃圾值的单独函数中的数组的指针

php - 复杂的 Laravel 集合