スポンサーリンク
スポンサーリンク

【Part4】JavaScriptでテトリスを作ろう!

前回

【Part3】JavaScriptでテトリスを作ろう!

ブロックを積み上げる

ブロックをフィールドに登録する

今、ブロックが壁・ブロックに着地した段階までできました。

しかしこの状態だと、「field」変数にはまだ何も変化を加えていないので、実質「field」にブロックは無いということになります。

なのでブロックが落下した時点で、その場所に「1」を代入し、「field」にブロックを登録します。

(main.js)

 

ポイント

落下している最中のブロックは、まだフィールドにはなにも影響を及ぼしていません。

これはあくまでも、ただ描画しているだけに過ぎません。

着地したと判定できるタイミングでフィールドの要素にします。

新たなブロックを作成する

フィールドにブロックを登録した後は、また新たなブロックを作成します。

これには特別な作業は必要なく、単にブロックの座標やフラグを変更するだけで済みます。

(main.js)

 

先ほども説明した通り、ブロックはただ描画されているだけなので、描画に必要な情報をいじるだけでOKです。

ブロック行の削除

削除できる行の検索

次に、ブロックを登録したのちに、削除できる行を検索します。

テトリスにおいては1行にブロックが全て埋まっていたら削除されます。

それを「for」文を使って表現していきます。

(main.js)

 

仕組み

上の画像のように、薄い水色で表された部分が削除判定にかかる領域になり、この中の1つ1つの行を判定していきます。(1つでも空白があったらループを抜けるという処理)

そして、ブロックで埋まった行であると判定されたら、「delflag」の「num(ブロックで埋まった行の行番号)」番目の配列要素に「true」を代入し、フラグをオンにします。

 

次に、「delflag」がたった行を全て空白にする作業を行います。

これも「for」文で行い、「delflag」が「true」になった行だけを処理していきます。

 

周りのブロックを削除した分だけ落下させる

次に、削除した後の処理を記述していきます。

削除した後は、その行が丸々空白になるため、それ以上にあるブロックは落下していきます。

この落下する処理はブロックが落下する速度と同じ速度で表現していきます。

(main.js)

 

仕組み

こちらの図を見てください。

それぞれの意味

水色の領域・・・空白行

num・・・プログラムにおいて、下から検索して一番最初の空白行の行番号

・・・上の行の内容をまるまるコピー(壁は含まない)

オレンジ色の領域・・・1行目は必ず空白になるため、落下処理の際には空白にする。

 

このようにして、上の行を下の行に写す→それでも空白行の上にブロックが存在するならまた落下処理をする、といった風に処理は行われていきます。

 

今回は以上となります。

次回からブロックの色の種類を追加していきます。

 

次回

【Part5】JavaScriptでテトリスを作ろう!

コメント