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

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

前回

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

 

フィールドを作成する

初期化関数の作成とフィールド用変数の定義

(main.js)

 

このテトリスにおいて、何もないマスは「0」壁を「9」とし、それ以外の数字をブロックとします。

これを前提とし、「12×22」のフィールドを作成します。

また、「12×22」は変わらない前提となりますので、定数化します。

 

(main.js)

 

フィールドの描画

まず、フィールドを描画していくにあたって、フィールドの左上座標を設定します。

(main.js)

 

フィールドの描画は、先ほど作成した「field」変数の内容を用いて、矩形(マス)を何個も描画していきます。

もし「9」なら色がグレーの矩形を描画して、もし「0」なら描画しない。

ですが、とりあえずは2種類しか無いので、「0」なら描画しないという処理だけを記述します。

この作業を「for」文を用いて行なっていきます。

 

(main.js)

 

「18行目」の「clearRect」関数を実行しているのは、メインループ中に再描画を行うためです。

もし画面クリアをしないと、前のフレームで描画されていた内容が消されずに、どんどん絵の具を塗りつぶしていくのと同じで、画面がめちゃくちゃになってしまいます。

 

フィールドの枠を描画

これだけではマスの感覚がつかめないので、フィールドに枠を描画してあげます。

(main.js)

 

ブロックの描画

ブロックを描画する際に必要な変数は以下の4つとなります。

・btype・・・ブロックの種類(全7種類)の配列番号

・brot・・・ブロックの回転種類(全4種類)の配列番号

・bx・by・・・ブロックのX・Y座標(マス単位)

(main.js)

ここまでで、このような画面が表示されていればOKです!

結構テトリスっぽい感じが出てきたと思います。

 

フィールド更新関数の作成

次に、フィールドの更新を行う関数を作成していきます。

テトリスの場合は、ブロックが落ちてくる様子を描画していくため、先ほど作成したブロックのY座標用の変数「by」を更新していきます。

また、テトリスは流れる様には落ちず、一定の間隔でマス単位の移動を行います。

なので、その間隔を計測するためのカウンタ変数を用意して、30カウントずつ移動するようにプログラムします。

(main.js)

 

ですが、このままだと当たり判定がないため、ブロックは際限なく落ち続けてしまいます。

今回は以上になりますが、次回は当たり判定の作成とともに、キー操作のプログラムも行っていきます。

 

次回

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

コメント