https://coin-catching-game.nulltemp.com/
Phaser 4 と TypeScript で作られた、シンプルなコインキャッチゲームです。画面下部のプレイヤーを左右に動かして、上から降ってくるコインをキャッチし、制限時間内にスコアを稼ぎます。
- ← / → キーでプレイヤー(青いバー)を左右に移動
- スマホ・タブレットでは画面をタッチ(PCではマウスを押したまま)すると、その位置へプレイヤーが移動
- 5秒ごとにレベルが上がり、コインの出現間隔が短く・落下速度が速くなる
- 上から降ってくるコインに触れるとスコア+1
- 制限時間(20秒)が0になるとゲームオーバー
- ゲームオーバー画面の「もう一度プレイ」をクリックするとリスタート
依存パッケージをインストールします。
npm installHMR 付きの開発サーバーを起動します。
npm run dev| コマンド | 説明 |
|---|---|
npm run build |
dist/ に本番用ビルドを出力 |
npm run preview |
ビルド済みの dist/ をローカルで配信 |
npm run typecheck |
tsc --noEmit で型チェックのみ実行 |
テストおよびリンターは設定されていません。
.
├── index.html # Vite エントリーポイント(Google Analytics タグを含む)
├── src/
│ └── main.ts # ゲームロジック一式(preload / create / update)
├── public/
│ ├── assets/ # player.png, coin.png などの静的アセット
│ └── sitemap.xml
└── tsconfig.json
ゲームロジックはすべて src/main.ts にまとまっています。
player— 画面下部のスプライト。矢印キーで左右移動、重力なし、immovablecoins— Arcade Physics のグループ。scheduleSpawnでランダムなX座標に生成され、重力で落下level/levelText— 経過時間からupdateLevelで算出。レベルに応じてコインの出現間隔(1000ms→最短400ms)と初速が変化score/scoreText— コインとplayerが重なる(collectCoin)たびに加算remainingTime/timerText— 1秒ごとにカウントダウンし、0になるとendGameを呼びゲームを停止generateCoinはscheduleSpawnとcollectCoin(コイン取得時の即時補充)の両方から呼ばれる- コインは y=600 を超えると
update内で破棄される
アセット(assets/player.png, assets/coin.png)は preload 内で public/assets/ を参照しており、dev / build のどちらでも同じ相対パスで配信されます。