JavaScriptで作るテトリスアプリ④テトロミノが一番下に着いた時の処理

JavaScriptで作るテトリスアプリ④テトロミノが一番下に着いた時の処理
               

この記事は2022年12月4日から7 回閲覧されました

みなさんこんにちは、WEB制作のエンジニアのjonioです。

今回はテトロミノが一番下に行った時に動かなくなって次のテトロミノが登場する所までのアウトプットです。

それではアウトプットの開始です。

 

 

一定時間ごとにテトロミノが動く

テトロミノが一定時間ごとに下に動いていくようにしますがコードを↓にします。

一定の間隔で下に動かす関数を作動するのを110行目で行なっています。

下に動かす関数は106行目〜109行目です。

下に動かすのはキーボードの↓を押した時と同じなので「if(checkMove(0,1)) tetro_y ++;」です。

108行目ですがこれでフィールドとテトロミノを描画します。

次はテトロミノが一番下まで動いた時に動かなくなって次のテトロミノが現れる処理です。

 

 

テトロミノが一番下まで動いた時の処理

コードを↓にします。

84行目ですがifの条件の「field[ny][nx]」を条件の最後に移動します。

条件の最初にあると110行目から「field[ny][nx]」と「ny >= FIELD_ROW」がぶつかってエラーになります。

123行目ですが「下に動くことができなかったら」という意味で124行目の内容は106行目〜114行目です。

109行目〜111行目ですがテトロミノがあったら表示された(赤いブロックの)状態になるという意味でこれと84行目のif文の条件式があるのでフィールドの一番下に着いたらそこから動かすことができなくなります。

125行目・126行目は「field[tetro_y + y][tetro_x + x] = 1」を「field[y][x] = 1」にすることで一番最初のテトロミノが出てくるようにします。

これで現在のテトロミノがフィールドの一番下に来たら次のテトロミノが現れるようになりました。

次は他のテトロミノの作成です。