動作確認はこちらからどうぞ。

←↑→↓キーで移動、Zキーで穴を堀り、Xキーで埋めます。黄色いやさぐれひよこは落とせば死にますが、ピンク色のものは2段、青いやさぐれひよこは3段連続で落とさないと死にません。

前回作成したスペース・パニックのようなゲームをJavaScript/TypeScriptでもつくってみました。

前回の記事はこちら。
フロアをつくる
プレイヤーを移動させる
穴を掘ってモンスターを倒す
モンスターにプレイヤーを追わせる
仕上げ

点と矩形を扱うためのクラス

点と矩形を扱うためのクラスを作成します。

これは移動方向を示す列挙体です。

これはsleep処理をする関数です。

GameManagerクラス

次にGameManagerクラスを示します。これはスペース・パニックのようなゲームをつくるで作成したGameManagerクラスに相当するものです。

プロパティ

コンストラクタ

GameManagerクラスのコンストラクタを示します。コンストラクタ内ではハシゴを描画するためのその位置の取得とプレイヤーの生成、描画のために必要なイメージを取得をおこなっています。

関数

InitImages関数を示します。プレイヤー、敵、フロアの描画に必要なイメージを取得しています。

InitGame関数を示します。ここではステージクリア後にもとの状態に戻す処理をしています。

Retry関数を示します。これはスコアを0に戻す、残機を最大に戻す、敵や穴をクリアなどのゲームオーバー後に再チャレンジするときにおこなわれる処理です。

ハシゴの位置を取得するGetLadderPositions関数を示します。

床とハシゴを描画するDrawFloor関数とDrawLadders関数、それと関連する関数を示します。

プレイヤーの移動と描画をおこなう関数を示します。実際の処理はPlayerクラスの関数を呼び出しておこないます。

敵の移動と描画をおこなう関数を示します。これも実際に処理はEnemyクラスでおこないます。

穴を描画する関数とこれに関連する関数を示します。ここではHolesのなかから深さが0になったものを取り除いて、hole.GetRectangle関数で深さに応じた背景色と同じ色の矩形を取得し、これを描画することで穴が開いているように見せかけています。

敵を倒したとき、敵を全滅させたときの処理を示します。敵を倒したときは加算される点数を倒した敵の近くに表示させます。加算される点数は一定時間、配列AdditionalPointsListのなかに格納されます。そのあいだだけDrawAdditionalPoints関数によって表示されます。

スコアと残機、加算される点数を描画する関数を示します。

プレイヤーが敵と接触しているか調べて接触時はミス時の処理をおこなう関数を示します。

ゲームオーバーのときはゲームオーバー表示をする関数を示します。

データの更新と描画をおこなう関数を示します。