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

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

前回

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

 

当たり判定を作る

当たり判定の考え方

まず簡単に説明すると、テトリスにおいての当たり判定は、

ブロック移動した時点で、別のブロック・壁と重なったら移動距離分を戻す

ということになります。

これを図で表すとこのようになります。

これは横に移動した場合でも、重なったら戻す、という作業を行います。

当たり判定を作成

それでは、先ほどの考え方を用いて、実際に当たり判定を作っていきます。

(main.js)

ちなみにこの「breakflag」というのはループを抜けるための一時変数です。

「break」では多重ループを一気に抜けることはできません。

なので、最上層のループ内で「break」するためにフラグ変数を作成しました。

キー操作

キーの状態を表す変数

テトリスのキー操作では、

・右・左キー・・・ブロックの横移動

・上・下キー・・・ブロックの回転

・スペースキー・・・スピードアップ

の5つのキーを用います。

なのでこのキーが押されたか、またはそうでないかの状態を表す変数を用意し、

その変数の値によって、キーが押されたかどうかを判定します。

 

(main.js)

 

キーイベントの取得

JavaScriptでは、キーイベントの取得を「addEventListener」関数を用いて行います。

この関数では他にもマウスイベントの取得もできるので、覚えておくと便利です。

(main.js)

「e =>」の部分はラムダ式と呼ばれるもので、他の言語でもよく用いられるので知っておきましょう。(ちなみに言語によって「=>」や「->」のバリエーションがあります。)

 

関数のはじめで「キーコード」と呼ばれるものを取得しています。

このキーコードはもともと各キーに割り当てられている識別番号のことで、これはインターネットで簡単に調べることができます。

 

キー操作を行う

次に、キー操作を行っていきます。

これはキーの状態を判別し、移動や回転を行なっていく作業になります。

(main.js)

 

少し長いですが、流れとしては「移動→当たり判定」「回転→当たり判定」を行なっているだけです。

この当たり判定は、先ほどプログラムしたものと同じものとなります。

 

また、回転処理の際に「0→1→2→3→0→1…」を繰り返すため、「3」より上の数字になったら「0」に戻す「0」より下の数字になったら「3」に戻すといった処理を行います。

 

今回は以上となります。

次回からブロックを積んでいく処理を作成していきます。

 

次回

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

コメント