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

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

前回

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

4色のブロックを描画する

色の定数

このテトリスでは「」の4種類を使用します。

また、色の値は以下のように定数として用意します。

(main.js)

このように文字列で定義したのは、「context.fillStyle」に代入する際に記述量が減るためです。

bcolorの宣言

ブロックの色は「bcolor」という変数の値(1〜4)によって変動します。

「1〜4」としたのは、「field」に実際に登録するためです。

」は、「」は、「」は、「」はに対応させます。

(main.js)

 

ブロックの色・種類・回転種類をランダムに決定する

ランダム値計算式

ランダム値の計算では「Math.random()」関数を用います。

この関数は「0以上1未満」のランダムな値を小数で返します。

ブロックの種類

ブロックの種類は全部で7種類あるので、「0〜6」までの7つの値がランダムで出て欲しいところです。

しかし、「Math.random()」関数は「0以上1未満」の値がランダムに返されます。

そこで、「Math.random()」で返された値を「7倍」して、さらにその値を切り捨てて整数にします。

それを式にすると以下のようになります。

これで「0〜6」までの値がランダムに返されます。

ブロックの回転

これは「0〜3」の4つの値がランダムで出て欲しいので、以下のように記述します。

ブロックの色

このテトリスでは色によって出現率と得点が変わります。

それぞれの出現率は以下のようになります。

赤色・・・35%

青色・・・30%

緑色・・・20%

黄色・・・15%

このように、「0以上100未満」の値が出て欲しい、かつ確率が異なる場合は以下のように「if」を用いて記述します。

プログラム

先ほど記述したプログラムは少し長いので、関数化します。

initBlock」という関数を作成し、ブロックの「種類・回転・色」を変える場合にこの関数を呼び出します。

(main.js)

 

Next表示を行う

次に出現するブロックが表示されるのがテトリスです。

なのでこのNext表示の機能を追加していきます。

変数の追加

このNext表示は、もう1つのブロックを作るようなものなので、Next表示用ブロックの変数を追加します。

(main.js)

Next表示用ブロックの変数設定

Next表示用ブロックは、文字通り次にブロックがなんなのかを示してくれます。

なので、次に出てくるブロックの変数(btype・brot・bcolor)はそれに一致する必要があります。

(main.js)

 

Next表示の描画

Next表示の描画は矩形の描画、座標設定などを行うだけですので、コピペでOKです。

座標が気に入らない場合は変えてください。

 

次回はスコア・ゲームオーバー処理などを追加し、完成までこぎつけます。

 

次回(最終回)

【Part6】JavaScriptでテトリスを作ろう!【最終回】

コメント