05:「ゲームの処理を作ろう」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
はてなブックマーク - 05:「ゲームの処理を作ろう」 – tmlib.js入門用チュートリアル!避けゲーを作ってみよう
Pocket

モンスターを表示しよう

サンプル

コードの解説

モンスターを表示して動かしてみます。プレイヤークラスと同じような要領でクラスを作成します。

まずはじめに、プレイヤークラスを追加したやり方と同じように画像を読み込みます。

MainSceneクラスでは、モンスターのクラスであるEnemyクラスを複数入れるグループを追加します。

モンスターは複数作るので、グループ用の変数enemyGroupを作っておきます。モンスターは時間経過にともなって生成していくので、スコアの計算と併用するtimer変数も用意しておきましょう。

そして、ゲームの処理が行われるたびに処理されるupdate関数を作ります。

時間を計るtimerのカウントアップと、モンスターの生成処理を行なっています。モンスターを作るタイミングになればEnemyクラスを使ってモンスターを生成します。生成したモンスターは、モンスターのグループに入れることで画面に描画されるようになります。複数のオブジェクトを管理したいときは、このようにグループを使うと便利です。
 
次はEnemyクラスです。

init関数は、クラスを使うときに最初に処理される関数でした。なので、init関数内でモンスターが落ちてくるスピードをランダムに決定しています。

このランダムに決定したスピードを使って下へ移動する処理を作ります。移動処理もゲーム処理が実行されるたびに処理されるupdate関数に書きます。

スピードの分だけY座標を足していけば、モンスターが落ちてくるように動かすことができますね。なお、画面から見えなくなったらモンスターを消す処理も入れています。
 

これだけでも、何となくゲームの形になってきました。次はプレイヤーを動かせるようにしていきます。

プレイヤーを動かせるようにしよう

サンプル

コードの解説

タッチするたびに、プレイヤーの移動方向が逆になるようにします。

まずは、MainSceneをタッチするとEndSceneに移動する処理を消しておきます。

次はプレイヤーの処理です。プレイヤーが最初に移動する方向をinit関数で決めておきます。

そして、update関数で移動処理を作っていきます。タッチを認識したら移動する方向を変えるようにします。

app.pointing.getPointingStart()関数を呼び出すことで、タッチされたかどうかが分かります。タッチされたらdirect変数の中のデータ、”left”と”right”を入れ替えましょう。そして、現在どっちを向いているのかをswitchで判定したら、実際にプレイヤーを動かしていきます。

“left”だったら左方向に移動+アニメーション、”right”だったら右方向に移動+アニメーション、という具合ですね。そして最後に、画面外に出られないようにする処理を呼び出しています。

画面外に出てしまうような移動を行なっていたら、画面に収まる位置に戻すようにしています。これでプレイヤーが画面外に出ることはできません。

モンスターと接触したらゲームオーバーにしよう

サンプル

コードの解説

忘れてはならないのがプレイヤーとモンスターの当たり判定です。モンスターと接触したら、即ゲームオーバーにします。

ついでなので、生き残っている時間を表示するようにしておきます。

表示している文字を途中で変更したいときは、上記のように書きます。次はモンスターとプレイヤーの当たり判定です。

each関数を使うことで、enemyGroupに登録しているモンスター全てに対して行う処理を書くことができます。each関数に当たり判定の処理を渡すことで、簡単に総当りの当たり判定が作れますね。当たり判定の処理はtmlib.jsが用意していますので、たった一行で書くことができます。

敵とヒットしてゲームオーバーになったら生き残った時間をそのまま使ってスコアにしたいですね。そこで、EndSceneに生き残った時間を渡す処理を書きます。

生き残った時間を受け取る処理は次のように書きます。

このように、init関数は引数としてデータを受け取ることができます。受け取った値を使ってスコアを表示しましょう。

これで生き残った時間を表示できるようになりました。ゲームとしてはこれで完成ですがちょっとした味付けを次項でやってみます。