TRI-Survivor

プロダクト概要

操作方法は己の「指」！！ 迫りくる敵の群れを倒しながら、パワーアップを選択して自機を強化し、可能な限り長く生き残ることを目指します。 フロント、バック、DB全てホスティング済みで誰でも遊べるようにしているんで是非遊んでみてね！

推しポイント

ゲーム中の操作は全て片手のハンドジェスチャーのみ！！！！！ ハンドトラッキングを用いた操作により

• 移動操作
• スキル選択
• 特定のジェスチャーによる必殺技発動 が可能！！！

3要素

• 333秒の生存がクリア
• 三つ目のチュートリアルキャラ
• 3つのスキルから選択
• 所持できるスキルの最大数も３
• 五条家（呪術界御三家）

画面遷移図

各画面

開始画面 ・「GAME START」ボタンからゲームへ進める

認証画面 ・Googleアカウントでログインを行う

ホーム画面 ・スキルと必殺技をそれぞれ１つずつ選択 ・所持コインの確認や、ショップ画面への移動、ログアウトが可能

チュートリアル画面 ・初心者向けの操作説明画面 ・トロワが直接プレイヤーに語りかける形式で、ルールを説明

ショップ画面 ・獲得したコインを使い、新しい武器やステータスを購入

設定画面 ・BGM,SEの音量調整、ユーザーネームやアイコンの変更が可能

プレイ画面 ・実際の戦闘が行われるメインの画面

・敵を倒して得た経験値を表示し、満タンになるとレベルアップ ・レベルが上がるとゲームが一時停止し、ランダムに提示される3つのスキルから1つを選択してキャラクターを強化

・時間経過によって、ホーム画面で選んだ必殺技を放つことができる

リザルト ・ゲームクリア

・ゲームオーバー

必殺技

特定のハンドサインで必殺技が発動する

• 狐のハンドサイン：画面上に狐の頭が出現し、敵を一掃する
• 無量空処：敵の動きが止まり無敵状態になる

技術スタック

フロントエンド

フレームワーク: React (Vite) 使用言語: TypeScript ゲームロジック: PixiJS スタイリング: Tailwind CSS v4, shadcn/ui 状態管理: Zustand

バックエンド

使用言語: Go フレームワーク: Echo ORM: Bun データベース: PostgreSQL (Supabase) マイグレーション: golang-migrate(altasから変更)

ホスティング

フロント：Cloudflare Pages バック：Cloud Run DB：Supabase

その他

環境管理: Devbox コンテナ化: Docker (DBなど) コードレビュー: CodeRabbit 校正ツール: Biome (フロントエンド), gofmt (バックエンド)

開発の進め方

Go初めて使ってます チームメンバーのうち2人はハッカソン初参加の初心者 今回のハッカソンはスケジュール的に開発の余裕がない＋初の技術導入＋メンバー2人はハッカソン初参加 =>事前準備はしっかりしました 技術選定やドキュメント周りの開発以外にかなり時間をかけました。

具体的な施策

• ドキュメントまとめ
  • 開発マニュアル（開発ルールや開発手順）
  • 環境構築
  • 要件定義・技術選定
• CodeRabbitを導入
• GitHub Projectsを導入

イラスト素材

ゲーム内で使用している素材のほとんどのイラストは自主制作によるものです。 主人公やナビゲーターマスコットの「トロワ」など、"かわいらしさ"を感じられるデザインを意識して制作しました。 トロワは名前の由来である“3”をテーマに、三つ目・三つ編み・3つのリボンを特徴としています。登場するモンスターの体にも三角形が3つ刻まれており、キャラクターデザインの随所に“3”のモチーフを散りばめています。