2. テトリミノの形をデータで作ろう

前回はCanvasに四角形を描く方法を学んだわね。今回は、テトリスの主役である「テトリミノ」（あの7種類のブロックのことよ！）を、プログラムの中でどうやって表現するのかを見ていきましょう。

テトリミノの形をどうやって表す？

テトリミノは、いくつかの正方形がくっついてできているわよね。この形をプログラムで扱うには、「2次元配列（にじげんはいれつ）」というものを使うのが便利なの。 ピンとこないかもしれないけど、方眼紙にブロックの形を書き込むのをイメージしてみて。

例えば、T字型のテトリミノ（Tミノ）は、こんな風なマス目で考えられるわ。

□■□
■■■
□□□
        

このマス目の、ブロックがある部分を 1、ない部分を 0 で表すと、こんな感じの数字の並びになるの。

// Tミノの形のデータ例
[
  [0, 1, 0],  // 1行目
  [1, 1, 1],  // 2行目
  // ブロックがない下の行は省略してもOK
]
        

これが2次元配列よ。配列の中に、さらに配列が入っている構造ね。この数字の並びを見れば、プログラムでもTミノの形がわかるようになるの！

テトリスの全7種類のミノたち

テトリスに出てくる7種類のミノ、それぞれの形と色をデータとして先生が用意してみたわ。 まずは形から見てみましょう。SHAPES_DATA という名前で、こんな感じのデータになっているの。

// ミノの形のデータ (2次元配列)
const SHAPES_DATA = [
  [[1,1,1,1]],          // Iミノ (水色)
  [[1,1],[1,1]],        // Oミノ (黄色)
  [[0,1,0],[1,1,1]],    // Tミノ (紫色)
  [[0,1,1],[1,1,0]],    // Sミノ (緑色)
  [[1,1,0],[0,1,1]],    // Zミノ (赤色)
  [[1,0,0],[1,1,1]],    // Lミノ (オレンジ色)
  [[0,0,1],[1,1,1]]     // Jミノ (青色)
];
        

そして、それぞれのミノには、見分けやすいように色も決めておきましょう。TETROMINO_COLORS という名前で、こんな風に色の情報を用意したわ。 順番は、さっきの SHAPES_DATA の形と対応しているのよ。

// ミノの色のデータ
const TETROMINO_COLORS = [
  '#00FFFF', // Iミノ (Cyan/水色)
  '#FFFF00', // Oミノ (Yellow/黄色)
  '#800080', // Tミノ (Purple/紫色)
  '#00FF00', // Sミノ (Green/緑色)
  '#FF0000', // Zミノ (Red/赤色)
  '#FFA500', // Lミノ (Orange/オレンジ色)
  '#0000FF'  // Jミノ (Blue/青色)
];
        

だから、例えば SHAPES_DATA[0] はIミノの形で、TETROMINO_COLORS[0] の水色がその色、という風に対応しているの。分かりやすいように、それぞれのミノの名前も TETROMINO_NAMES として用意しておくわね。

// ミノの名前のデータ
const TETROMINO_NAMES = ['I', 'O', 'T', 'S', 'Z', 'L', 'J'];
        

ミノの形と色を実際に見てみよう！

ランダムにテトリミノを選んで表示する

ゲームでは、次に出てくるミノはランダムに選ばれるわよね。これはJavaScriptの Math.random() を使うとできるの。 Math.random() は0以上1未満の数をランダムに返すから、これに SHAPES_DATA の数（7種類なら7）を掛けて、Math.floor() で小数点以下を切り捨てれば、0から6までのランダムな数字が手に入るわ。

// 0からSHAPES_DATAの要素数-1までのランダムな整数を得る
const randomIndex = Math.floor(Math.random() * SHAPES_DATA.length);

// ランダムに選ばれたミノの形と色
const randomShape = SHAPES_DATA[randomIndex];
const randomColor = TETROMINO_COLORS[randomIndex];

// これで、新しいミノをランダムに選べたわ！
        

この仕組みを使えば、新しいミノをランダムに選んでゲームに登場させることができるわね！

選ばれたミノをCanvasに描いてみよう！

さあ、ここまでの知識を組み合わせて、ランダムに選ばれたテトリミノをCanvasに描画してみましょう！ 2次元配列の 1 の部分だけを、前回学んだ fillRect() を使って塗りつぶせば、ミノの形が見えてくるはずよ。

どうかしら？ボタンを押すたびに違う形のミノ（と色）が表示されたら成功よ！ これで、ゲームの基本的な部品であるテトリミノをデータとして扱い、画面に出す準備ができたわね。