3. テトリスのステージ！ゲーム盤面（グリッド）を作ろう

前回はテトリミノの形をデータで作る方法を学んだわね。今回は、そのテトリミノたちが落ちてきて、積み重なっていく「ステージ」、つまりゲームの盤面（グリッドとも言うわ）をどうやってプログラムで作るのか、そして画面に表示するのかを見ていきましょう！

ゲーム盤面もデータで作るの？

そうなの！テトリミノと同じように、ゲーム盤面もプログラムの中ではデータとして表現するのよ。ここでも「2次元配列」が大活躍するわ。

テトリスの盤面は、だいたい横10マス、縦20マスくらいが一般的よね。このマス目一つ一つが、配列の要素に対応するの。 例えば、横10マス、縦20マスの盤面なら、こんな感じの2次元配列をイメージしてみて。

// ゲーム盤面のデータのイメージ (最初は全部空っぽ)
// grid[行][列] のようにアクセスするわ
let gameBoard = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 0行目 (一番上)
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // 1行目
  // ... これが20行分続くの ...
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]  // 19行目 (一番下)
];
        

最初は、盤面のすべてのマスには何もないから、0 を入れておくの。そして、テトリミノが底に着いたり、他のブロックの上に積まれたりして固定されたら、そのブロックがあるマスの値を、ブロックの色を示す数字（例えば、赤色なら1、青色なら2とか）に変えていくのよ。

盤面のサイズとブロックのサイズ

画面に盤面を描くには、まずCanvasの大きさと、盤面のマス数を決める必要があるわ。 例えば、Canvasの幅が200ピクセルで、盤面の横のマス数が10マスだとしたら、1つのブロック（マス）の横幅は何ピクセルになるかしら？

そうね、Canvasの幅 ÷ 横のマス数 で計算できるわ。つまり、200ピクセル ÷ 10マス = 20ピクセル ね。この1マスの大きさを「ブロックスサイズ」と呼ぶことにしましょう。

const CANVAS_WIDTH = 200; // Canvasの幅
const GRID_COLS = 10;     // 盤面の横のマス数 (列数)
const BLOCK_SIZE = CANVAS_WIDTH / GRID_COLS; // 1ブロックのピクセルサイズ

// GRID_ROWS (盤面の縦のマス数) も同様に決めるわ
const GRID_ROWS = 20;
const CANVAS_HEIGHT = BLOCK_SIZE * GRID_ROWS; // Canvasの高さも決まるわね
        

こうやって決めたサイズでCanvasを用意して、盤面を描いていくの。

盤面をCanvasに描いてみよう！

それじゃあ、実際にゲーム盤面をCanvasに描いてみましょう。まずは、空っぽの盤面を描いて、そのあとで試しにいくつかのマスにブロックを置いた状態を描いてみるわね。

盤面を描くには、こんな手順で考えるの。

1. まず、Canvas全体を特定の色（例えば薄い灰色）で塗りつぶすか、クリアする。
2. ゲーム盤面のデータ（あの2次元配列ね）を、一行ずつ、一マスずつ見ていく。
3. もし、マスにブロックを示す数字（0以外）が入っていたら、そのマスの位置に、対応する色の四角形を描く。
4. （おまけ）マス目の区切りとして格子線を描くと、もっと盤面らしく見えるわよ！

上のCanvasに、ゲーム盤面が表示されているかしら？最初は空っぽでも、入力欄で指定した位置に「ブロックを置く」ボタンでブロック（色のついた四角）を描けるはずよ。 これが、テトリスのブロックが積み重なっていくステージの基本になるの！