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

記事
IT・テクノロジー

## 04.テトロミノ移動(残像なし)

### 今回のゴール

テトロミノを移動した際の残像が消えて綺麗に移動しているように見える
04_goal.JPG
04_html_1.jpg

### 描画内容のリセット

残像=前に描画した図形が描画されたままになっている状態であるため、
新しい図形を描画する前に、一度キャンバスをクリアしてしまえば残像は残らなくなる。
キャンバスのクリアは↓で実施可能
04_html_2.jpg
これをミノの描画(drawMino)の前に実施すれば良いため、一連の処理を関数化して、drawMinoをコールしていた箇所を呼び替える
04_html_3.jpg
↓も忘れずに
04_html_4.jpg

これで#04はゴール。お疲れ様でした。
今回はほぼ発想だけの話だったので内容としては短め。
綺麗に動くようになったことで一気にそれっぽい見た目にはなって来たはず。
そして、綺麗になったことで気づきやすくなった不備も見えてくるので次回以降でそこに対応します。

ただ、次回は機能の関わる修正ではなく、内部的な修正だけになります。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す