コインキャッチゲーム

矢印キーやタッチでプレイヤーを操作し、上から降ってくるコインをキャッチしてスコアを競う、Phaser製のシンプルなアクションゲームです。

どんなゲームか

「コインキャッチゲーム」は、画面の下にいるプレイヤー（青いバー）を左右に動かして、上から降ってくるコインをキャッチするシンプルなアクションゲームです。制限時間は20秒で、その間に何枚のコインを取れるかを競います。1回のプレイが短いので、ちょっとした空き時間に遊べます。

ブラウザだけで動き、インストールや登録は必要ありません。PCではキーボードかマウス、スマホやタブレットではタッチで操作できます。

遊び方

操作方法

• PC：← / → キーでプレイヤーを左右に動かします。
• マウス・タッチ：画面を押している間、プレイヤーが押した位置に向かって動きます。離れた位置ほど速く動き、近づくとゆっくり止まります。

ルール

1. コインにプレイヤーが触れるとスコアが1点増えます。
2. 5秒ごとにレベルが上がり、コインの出る間隔が短く、落ちる速さが速くなります。
3. 残り時間が0になるとゲームオーバーです。「もう一度プレイ」を押すと最初から遊べます。

自己ベストはハイスコアとしてブラウザに保存され、次に遊ぶときも画面の左上に表示されます。記録を更新すると、ゲームオーバーの画面に「New Record!」と表示されます。

レベルの上がり方

20秒のあいだに、難しさは次のように4段階で変わります。

コインは重力で加速しながら落ちてくるので、レベルが上がると、画面の上から下まであっという間に落ちてきます。

高得点のコツ

• コインを1枚取ると、すぐに画面の上へ新しいコインが1枚追加されます。取れば取るほど画面のコインが増えるので、序盤に取りこぼさないことが大切です。
• 後半（Lv 3以降）はコインが速く落ちるので、落ちてくるコインを追いかけるより、次に落ちてきそうな位置へ先に動いておくと取りやすくなります。
• タッチ操作は、プレイヤーの少し先を押し続けると、動きすぎずに位置を合わせられます。

作った理由

ゲームエンジン「Phaser」を使ったブラウザゲーム作りを一通り試すために作りました。画像の読み込み、物理演算による落下と当たり判定、タイマーによる時間制限、スコアの表示と保存といった、ゲームに必要な基本の要素を、できるだけ小さな題材で組み立てています。

工夫した点

スマホでも遊べるようにした

ゲーム画面は800×600の大きさで作り、画面の大きさに合わせて縦横比を保ったまま拡大・縮小しています。キーボードが無いスマホやタブレットのために、押した位置へプレイヤーが追いかけていく操作を加えました。押した位置との距離に応じて速さを変えているので、目的の位置で行き過ぎずに止まります。

難易度を時間で上げる

最初は20秒間ずっと同じ速さで、単調になりがちでした。そこで、5秒ごとにレベルを上げ、コインの出現間隔と落下の速さを段階的に変えるようにしました。レベルごとの値は定数にまとめてあり、遊びながら調整できるようにしています。

ハイスコアの保存

ハイスコアはブラウザのlocalStorageに保存しています。プライベートブラウズなどでlocalStorageが使えない環境では、保存をあきらめてそのまま遊べるようにしました。

使用技術

• ゲームエンジン：Phaser 4（Arcade Physics で落下と当たり判定を処理）
• 言語：TypeScript
• ビルド：Vite
• 公開：独自ドメインの静的サイト

今後の予定

今はコインを取るだけのシンプルな内容なので、取ってはいけない爆弾やコンボによる得点の倍率、効果音やBGM、取ったときの演出などを加えて、繰り返し遊びたくなるゲームにしていく予定です。