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

## 3. テトロミノ移動(残像あり)

### 今回のゴール

テトロミノの位置を移動できるようになる。

### ミノの位置を保持

これだけだと、まだ位置を参照していないため、何も変化は起きない

### ミノの位置を参照してミノを表示

ブロックの描画位置を決める際に、保持しているミノの位置(座標)を参照するように変更する。

これにより、ミノが表示される位置を変えられるようになったため、一度この段階で実行すると、

表示位置が変わっていることが確認できる。

※余裕がある場合は、posX,posYの値を色々変えて遊んでみると理解が深まるかも

### キーボード押下の検知

今回はページ上にボタンを配置するのではなく、キーボード上の矢印を押すことで移動するようにする

これでページ上で矢印キーを押すと、ミノの位置を変えられるようになった。

ただ、それは内部的な話で、この段階のコードを実行しても見た目は何も変わらない。

### ミノの再描画

実はこれまでの段階ではページ読み込み時にミノの描画処理を動かしているだけで、その後の再描画が行われない。

そのため、ミノの位置を移動したあとにも描画処理を動かすようにする。

このとき、元々書いていた描画用の処理をコピペすることでも対応はできるが、同じ処理をコピペして乱立させるのはデメリットしか無いため、描画用の処理を関数化して対応する。

ミノ移動後にも描画できるように関数コールを追加

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

今回は残像が残ったままになっているため、見た目がすごいことになる。

余裕がある人は残像が残る理由について考えて(予想)してみると理解が深まるかも

※ここで直ぐに残像が残って当たり前だと思えている人はプログラムの内容をしっかり理解できてる証拠