HTML + JavaScriptでブロック落ち物パズルゲームを作ろう #02

## 2. テトロミノ表示

次はゲームに使用するポリオミノの表示。

今回は、ポリオミノの中で一番種類数等のバランスが良いテトロ(4)ミノで実施。

※後々の回転を考えたときの、それぞれのポリオミノの種類は

モノ(1)ミノ:1種,ド(2)ミノ:1種,トリオ(3)ミノ:2種,テトロ(4)ミノ:7種,ペントミノ(5):18種

トリオ(3)までだと少なすぎ、ペント(5)だと一気に多くなる

### 今回のゴール

テトロミノを表示できるようになる

### 表示するミノを定義

### ミノを表示

配列に対するループはforEachとfor(aa of xx)も存在する

ざっくりの特徴としては

+ for：break,continueが可能。配列の要素参照に限らず、好きな単位でループできる

+ forEach：配列専用。CB関数を登録して使用する形のため、慣れるまで取っつきにくい

　CB関数で処理する都合上、breakはできない。ただ同じ処理内容を別のループにも使いまわせる

+ for..of：indexが取れない。要素のコピーにアクセスする形になるにため、ほぼ参照専用

基本は普通のfor文で十分・

ただJavaScriptは自由過ぎるので配列を連続で定義しなくても良いらしく

そういう場合はfor文では綺麗に回せないためforEach/for..ofを使用した方が楽

今回はindexが欲しい + for..ofの方はindexが取れないので、仮にforEachで書き直すと↓みたいな感じ

これで#02はゴール。お疲れ様でした。

余裕がある人はforEachへの置き換えや、minoInfoの中身を書き換えて別の形を表示してみると理解が深まるかも