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

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

前回

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

スピードアップ機能

SPACEキーでスピードアップ

「update」関数内の「30カウントずつ」という「if」文に新たな条件文を付け加えます。

(main.js)

 

徐々にスピードアップ(難易度アップ)

スピードを管理するための「spd」という変数を作り、「spdカウント」ずつ落下させる、処理をします。

例えば、「spd」の値が「20」なら、「20カウントずつの落下」になります。

この「spd」の値が小さくなることでスピードがアップしていきます。

ただ、際限なく小さくなるとゲーム性が崩壊するので、「8」未満にはならないようにします。

(main.js)

 

キー操作が可能になる段階

現状だとキー操作はいついかなる時も可能です。

しかし、それだと場外へどこまでも行くことができてしまいます。(ブロック誕生の瞬間に右・左キーを連打で場外へ可能)

なので、フィールド内に入ってからキー操作が可能なようにします。

(main.js)

 

スコア・ゲームオーバー処理

スコア処理

スコア処理は、「score」という変数を用意し、削除されたブロックの色・数によって得点を追加していきます。

(main.js)

ゲームオーバー処理

ゲームオーバー処理は「0行目にブロックが登録されたら」という条件で判定します。

薄い水色で示された部分が「0行目」です。

ここにブロックが登録されるということは、次のブロックが落下した時点で完全に溢れてしまうことを意味します。

なので、その時点でゲームオーバーとします。

(main.js)

スコア・操作方法などの表示

上の画像のようなイメージで、スコアや操作方法、削除した色の個数を表示します。

この際、削除した色は「delnum」という配列変数を用いてその個数の値を管理します。

「delnum」の作成と個数追加

(main.js)

スコア・操作方法などの表示

表示は座標・色・フォント設定、そして描画関数を使っていくだけの作業ですので、コピペでOKです。

(main.js)

 

タイトル画面の作成

最後にタイトル画面の作成と切り替え処理を作成します。

「scene」変数の作成

このテトリスでは「タイトル画面」と「ゲームプレイ画面」の2つの画面が存在します。

その画面の状態を「scene」という変数を用いて管理します。

(main.js)

 

さて、ここで「init」関数を作成した意味が出てきました。(上記38行目

もし「init」関数を作成せず、変数宣言の段階で値を代入していただけだと、このタイミングでまた変数代入を全部行う必要が出てきてしまいます。

そうなるとスパゲティプログラム化まったなしです!

タイトルの中身

では、タイトル画面の中身を作成していきましょう。

理想は以下の画像です。

非常な簡素な作りですが、ポイントは「最高スコア」。

タイトル画面を作成した後はこの最高スコア処理を作成して完成にこぎつけます。

 

(main.js)

 

ベストスコア処理

最後にベストスコア処理を作成します。

(main.js)

 

ベストスコアの更新は「?・:文(3項演算文)」を使います。

式の内容な以下の通りです。

 

この3項演算式を利用し、「scorebestscoreより高いならそのscoreを代入」し、「そうでなければ今までのbestscoreを代入」するという式を記述します。

 

おわりに!

さて、これでテトリスは完成しました!

ここまでお疲れ様でした。

これでJavaScriptの腕前も相当上がったのではないでしょうか?

 

ここで培った経験はのちに必ず技術として、知識として活きてきます。

これからもプログラミングの道を極めていってください!

コメント