我正在尝试使用矩阵而不是 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 来看,您会期望第 3rd 和第 4th 形状与第 1st 和 2 相同>nd 分别是。但这不是通用旋转算法会发生的事情。您可能会使用非方阵 (5x4) 来解决上述问题,但算法会变得比您最初预期的更复杂。
实际上,我敢打赌,大多数俄罗斯方 block 实现都不会费心以编程方式进行旋转,而是简单地对四联骨牌的所有不同可能形状进行硬编码,从而使旋转看起来既好又“公平”尽可能。这样做的好处是您不必再担心它们的大小。您可以将它们全部存储为 4x4。
正如我们将在此处看到的,这可以以非常紧凑的格式完成。
将四联骨牌编码为位掩码
因为四联骨牌基本上是一组可以开启或关闭的“大像素”,将其表示为位掩码非常合适且有效而不是整数矩阵。
让我们看看如何对 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/