4
私はスプライトではなく行列でテトリスをJSに書き込もうとしています。 基本的には、2次元配列を視覚化する方がよいでしょう。テトリス2次元配列ロジック
ブロックを回転させるには、行列データを転置してから行を反転させます。 ブロックの幅と高さがこの4x4行列を完全に埋めるわけではないので、ブロック内の回転結果は、代わりに回転する代わりに移動します。
私はそれを見ることができません、私はすでにテトリスのような単純なゲームを得るために2日以上を過ごしました。何度か最初から再開します。 私は本当にしたいですゲームをプログラムすることができて、私が働いていたのはチックタックでした。私はそれよりも多くの時間を費やしました。
ここには完全なjsコードがあります。キャンバスをクリックすると、その部分が回転します。
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>私のコードに少し癖を無視してください、私は自分でプログラミングを学びました。 ありがとうございます。
正確にどのような** **は動作しませんか？ – zero298
なぜ4x4の代わりに3x3の行列を使用しないのですか？ – Vanojx1
@ Vanojx1 Tetrixの一部はおそらく4つのセルを長さ/幅にすることができます。 – zero298