テトリスピースとグリッドの配列の使用。なぜこの作品は完全に見えないのですか？

Question

コードは次のとおりです。以下はjsfiddleへのリンクです。

ブロックの最初の行が何らかの理由で描画されていないため、これらの2次元のループはすべて私の頭を包むのが難しく、ブロックが2行目と完了しません。

add_block関数は、任意のブロックから配列データを読み込み、my x座標とy座標があるグリッドに配置することになっています。

もしブロックを回転させる方法を知っている人がいればそれも涼しいでしょう。何か+90度を回すためには転置してから各行を読み返す必要がありますが、試してみる。

私は説明がうまくいかないと知っていますが、あなたの質問には必ず答えます。 ありがとうございます！私は本当に、配列とループ用の二重線がどうやって相互にやりとりをするのかを完全に把握したいと思っています。

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

var grid_columns = 10; 
var grid_rows = 15; 
var grid_cell_size = 10; 

var grid = []; 
function create_empty_grid(){ 
    for(var i=0;i<grid_columns;i++){ 
     grid[i] = []; 
     for(var j=0;j<grid_rows;j++){ 
      grid[i][j] = 0; 
     } 
    } 
    // END DOUBLE FOR LOOPS 
} 
function clear_grid(){ 
    for(var i=0;i<grid_columns;i++){ 
     for(var j=0;j<grid_rows;j++){ 
      grid[i][j] = 0; 
     } 
    } 
    // END DOUBLE FOR LOOPS 
} 

var x = 0; 
var y = 0; 
var w = 2; 
var h = 3; 

var block = []; 
block[0] = [ 
    [1,0,0,0], 
    [1,1,0,0], 
    [0,1,0,0], 
    [0,0,0,0] 
]; 
function add_block(num){ 
    var b = block[num]; 
    for(var i=0;i<w;i++){ 
     for(var j=0;j<h;j++){ 

      if(i >= x && j >= y && i <= w && j <= h){ 
       grid[i][j] = b[i][j]; 
      } 
     } 
    } 
    // END DOUBLE FOR LOOPS 
} 

function draw(){ 
    for(var i=0;i<grid_columns;i++){ 
     for(var j=0;j<grid_rows;j++){ 
      ctx.fillStyle = "black"; 
      if(grid[i][j] === 1){ 
       ctx.fillStyle = "red"; 
      }else if(grid[i][j] === 0){ 
       ctx.fillStyle = "green"; 
      } 
      ctx.fillRect(i*grid_cell_size,j*grid_cell_size,grid_cell_size-1,grid_cell_size-1); 
     } 
    } 
    // END DOUBLE FOR LOOP 
} 
function update(){ 

} 
function tick(){ 
    clearRect(0,0,canvas.width,canvas.height); 
    clear_grid(); 
    draw(); 
    update(); 
} 

create_empty_grid(); 
add_block(0); 
draw(); 

View in jsfiddle

Answer 1

あなたが "ブロック" の座標を表すためにiとjを使用して、そして xとyているように、 "グリッド" の座標を表しているようです。だから私は、この条件が間違っていると思う：

if(i >= x && j >= y && i <= w && j <= h){ 
       grid[i][j] = b[i][j]; 
      } 

私はあなたが本当にここに必要なすべてのようなものでif文を交換することであると思う：

grid[i+x][j+y] = b[i][j]; 

しかし@Arnauldが指摘したように、もありますi、jが "行、列"または "列、行"を示すかどうかについての混乱のビットであり、使用法が配列の初期化の方法とは逆のように見えます。あなたが使用している他の言葉では、：

grid[row][column]とb[row][column]

いますが、アレイのレイアウト方法は、それはあなたがする必要があります

grid[column][row]とb[column][row]

にする必要がありますコードをあなたが望むようにするためにここやそこを少し調整してください。

Answer 2

"b"の配列は何らかの理由で逆さになりました。grid[j+x][i+y] = b[j][i]をgrid[j+x][i+y] = b[i][j]に変更しましたが、完全なブロックが表示されますが、今後もこれらの問題を回避することはできません。 配列は私にはとても混乱しています。

私はそれが最終的に私は推測するが、一日は行く必要があります。