推しアイデア
呪術廻戦に登場する術式である「投射呪法」をランゲームで再現したこと！ 「投射呪法」はあらかじめ行動を予約して高速で再現するというものです。このシステムをランゲームで再現しました！
投射呪法訓練場
呪術廻戦の投射呪法をテーマにしたランゲームです。
作った背景
あなたはアニメの世界観に憧れたことはありますか？ あなたは術式を使いたいと思いますか？ 思いますよね！ 今回のテーマは「さん」ということで、呪術廻戦の御「三」家である禪院家の術式「投射呪法」をテーマに選びました！
推し技術
推し技術はMediaPipe Poseです！ 没入感のある「全身コントローラー」 キーボードやゲームパッドを使わず、プレイヤー自身の体がコントローラーになります。
プロジェクト詳細
あなたはアニメの世界観に憧れたことはありますか？
あなたは術式を使いたいと思いますか？
思いますよね！
©芥見下々／集英社
「最高速度でぶち抜きたい！！」
プロダクト概要
操作方法は己の「全身」！！
人気漫画『呪術廻戦』に登場する「投射呪法」を体現する、新感覚フルボディWebブラウザゲーム。 Webカメラに向かって実際に動き、1秒を24分割した世界を駆け抜けろ！
フロントエンド技術のみで完結しており、ブラウザさえあれば誰でも「最速の術師」になれる！
推しポイント
ゲーム中の操作は全身のモーションで可能！！ MediaPipe Pose を用いたエッジAIによるリアルタイム骨格推定により、以下の操作を実現！
- 直感的な「術式」発動 跳躍 (Jump): 実際にその場でジャンプ！ 屈み (Crouch): 膝を曲げて回避！ 伏せ (Pushup): 地に伏して障害物をくぐる！
- 「1秒」の支配 Canvas APIを駆使したクリエイティブコーディングにより、原作の「残像感」と「水墨画のようなエフェクト」をブラウザ上で再現！
- 没入型UI/UX 縦書きフォント「Shippori Mincho」や波紋・墨のエフェクトなど、静止画に頼らないプログラマブルな演出で「和」の世界観を統一！
3要素
- 「3秒」の予約 3秒間の「予約フェーズ」で未来の動きを入力。 思考と身体を連動させ、動きを構築せよ。
- 「3つ」のアクション 跳ぶ、屈む、伏せる。 単純な3つの動作も、極限のスピードの中では至難の業。
- 御三家・禪院家 直毘人、直哉（モチーフ）。 最速の術師たちの「赫」き血統を、UIデザインやボイス演出で表現。
画面構成
開始画面
- 直毘人(?)・直哉(?)はnanobananaで作成しました！
- ロゴは自分で作成しました！
ゲーム設定画面
- ゲームモード（投射呪法とリアルタイム）
- レーン数
- 入力方法（カメラとキーボード）
- 操作方法
操作方法
ジャンプ・しゃがみ・伏せ
対応する障害物
プレイ画面
- 予約フェーズ: 未来の自分（ゴースト）を操作してルート構築。
- 発動フェーズ: 構築した動きを高速でトレース実行。
- 直毘人カットイン: 障害物が迫ると直哉が警告（ボイス付き）。
- リアルタイム骨格表示: 自分の動きがどう認識されているかを可視化。
- ゲームオーバー (終幕)
- 到達距離のスコア表示。
技術スタック
- フロントエンド (基盤)
- 言語: TypeScript v5.7
- ビルド: Vite v6.0
- スタイル: CSS3 (Variables, Animations)
- グラフィックス / 演出
- API: Canvas API (Custom Renderer)
- エフェクト: Procedural Generation (波紋, 墨, パーティクル)
- AI / ML (エッジコンピューティング)
- ライブラリ: MediaPipe Pose (@mediapipe/pose)
- 処理: リアルタイム骨格検出・ジェスチャー判定
- インフラ / その他
- 環境: Browser (Client-side only, No Backend)
- アセット: Web Audio API
開発のこだわり
「没入感」への徹底的なこだわり
- UI: 和の雰囲気を統一するため、標準のUIコンポーネントを使わず、CanvasやCSSアニメーションで独自実装。
- UX: 読み込み待ちを減らし、ブラウザを開いた瞬間に「術式」が発動するような軽快なレスポンス。
- AI: プライバシーに配慮し、カメラ映像をサーバーに送信せず、全てブラウザ内で処理を完結。
